New site frontend updates, search, and general bug fixes

README.md

@@ -12,7 +12,7 @@ Changemaker Lite is a streamlined documentation and development platform featuri
 - **PostgreSQL**: Reliable database backend
 - **n8n**: Workflow automation and service integration
 - **NocoDB**: No-code database platform and smart spreadsheet interface
-- **NocoDB Map Viewer**: Interactive map visualization for geographic data with real-time geolocation, walk sheet generation, and QR code integration
+- **Map**: Interactive map visualization for geographic data with real-time geolocation, walk sheet generation, and QR code integration
 
 ## Quick Start
 

configs/mkdocs-site/default.conf

@@ -5,6 +5,14 @@ server {
     root /config/www;
     index index.html;
     
+    # CRITICAL: Include MIME types
+    include /etc/nginx/mime.types;
+    
+    # Handle trailing slashes for directories
+    location ~ ^([^.]*[^/])$ {
+        try_files $uri $uri/ $uri.html =404;
+    }
+    
     # CORS configuration for search index
     location /search/search_index.json {
         add_header 'Access-Control-Allow-Origin' '*' always;
@@ -16,9 +24,26 @@ server {
         }
     }
     
-    # General CORS for all requests (optional)
+    # Main location block
     location / {
         add_header 'Access-Control-Allow-Origin' '*' always;
-        try_files $uri $uri/ =404;
+        try_files $uri $uri/ $uri/index.html $uri.html /index.html =404;
     }
+    
+    # Handle 404 with MkDocs 404 page
+    error_page 404 /404.html;
+    location = /404.html {
+        internal;
+    }
+    
+    # Static assets
+    location ~* \.(css|js|jpg|jpeg|png|gif|ico|svg|woff|woff2|ttf|eot)$ {
+        add_header 'Access-Control-Allow-Origin' '*' always;
+        expires 30d;
+        add_header Cache-Control "public, immutable";
+    }
+    
+    # Enable gzip
+    gzip on;
+    gzip_types text/plain text/css text/javascript application/javascript application/json;
 }

map/README.md

@@ -55,16 +55,32 @@ A containerized web application that visualizes geographic data from NocoDB on a
    NOCODB_SHIFTS_SHEET=
    NOCODB_SHIFT_SIGNUPS_SHEET=
 
+   # Domain Configuration
+   DOMAIN=cmlite.org
+
+   # MkDocs Integration
+   MKDOCS_URL=https://cmlite.org
+   MKDOCS_SEARCH_URL=https://cmlite.org
+   MKDOCS_SITE_SERVER_PORT=4002
+
    # Server Configuration
    PORT=3000
    NODE_ENV=production
+
+   # Session Secret (Generate with: openssl rand -hex 32)
    SESSION_SECRET=your-secure-random-string
 
-   # Map Defaults (Edmonton, AB)
+   # Map Defaults (Edmonton, Alberta, Canada)
    DEFAULT_LAT=53.5461
    DEFAULT_LNG=-113.4938
    DEFAULT_ZOOM=11
 
+   # Optional: Map Boundaries (prevents users from adding points outside area)
+   # BOUND_NORTH=53.7
+   # BOUND_SOUTH=53.4
+   # BOUND_EAST=-113.3
+   # BOUND_WEST=-113.7
+
    # Cloudflare Settings
    TRUST_PROXY=true
    COOKIE_DOMAIN=.cmlite.org
@@ -131,53 +147,73 @@ A containerized web application that visualizes geographic data from NocoDB on a
 The build script automatically creates the following table structure:
 
 ### Main Locations Table
-- `Geo-Location` (Geo-Data): Format "latitude;longitude" 
-- `latitude` (Decimal): Precision 10, Scale 8
-- `longitude` (Decimal): Precision 11, Scale 8
+- `ID` (ID): Auto-incrementing primary key
+- `Geo-Location` (GeoData): Geographic coordinate data 
+- `latitude` (Decimal): Precision 8, Scale 8
+- `longitude` (Decimal): Precision 8, Scale 8
 - `First Name` (Single Line Text): Person's first name
 - `Last Name` (Single Line Text): Person's last name
 - `Email` (Email): Email address
-- `Phone` (Single Line Text): Phone number
+- `Phone` (PhoneNumber): Phone number with validation
 - `Unit Number` (Single Line Text): Unit or apartment number
-- `Support Level` (Single Select): Options: "1", "2", "3", "4" (1=Strong Support/Green, 2=Moderate Support/Yellow, 3=Low Support/Orange, 4=No Support/Red)
+- `Support Level` (Single Select): Options: "1" (Green), "2" (Yellow), "3" (Orange), "4" (Red)
 - `Address` (Single Line Text): Street address
 - `Sign` (Checkbox): Has campaign sign
-- `Sign Size` (Single Select): Options: "Regular", "Large", "Unsure"
+- `Sign Size` (Single Select): Options: "Regular" (Blue), "Large" (Green), "Unsure" (Orange)
 - `Notes` (Long Text): Additional details and comments
-- `title` (Text): Location name (legacy field)
-- `category` (Single Select): Classification (legacy field)
+- `created_by_user` (Single Line Text): Creator email
+- `last_updated_by_user` (Single Line Text): Last updater email
 
 ### Login Table
-- `Email` (Email): User email address
+- `ID` (ID): Auto-incrementing primary key
+- `Email` (Email): User email address (required)
+- `Password` (Single Line Text): User password (required)
 - `Name` (Single Line Text): User display name  
 - `Admin` (Checkbox): Admin privileges
+- `Created At` (DateTime): Account creation timestamp
+- `Last Login` (DateTime): Last login timestamp
 
 ### Settings Table
-- `key` (Single Line Text): Setting identifier
-- `title` (Single Line Text): Display name
-- `value` (Long Text): Setting value
-- `Geo-Location` (Text): Format "latitude;longitude"
-- `latitude` (Decimal): Precision 10, Scale 8
-- `longitude` (Decimal): Precision 11, Scale 8
+- `ID` (ID): Auto-incrementing primary key
+- `created_at` (DateTime): Record creation timestamp
+- `created_by` (Single Line Text): Creator identifier
+- `Geo-Location` (Single Line Text): Format "latitude;longitude"
+- `latitude` (Decimal): Precision 8, Scale 8
+- `longitude` (Decimal): Precision 8, Scale 8
 - `zoom` (Number): Map zoom level
-- `category` (Single Select): Setting category
-- `updated_by` (Single Line Text): Last updater email
-- `updated_at` (DateTime): Last update time
-- `qr_code_1_image` (Attachment): QR code 1 image
-- `qr_code_2_image` (Attachment): QR code 2 image
-- `qr_code_3_image` (Attachment): QR code 3 image
+- `Walk Sheet Title` (Single Line Text): Title for walk sheets
+- `Walk Sheet Subtitle` (Single Line Text): Subtitle for walk sheets
+- `Walk Sheet Footer` (Long Text): Footer text for walk sheets
+- `QR Code 1 URL` (URL): First QR code link
+- `QR Code 1 Label` (Single Line Text): First QR code label
+- `QR Code 2 URL` (URL): Second QR code link
+- `QR Code 2 Label` (Single Line Text): Second QR code label
+- `QR Code 3 URL` (URL): Third QR code link
+- `QR Code 3 Label` (Single Line Text): Third QR code label
 
 ### Shifts Table
-- Standard NocoDB fields for shift scheduling and management
-- Contains shift dates, times, locations, capacity limits
-- Status tracking (Active, Cancelled, Full)
-- Created automatically by build script with basic structure
+- `ID` (ID): Auto-incrementing primary key
+- `Title` (Single Line Text): Shift title (required)
+- `Description` (Long Text): Detailed shift description
+- `Date` (Date): Shift date (required)
+- `Start Time` (Time): Shift start time (required)
+- `End Time` (Time): Shift end time (required)
+- `Location` (Single Line Text): Shift location
+- `Max Volunteers` (Number): Maximum volunteer capacity (required)
+- `Current Volunteers` (Number): Current volunteer count
+- `Status` (Single Select): Options: "Open" (Green), "Full" (Orange), "Cancelled" (Red)
+- `Created By` (Single Line Text): Creator identifier
+- `Created At` (DateTime): Creation timestamp
+- `Updated At` (DateTime): Last update timestamp
 
 ### Shift Signups Table  
-- Links users to shifts they've signed up for
-- Tracks signup timestamps and user information
-- Handles cancellations and waitlist management
-- Created automatically by build script with basic structure
+- `ID` (ID): Auto-incrementing primary key
+- `Shift ID` (Number): Reference to shifts table (required)
+- `Shift Title` (Single Line Text): Copy of shift title for reference
+- `User Email` (Email): User's email address (required)
+- `User Name` (Single Line Text): User's display name
+- `Signup Date` (DateTime): When user signed up
+- `Status` (Single Select): Options: "Confirmed" (Green), "Cancelled" (Red)
 
 ## API Endpoints
 
@@ -316,15 +352,23 @@ All configuration is done via environment variables:
 | `NOCODB_SETTINGS_SHEET` | Settings table URL for admin config | Required |
 | `NOCODB_SHIFTS_SHEET` | Shifts table URL for shift management | Required |
 | `NOCODB_SHIFT_SIGNUPS_SHEET` | Shift signups table URL for user registrations | Required |
+| `DOMAIN` | Primary domain for the application | Required |
+| `MKDOCS_URL` | MkDocs documentation site URL | Optional |
+| `MKDOCS_SEARCH_URL` | MkDocs search endpoint URL | Optional |
+| `MKDOCS_SITE_SERVER_PORT` | Port for MkDocs integration | 4002 |
 | `PORT` | Server port | 3000 |
 | `NODE_ENV` | Environment mode | production |
-| `SESSION_SECRET` | Session encryption secret | Required |
+| `SESSION_SECRET` | Session encryption secret (generate with openssl rand -hex 32) | Required |
 | `DEFAULT_LAT` | Default map latitude | 53.5461 |
 | `DEFAULT_LNG` | Default map longitude | -113.4938 |
 | `DEFAULT_ZOOM` | Default map zoom level | 11 |
+| `BOUND_NORTH` | Northern boundary for map points (optional) | None |
+| `BOUND_SOUTH` | Southern boundary for map points (optional) | None |
+| `BOUND_EAST` | Eastern boundary for map points (optional) | None |
+| `BOUND_WEST` | Western boundary for map points (optional) | None |
 | `TRUST_PROXY` | Trust proxy headers (for Cloudflare) | true |
 | `COOKIE_DOMAIN` | Cookie domain setting | .cmlite.org |
-| `ALLOWED_ORIGINS` | CORS allowed origins | Multiple URLs |
+| `ALLOWED_ORIGINS` | CORS allowed origins (comma-separated) | Multiple URLs |
 
 ## Maintenance Commands
 
@@ -375,7 +419,7 @@ To run in development mode:
 
 ### Locations not showing
 
-- Verify table has `geodata`, `latitude`, and `longitude` columns
+- Verify table has `Geo-Location`, `latitude`, and `longitude` columns
 - Check that coordinates are valid numbers
 - Ensure API token has read permissions
 

map/app/public/css/shifts.css

@@ -209,6 +209,7 @@
 .calendar-dropdown {
     position: relative;
     display: inline-block;
+    z-index: 100; /* Lower than popup but above other content */
 }
 
 .calendar-toggle {
@@ -227,6 +228,7 @@
     box-shadow: 0 4px 12px rgba(0,0,0,0.15);
     z-index: 1000;
     margin-top: 4px;
+    display: none; /* Hidden by default */
 }
 
 .calendar-option {
@@ -428,13 +430,13 @@
 
 /* Calendar shift popup/tooltip */
 .shift-popup {
-    position: absolute;
+    position: fixed; /* Changed from absolute to fixed */
     background: white;
     border: 1px solid #e0e0e0;
     border-radius: var(--border-radius);
     padding: 15px;
     box-shadow: 0 4px 12px rgba(0,0,0,0.15);
-    z-index: 1000;
+    z-index: 10000; /* High z-index to appear above header */
     min-width: 250px;
     max-width: 300px;
 }
@@ -455,6 +457,153 @@
     gap: 10px;
 }
 
+/* Custom Confirmation Modal */
+.confirm-modal {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 20000; /* Even higher than shift popup */
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.confirm-modal-backdrop {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.5);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 20px;
+    animation: fadeInBackdrop 0.2s ease-out;
+}
+
+.confirm-modal-content {
+    background: white;
+    border-radius: var(--border-radius);
+    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
+    max-width: 400px;
+    width: 100%;
+    padding: 30px;
+    text-align: center;
+    animation: slideInModal 0.3s ease-out;
+    position: relative;
+}
+
+.confirm-modal-content h3 {
+    margin: 0 0 15px 0;
+    color: var(--dark-color);
+    font-size: 1.2em;
+}
+
+.confirm-modal-content p {
+    margin: 0 0 25px 0;
+    color: var(--secondary-color);
+    line-height: 1.5;
+}
+
+.confirm-modal-actions {
+    display: flex;
+    gap: 15px;
+    justify-content: center;
+}
+
+.confirm-modal-actions .btn {
+    padding: 10px 20px;
+    font-weight: 500;
+    min-width: 100px;
+}
+
+/* Animations */
+@keyframes fadeInBackdrop {
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
+}
+
+@keyframes slideInModal {
+    from {
+        opacity: 0;
+        transform: translate(-50%, -60%) scale(0.9);
+    }
+    to {
+        opacity: 1;
+        transform: translate(-50%, -50%) scale(1);
+    }
+}
+
+/* Position the modal content in the center */
+.confirm-modal-content {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+}
+
+/* Mobile adjustments for confirm modal */
+@media (max-width: 768px) {
+    .confirm-modal-backdrop {
+        padding: 15px;
+    }
+    
+    .confirm-modal-content {
+        padding: 25px 20px;
+        max-width: 90%;
+    }
+    
+    .confirm-modal-content h3 {
+        font-size: 1.1em;
+    }
+    
+    .confirm-modal-actions {
+        flex-direction: column;
+        gap: 10px;
+    }
+    
+    .confirm-modal-actions .btn {
+        width: 100%;
+        min-width: auto;
+    }
+}
+
+@media (max-width: 480px) {
+    .confirm-modal-content {
+        padding: 20px 15px;
+    }
+    
+    .confirm-modal-content h3 {
+        font-size: 1em;
+        margin-bottom: 12px;
+    }
+    
+    .confirm-modal-content p {
+        font-size: 0.9em;
+        margin-bottom: 20px;
+    }
+}
+
+/* Fix for mobile popup positioning */
+@media (max-width: 768px) {
+    .shift-popup {
+        max-width: 90%;
+        left: 5% !important;
+        right: 5% !important;
+        width: auto;
+        position: fixed;
+        top: 50% !important;
+        transform: translateY(-50%);
+    }
+}
+
 /* Mobile adjustments */
 @media (max-width: 768px) {
     /* Ensure proper scrolling on mobile */

map/app/public/js/shifts.js

@@ -101,17 +101,17 @@ function displayShifts(shifts) {
     const grid = document.getElementById('shifts-grid');
     
     if (shifts.length === 0) {
-        grid.innerHTML = '<p class="no-shifts">No shifts available at this time.</p>';
+        grid.innerHTML = '<div class="no-shifts">No shifts available for the selected criteria.</div>';
         return;
     }
     
     grid.innerHTML = shifts.map(shift => {
-        const shiftDate = new Date(shift.Date);
-        const isSignedUp = mySignups.some(s => s.shift_id === shift.ID);
+        const isSignedUp = mySignups.some(signup => signup.shift_id === shift.ID);
         const isFull = shift['Current Volunteers'] >= shift['Max Volunteers'];
+        const shiftDate = new Date(shift.Date);
         
         return `
-            <div class="shift-card ${isFull ? 'full' : ''} ${isSignedUp ? 'signed-up' : ''}">
+            <div class="shift-card ${isSignedUp ? 'signed-up' : ''} ${isFull && !isSignedUp ? 'full' : ''}">
                 <h3>${escapeHtml(shift.Title)}</h3>
                 <div class="shift-details">
                     <p>📅 ${shiftDate.toLocaleDateString()}</p>
@@ -119,7 +119,7 @@ function displayShifts(shifts) {
                     <p>📍 ${escapeHtml(shift.Location || 'TBD')}</p>
                     <p>👥 ${shift['Current Volunteers']}/${shift['Max Volunteers']} volunteers</p>
                 </div>
-                ${shift.Description ? `<div class="shift-description">${escapeHtml(shift.Description)}</div>` : ''}
+                ${shift.Description ? `<p class="shift-description">${escapeHtml(shift.Description)}</p>` : ''}
                 <div class="shift-actions">
                     ${isSignedUp 
                         ? `<button class="btn btn-danger btn-sm cancel-signup-btn" data-shift-id="${shift.ID}">Cancel Signup</button>
@@ -133,7 +133,7 @@ function displayShifts(shifts) {
         `;
     }).join('');
     
-    // Add event listeners after rendering
+    // Set up event listeners using delegation
     setupShiftCardListeners();
     
     // Update calendar view if it's currently active
@@ -146,19 +146,14 @@ function displayMySignups() {
     const list = document.getElementById('my-signups-list');
     
     if (mySignups.length === 0) {
-        list.innerHTML = '<p>You haven\'t signed up for any shifts yet.</p>';
+        list.innerHTML = '<p class="no-shifts">You haven\'t signed up for any shifts yet.</p>';
         return;
     }
     
     // Need to match signups with shift details for date/time info
     const signupsWithDetails = mySignups.map(signup => {
         const shift = allShifts.find(s => s.ID === signup.shift_id);
-        return { 
-            ...signup, 
-            shift,
-            // Use title from signup record if available, otherwise from shift
-            displayTitle: signup.shift_title || (shift ? shift.Title : 'Unknown Shift')
-        };
+        return { ...signup, shift };
     }).filter(s => s.shift); // Only show signups where we can find the shift details
     
     list.innerHTML = signupsWithDetails.map(signup => {
@@ -166,18 +161,19 @@ function displayMySignups() {
         return `
             <div class="signup-item">
                 <div>
-                    <h4>${escapeHtml(signup.displayTitle)}</h4>
+                    <h4>${escapeHtml(signup.shift.Title)}</h4>
                     <p>📅 ${shiftDate.toLocaleDateString()} ⏰ ${signup.shift['Start Time']} - ${signup.shift['End Time']}</p>
+                    <p>📍 ${escapeHtml(signup.shift.Location || 'TBD')}</p>
                 </div>
                 <div class="signup-actions">
                     ${generateCalendarDropdown(signup.shift)}
-                    <button class="btn btn-danger btn-sm cancel-signup-btn" data-shift-id="${signup.shift.ID}">Cancel</button>
+                    <button class="btn btn-danger btn-sm cancel-signup-btn" data-shift-id="${signup.shift_id}">Cancel Signup</button>
                 </div>
             </div>
         `;
     }).join('');
     
-    // Add event listeners after rendering
+    // Set up event listeners using delegation
     setupMySignupsListeners();
     
     // Update calendar view if it's currently active
@@ -191,45 +187,55 @@ function setupShiftCardListeners() {
     const grid = document.getElementById('shifts-grid');
     if (!grid) return;
     
-    // Remove any existing listeners by cloning
-    const newGrid = grid.cloneNode(true);
-    grid.parentNode.replaceChild(newGrid, grid);
+    // Use event delegation on the grid itself, not cloning
+    grid.removeEventListener('click', handleShiftCardClick); // Remove if exists
+    grid.addEventListener('click', handleShiftCardClick);
+}
+
+// Create a separate handler function
+function handleShiftCardClick(e) {
+    const target = e.target;
     
-    // Add click listener for all buttons
-    newGrid.addEventListener('click', async (e) => {
-        // Handle signup buttons
-        if (e.target.classList.contains('signup-btn')) {
-            const shiftId = e.target.getAttribute('data-shift-id');
-            await signupForShift(shiftId);
-        } 
-        // Handle cancel buttons
-        else if (e.target.classList.contains('cancel-signup-btn')) {
-            const shiftId = e.target.getAttribute('data-shift-id');
-            await cancelSignup(shiftId);
-        }
-        // Handle calendar toggle buttons
-        else if (e.target.classList.contains('calendar-toggle')) {
-            e.stopPropagation();
-            const dropdown = e.target.closest('.calendar-dropdown');
-            const options = dropdown.querySelector('.calendar-options');
-            const isOpen = options.style.display !== 'none';
-            
-            // Close all other dropdowns
-            document.querySelectorAll('.calendar-options').forEach(opt => {
-                opt.style.display = 'none';
-            });
-            
-            // Toggle this dropdown
-            options.style.display = isOpen ? 'none' : 'block';
-        }
-        // Handle calendar option clicks
-        else if (e.target.closest('.calendar-option')) {
-            e.stopPropagation();
-            const dropdown = e.target.closest('.calendar-dropdown');
-            const options = dropdown.querySelector('.calendar-options');
-            options.style.display = 'none';
-        }
-    });
+    // Handle signup button
+    if (target.classList.contains('signup-btn')) {
+        e.preventDefault();
+        e.stopPropagation();
+        const shiftId = target.getAttribute('data-shift-id');
+        if (shiftId) signupForShift(shiftId);
+        return;
+    }
+    
+    // Handle cancel button
+    if (target.classList.contains('cancel-signup-btn')) {
+        e.preventDefault();
+        e.stopPropagation();
+        const shiftId = target.getAttribute('data-shift-id');
+        if (shiftId) cancelSignup(shiftId);
+        return;
+    }
+    
+    // Handle calendar toggle
+    if (target.classList.contains('calendar-toggle')) {
+        e.preventDefault();
+        e.stopPropagation();
+        const dropdown = target.nextElementSibling;
+        
+        // Close all other dropdowns
+        document.querySelectorAll('.calendar-options').forEach(opt => {
+            if (opt !== dropdown) opt.style.display = 'none';
+        });
+        
+        // Toggle this dropdown
+        dropdown.style.display = dropdown.style.display === 'none' ? 'block' : 'none';
+        return;
+    }
+    
+    // Handle calendar option clicks
+    if (target.classList.contains('calendar-option')) {
+        e.stopPropagation();
+        // Let the link work naturally
+        return;
+    }
 }
 
 // New function to setup listeners for my signups
@@ -237,146 +243,42 @@ function setupMySignupsListeners() {
     const list = document.getElementById('my-signups-list');
     if (!list) return;
     
-    // Remove any existing listeners by cloning
-    const newList = list.cloneNode(true);
-    list.parentNode.replaceChild(newList, list);
+    // Use event delegation
+    list.removeEventListener('click', handleMySignupsClick); // Remove if exists
+    list.addEventListener('click', handleMySignupsClick);
+}
+
+// Create a separate handler for my signups
+function handleMySignupsClick(e) {
+    const target = e.target;
     
-    // Add click listener for all interactions
-    newList.addEventListener('click', async (e) => {
-        // Handle cancel buttons
-        if (e.target.classList.contains('cancel-signup-btn')) {
-            const shiftId = e.target.getAttribute('data-shift-id');
-            await cancelSignup(shiftId);
-        }
-        // Handle calendar toggle buttons
-        else if (e.target.classList.contains('calendar-toggle')) {
-            e.stopPropagation();
-            const dropdown = e.target.closest('.calendar-dropdown');
-            const options = dropdown.querySelector('.calendar-options');
-            const isOpen = options.style.display !== 'none';
-            
-            // Close all other dropdowns
-            document.querySelectorAll('.calendar-options').forEach(opt => {
-                opt.style.display = 'none';
-            });
-            
-            // Toggle this dropdown
-            options.style.display = isOpen ? 'none' : 'block';
-        }
-        // Handle calendar option clicks
-        else if (e.target.closest('.calendar-option')) {
-            e.stopPropagation();
-            const dropdown = e.target.closest('.calendar-dropdown');
-            const options = dropdown.querySelector('.calendar-options');
-            options.style.display = 'none';
-        }
-    });
-}
-
-async function signupForShift(shiftId) {
-    try {
-        const response = await fetch(`/api/shifts/${shiftId}/signup`, {
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/json'
-            }
-        });
-        
-        const data = await response.json();
-        
-        if (data.success) {
-            showStatus('Successfully signed up for shift!', 'success');
-            await loadShifts();
-            await loadMySignups();
-        } else {
-            showStatus(data.error || 'Failed to sign up', 'error');
-        }
-    } catch (error) {
-        console.error('Error signing up:', error);
-        showStatus('Failed to sign up for shift', 'error');
-    }
-}
-
-async function cancelSignup(shiftId) {
-    if (!confirm('Are you sure you want to cancel your signup for this shift?')) {
+    // Handle cancel button
+    if (target.classList.contains('cancel-signup-btn')) {
+        e.preventDefault();
+        e.stopPropagation();
+        const shiftId = target.getAttribute('data-shift-id');
+        if (shiftId) cancelSignup(shiftId);
         return;
     }
     
-    try {
-        const response = await fetch(`/api/shifts/${shiftId}/cancel`, {
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/json'
-            }
+    // Handle calendar toggle
+    if (target.classList.contains('calendar-toggle')) {
+        e.preventDefault();
+        e.stopPropagation();
+        const dropdown = target.nextElementSibling;
+        
+        // Close all other dropdowns
+        document.querySelectorAll('.calendar-options').forEach(opt => {
+            if (opt !== dropdown) opt.style.display = 'none';
         });
         
-        const data = await response.json();
-        
-        if (data.success) {
-            showStatus('Signup cancelled', 'success');
-            await loadShifts();
-            await loadMySignups();
-        } else {
-            showStatus(data.error || 'Failed to cancel signup', 'error');
-        }
-    } catch (error) {
-        console.error('Error cancelling signup:', error);
-        showStatus('Failed to cancel signup', 'error');
-    }
-}
-
-function setupEventListeners() {
-    const dateFilter = document.getElementById('date-filter');
-    if (dateFilter) {
-        dateFilter.addEventListener('change', filterShifts);
-    }
-}
-
-function filterShifts() {
-    const dateFilter = document.getElementById('date-filter').value;
-    
-    if (!dateFilter) {
-        displayShifts(allShifts);
+        // Toggle this dropdown
+        dropdown.style.display = dropdown.style.display === 'none' ? 'block' : 'none';
         return;
     }
-    
-    const filtered = allShifts.filter(shift => {
-        return shift.Date === dateFilter;  // Changed from shift.date to shift.Date
-    });
-    
-    displayShifts(filtered);
 }
 
-function clearFilters() {
-    document.getElementById('date-filter').value = '';
-    loadShifts(); // Reload shifts without filters
-}
-
-function showStatus(message, type = 'info') {
-    const container = document.getElementById('status-container');
-    if (!container) return;
-    
-    const messageDiv = document.createElement('div');
-    messageDiv.className = `status-message ${type}`;
-    messageDiv.textContent = message;
-    
-    container.appendChild(messageDiv);
-    
-    setTimeout(() => {
-        messageDiv.remove();
-    }, 5000);
-}
-
-function escapeHtml(text) {
-    if (text === null || text === undefined) {
-        return '';
-    }
-    const div = document.createElement('div');
-    div.textContent = String(text);
-    return div.innerHTML;
-}
-
-// Add these calendar URL generation functions after the existing functions
+// New function to generate calendar URLs
 function generateCalendarUrls(shift) {
     const shiftDate = new Date(shift.Date);
     
@@ -492,86 +394,466 @@ function setupShiftCardListeners() {
     const grid = document.getElementById('shifts-grid');
     if (!grid) return;
     
-    // Remove any existing listeners by cloning
-    const newGrid = grid.cloneNode(true);
-    grid.parentNode.replaceChild(newGrid, grid);
-    
-    // Add click listener for all buttons
-    newGrid.addEventListener('click', async (e) => {
-        // Handle signup buttons
-        if (e.target.classList.contains('signup-btn')) {
-            const shiftId = e.target.getAttribute('data-shift-id');
-            await signupForShift(shiftId);
-        } 
-        // Handle cancel buttons
-        else if (e.target.classList.contains('cancel-signup-btn')) {
-            const shiftId = e.target.getAttribute('data-shift-id');
-            await cancelSignup(shiftId);
-        }
-        // Handle calendar toggle buttons
-        else if (e.target.classList.contains('calendar-toggle')) {
-            e.stopPropagation();
-            const dropdown = e.target.closest('.calendar-dropdown');
-            const options = dropdown.querySelector('.calendar-options');
-            const isOpen = options.style.display !== 'none';
-            
-            // Close all other dropdowns
-            document.querySelectorAll('.calendar-options').forEach(opt => {
-                opt.style.display = 'none';
-            });
-            
-            // Toggle this dropdown
-            options.style.display = isOpen ? 'none' : 'block';
-        }
-        // Handle calendar option clicks
-        else if (e.target.closest('.calendar-option')) {
-            e.stopPropagation();
-            const dropdown = e.target.closest('.calendar-dropdown');
-            const options = dropdown.querySelector('.calendar-options');
-            options.style.display = 'none';
-        }
-    });
+    // Use event delegation on the grid itself, not cloning
+    grid.removeEventListener('click', handleShiftCardClick); // Remove if exists
+    grid.addEventListener('click', handleShiftCardClick);
 }
 
-// Update setupMySignupsListeners similarly
+// Create a separate handler function
+function handleShiftCardClick(e) {
+    const target = e.target;
+    
+    // Handle signup button
+    if (target.classList.contains('signup-btn')) {
+        e.preventDefault();
+        e.stopPropagation();
+        const shiftId = target.getAttribute('data-shift-id');
+        if (shiftId) signupForShift(shiftId);
+        return;
+    }
+    
+    // Handle cancel button
+    if (target.classList.contains('cancel-signup-btn')) {
+        e.preventDefault();
+        e.stopPropagation();
+        const shiftId = target.getAttribute('data-shift-id');
+        if (shiftId) cancelSignup(shiftId);
+        return;
+    }
+    
+    // Handle calendar toggle
+    if (target.classList.contains('calendar-toggle')) {
+        e.preventDefault();
+        e.stopPropagation();
+        const dropdown = target.nextElementSibling;
+        
+        // Close all other dropdowns
+        document.querySelectorAll('.calendar-options').forEach(opt => {
+            if (opt !== dropdown) opt.style.display = 'none';
+        });
+        
+        // Toggle this dropdown
+        dropdown.style.display = dropdown.style.display === 'none' ? 'block' : 'none';
+        return;
+    }
+    
+    // Handle calendar option clicks
+    if (target.classList.contains('calendar-option')) {
+        e.stopPropagation();
+        // Let the link work naturally
+        return;
+    }
+}
+
+// Fix the setupMySignupsListeners function similarly
 function setupMySignupsListeners() {
     const list = document.getElementById('my-signups-list');
     if (!list) return;
     
-    // Remove any existing listeners by cloning
-    const newList = list.cloneNode(true);
-    list.parentNode.replaceChild(newList, list);
+    // Use event delegation
+    list.removeEventListener('click', handleMySignupsClick); // Remove if exists
+    list.addEventListener('click', handleMySignupsClick);
+}
+
+// Create a separate handler for my signups
+function handleMySignupsClick(e) {
+    const target = e.target;
     
-    // Add click listener for all interactions
-    newList.addEventListener('click', async (e) => {
-        // Handle cancel buttons
-        if (e.target.classList.contains('cancel-signup-btn')) {
-            const shiftId = e.target.getAttribute('data-shift-id');
-            await cancelSignup(shiftId);
-        }
-        // Handle calendar toggle buttons
-        else if (e.target.classList.contains('calendar-toggle')) {
+    // Handle cancel button
+    if (target.classList.contains('cancel-signup-btn')) {
+        e.preventDefault();
+        e.stopPropagation();
+        const shiftId = target.getAttribute('data-shift-id');
+        if (shiftId) cancelSignup(shiftId);
+        return;
+    }
+    
+    // Handle calendar toggle
+    if (target.classList.contains('calendar-toggle')) {
+        e.preventDefault();
+        e.stopPropagation();
+        const dropdown = target.nextElementSibling;
+        
+        // Close all other dropdowns
+        document.querySelectorAll('.calendar-options').forEach(opt => {
+            if (opt !== dropdown) opt.style.display = 'none';
+        });
+        
+        // Toggle this dropdown
+        dropdown.style.display = dropdown.style.display === 'none' ? 'block' : 'none';
+        return;
+    }
+}
+
+// Update the displayShifts function to properly show calendar dropdowns
+function displayShifts(shifts) {
+    const grid = document.getElementById('shifts-grid');
+    
+    if (shifts.length === 0) {
+        grid.innerHTML = '<div class="no-shifts">No shifts available for the selected criteria.</div>';
+        return;
+    }
+    
+    grid.innerHTML = shifts.map(shift => {
+        const isSignedUp = mySignups.some(signup => signup.shift_id === shift.ID);
+        const isFull = shift['Current Volunteers'] >= shift['Max Volunteers'];
+        const shiftDate = new Date(shift.Date);
+        
+        return `
+            <div class="shift-card ${isSignedUp ? 'signed-up' : ''} ${isFull && !isSignedUp ? 'full' : ''}">
+                <h3>${escapeHtml(shift.Title)}</h3>
+                <div class="shift-details">
+                    <p>📅 ${shiftDate.toLocaleDateString()}</p>
+                    <p>⏰ ${shift['Start Time']} - ${shift['End Time']}</p>
+                    <p>📍 ${escapeHtml(shift.Location || 'TBD')}</p>
+                    <p>👥 ${shift['Current Volunteers']}/${shift['Max Volunteers']} volunteers</p>
+                </div>
+                ${shift.Description ? `<p class="shift-description">${escapeHtml(shift.Description)}</p>` : ''}
+                <div class="shift-actions">
+                    ${isSignedUp 
+                        ? `<button class="btn btn-danger btn-sm cancel-signup-btn" data-shift-id="${shift.ID}">Cancel Signup</button>
+                           ${generateCalendarDropdown(shift)}`
+                        : isFull
+                            ? '<button class="btn btn-secondary btn-sm" disabled>Shift Full</button>'
+                            : `<button class="btn btn-primary btn-sm signup-btn" data-shift-id="${shift.ID}">Sign Up</button>`
+                    }
+                </div>
+            </div>
+        `;
+    }).join('');
+    
+    // Set up event listeners using delegation
+    setupShiftCardListeners();
+    
+    // Update calendar view if it's currently active
+    if (currentView === 'calendar') {
+        renderCalendar();
+    }
+}
+
+// Update the displayMySignups function to always show calendar dropdowns
+function displayMySignups() {
+    const list = document.getElementById('my-signups-list');
+    
+    if (mySignups.length === 0) {
+        list.innerHTML = '<p class="no-shifts">You haven\'t signed up for any shifts yet.</p>';
+        return;
+    }
+    
+    // Need to match signups with shift details for date/time info
+    const signupsWithDetails = mySignups.map(signup => {
+        const shift = allShifts.find(s => s.ID === signup.shift_id);
+        return { ...signup, shift };
+    }).filter(s => s.shift); // Only show signups where we can find the shift details
+    
+    list.innerHTML = signupsWithDetails.map(signup => {
+        const shiftDate = new Date(signup.shift.Date);
+        return `
+            <div class="signup-item">
+                <div>
+                    <h4>${escapeHtml(signup.shift.Title)}</h4>
+                    <p>📅 ${shiftDate.toLocaleDateString()} ⏰ ${signup.shift['Start Time']} - ${signup.shift['End Time']}</p>
+                    <p>📍 ${escapeHtml(signup.shift.Location || 'TBD')}</p>
+                </div>
+                <div class="signup-actions">
+                    ${generateCalendarDropdown(signup.shift)}
+                    <button class="btn btn-danger btn-sm cancel-signup-btn" data-shift-id="${signup.shift_id}">Cancel Signup</button>
+                </div>
+            </div>
+        `;
+    }).join('');
+    
+    // Set up event listeners using delegation
+    setupMySignupsListeners();
+    
+    // Update calendar view if it's currently active
+    if (currentView === 'calendar') {
+        renderCalendar();
+    }
+}
+
+// Add a global variable to track popup cleanup
+let currentPopup = null;
+
+// Update the showShiftPopup function to handle z-index and cleanup
+function showShiftPopup(shift, targetElement) {
+    // Remove any existing popup
+    if (currentPopup) {
+        currentPopup.remove();
+        currentPopup = null;
+    }
+    
+    const existingPopup = document.querySelector('.shift-popup');
+    if (existingPopup) {
+        existingPopup.remove();
+    }
+    
+    const popup = document.createElement('div');
+    popup.className = 'shift-popup';
+    
+    const isSignedUp = mySignups.some(signup => signup.shift_id === shift.ID);
+    const isFull = shift['Current Volunteers'] >= shift['Max Volunteers'];
+    const shiftDate = new Date(shift.Date);
+    
+    popup.innerHTML = `
+        <h4>${escapeHtml(shift.Title)}</h4>
+        <p>📅 ${shiftDate.toLocaleDateString()}</p>
+        <p>⏰ ${shift['Start Time']} - ${shift['End Time']}</p>
+        <p>📍 ${escapeHtml(shift.Location || 'TBD')}</p>
+        <p>👥 ${shift['Current Volunteers']}/${shift['Max Volunteers']} volunteers</p>
+        ${shift.Description ? `<p>${escapeHtml(shift.Description)}</p>` : ''}
+        <div class="shift-actions">
+            ${isSignedUp 
+                ? `<button class="btn btn-danger btn-sm cancel-signup-btn" data-shift-id="${shift.ID}">Cancel Signup</button>`
+                : isFull
+                    ? '<button class="btn btn-secondary btn-sm" disabled>Shift Full</button>'
+                    : `<button class="btn btn-primary btn-sm signup-btn" data-shift-id="${shift.ID}">Sign Up</button>`
+            }
+        </div>
+    `;
+    
+    // Position popup
+    document.body.appendChild(popup);
+    currentPopup = popup; // Track the current popup
+    
+    const rect = targetElement.getBoundingClientRect();
+    const popupRect = popup.getBoundingClientRect();
+    
+    let left = rect.left + (rect.width / 2) - (popupRect.width / 2);
+    let top = rect.bottom + 10;
+    
+    // Adjust if popup goes off screen
+    if (left < 10) left = 10;
+    if (left + popupRect.width > window.innerWidth - 10) {
+        left = window.innerWidth - popupRect.width - 10;
+    }
+    if (top + popupRect.height > window.innerHeight - 10) {
+        top = rect.top - popupRect.height - 10;
+    }
+    
+    popup.style.left = `${left}px`;
+    popup.style.top = `${top}px`;
+    
+    // Add event listeners for buttons in popup
+    const signupBtn = popup.querySelector('.signup-btn');
+    const cancelBtn = popup.querySelector('.cancel-signup-btn');
+    
+    if (signupBtn) {
+        signupBtn.addEventListener('click', async (e) => {
             e.stopPropagation();
-            const dropdown = e.target.closest('.calendar-dropdown');
-            const options = dropdown.querySelector('.calendar-options');
-            const isOpen = options.style.display !== 'none';
-            
-            // Close all other dropdowns
-            document.querySelectorAll('.calendar-options').forEach(opt => {
-                opt.style.display = 'none';
-            });
-            
-            // Toggle this dropdown
-            options.style.display = isOpen ? 'none' : 'block';
-        }
-        // Handle calendar option clicks
-        else if (e.target.closest('.calendar-option')) {
+            await signupForShift(shift.ID);
+            popup.remove();
+            currentPopup = null;
+        });
+    }
+    
+    if (cancelBtn) {
+        cancelBtn.addEventListener('click', async (e) => {
             e.stopPropagation();
-            const dropdown = e.target.closest('.calendar-dropdown');
-            const options = dropdown.querySelector('.calendar-options');
-            options.style.display = 'none';
+            await cancelSignup(shift.ID);
+            popup.remove();
+            currentPopup = null;
+        });
+    }
+    
+    // Close popup when clicking outside
+    const closePopup = (e) => {
+        if (!popup.contains(e.target) && e.target !== targetElement) {
+            popup.remove();
+            currentPopup = null;
+            document.removeEventListener('click', closePopup);
+        }
+    };
+    
+    setTimeout(() => {
+        document.addEventListener('click', closePopup);
+    }, 100);
+}
+
+// Close calendar dropdowns when clicking outside
+document.addEventListener('click', function(e) {
+    // Don't close if clicking on a toggle or option
+    if (!e.target.classList.contains('calendar-toggle') && 
+        !e.target.classList.contains('calendar-option') &&
+        !e.target.closest('.calendar-dropdown')) {
+        document.querySelectorAll('.calendar-options').forEach(opt => {
+            opt.style.display = 'none';
+        });
+    }
+});
+
+async function signupForShift(shiftId) {
+    try {
+        const response = await fetch(`/api/shifts/${shiftId}/signup`, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json'
+            }
+        });
+        
+        const data = await response.json();
+        
+        if (data.success) {
+            showStatus('Successfully signed up for shift!', 'success');
+            await loadShifts();
+            await loadMySignups();
+        } else {
+            showStatus(data.error || 'Failed to sign up', 'error');
+        }
+    } catch (error) {
+        console.error('Error signing up:', error);
+        showStatus('Failed to sign up for shift', 'error');
+    }
+}
+
+// Add a custom confirmation modal function
+function showConfirmModal(message, onConfirm, onCancel = null) {
+    // Remove any existing modal
+    const existingModal = document.querySelector('.confirm-modal');
+    if (existingModal) {
+        existingModal.remove();
+    }
+    
+    // Create modal
+    const modal = document.createElement('div');
+    modal.className = 'confirm-modal';
+    modal.innerHTML = `
+        <div class="confirm-modal-backdrop">
+            <div class="confirm-modal-content">
+                <h3>Confirm Action</h3>
+                <p>${message}</p>
+                <div class="confirm-modal-actions">
+                    <button class="btn btn-secondary confirm-cancel">Cancel</button>
+                    <button class="btn btn-danger confirm-ok">Confirm</button>
+                </div>
+            </div>
+        </div>
+    `;
+    
+    document.body.appendChild(modal);
+    
+    // Add event listeners
+    const cancelBtn = modal.querySelector('.confirm-cancel');
+    const confirmBtn = modal.querySelector('.confirm-ok');
+    const backdrop = modal.querySelector('.confirm-modal-backdrop');
+    
+    const cleanup = () => {
+        modal.remove();
+    };
+    
+    cancelBtn.addEventListener('click', () => {
+        cleanup();
+        if (onCancel) onCancel();
+    });
+    
+    confirmBtn.addEventListener('click', () => {
+        cleanup();
+        onConfirm();
+    });
+    
+    // Close on backdrop click
+    backdrop.addEventListener('click', (e) => {
+        if (e.target === backdrop) {
+            cleanup();
+            if (onCancel) onCancel();
         }
     });
+    
+    // Close on escape key
+    const handleEscape = (e) => {
+        if (e.key === 'Escape') {
+            cleanup();
+            document.removeEventListener('keydown', handleEscape);
+            if (onCancel) onCancel();
+        }
+    };
+    document.addEventListener('keydown', handleEscape);
+    
+    // Focus the confirm button for keyboard navigation
+    setTimeout(() => {
+        confirmBtn.focus();
+    }, 100);
+}
+
+// Update the cancelSignup function to use the custom modal
+async function cancelSignup(shiftId) {
+    showConfirmModal(
+        'Are you sure you want to cancel your signup for this shift?',
+        async () => {
+            try {
+                const response = await fetch(`/api/shifts/${shiftId}/cancel`, {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json'
+                    }
+                });
+                
+                const data = await response.json();
+                
+                if (data.success) {
+                    showStatus('Signup cancelled', 'success');
+                    await loadShifts();
+                    await loadMySignups();
+                } else {
+                    showStatus(data.error || 'Failed to cancel signup', 'error');
+                }
+            } catch (error) {
+                console.error('Error cancelling signup:', error);
+                showStatus('Failed to cancel signup', 'error');
+            }
+        }
+    );
+}
+
+function setupEventListeners() {
+    const dateFilter = document.getElementById('date-filter');
+    if (dateFilter) {
+        dateFilter.addEventListener('change', filterShifts);
+    }
+}
+
+function filterShifts() {
+    const dateFilter = document.getElementById('date-filter').value;
+    
+    if (!dateFilter) {
+        displayShifts(allShifts);
+        return;
+    }
+    
+    const filtered = allShifts.filter(shift => {
+        return shift.Date === dateFilter;  // Changed from shift.date to shift.Date
+    });
+    
+    displayShifts(filtered);
+}
+
+function clearFilters() {
+    document.getElementById('date-filter').value = '';
+    loadShifts(); // Reload shifts without filters
+}
+
+function showStatus(message, type = 'info') {
+    const container = document.getElementById('status-container');
+    if (!container) return;
+    
+    const messageDiv = document.createElement('div');
+    messageDiv.className = `status-message ${type}`;
+    messageDiv.textContent = message;
+    
+    container.appendChild(messageDiv);
+    
+    setTimeout(() => {
+        messageDiv.remove();
+    }, 5000);
+}
+
+function escapeHtml(text) {
+    if (text === null || text === undefined) {
+        return '';
+    }
+    const div = document.createElement('div');
+    div.textContent = String(text);
+    return div.innerHTML;
 }
 
 // Calendar View Functions
@@ -755,6 +1037,11 @@ function createCalendarShift(shift) {
 
 function showShiftPopup(shift, targetElement) {
     // Remove any existing popup
+    if (currentPopup) {
+        currentPopup.remove();
+        currentPopup = null;
+    }
+    
     const existingPopup = document.querySelector('.shift-popup');
     if (existingPopup) {
         existingPopup.remove();
@@ -786,6 +1073,7 @@ function showShiftPopup(shift, targetElement) {
     
     // Position popup
     document.body.appendChild(popup);
+    currentPopup = popup; // Track the current popup
     
     const rect = targetElement.getBoundingClientRect();
     const popupRect = popup.getBoundingClientRect();
@@ -810,23 +1098,28 @@ function showShiftPopup(shift, targetElement) {
     const cancelBtn = popup.querySelector('.cancel-signup-btn');
     
     if (signupBtn) {
-        signupBtn.addEventListener('click', async () => {
+        signupBtn.addEventListener('click', async (e) => {
+            e.stopPropagation();
             await signupForShift(shift.ID);
             popup.remove();
+            currentPopup = null;
         });
     }
     
     if (cancelBtn) {
-        cancelBtn.addEventListener('click', async () => {
+        cancelBtn.addEventListener('click', async (e) => {
+            e.stopPropagation();
             await cancelSignup(shift.ID);
             popup.remove();
+            currentPopup = null;
         });
     }
     
     // Close popup when clicking outside
     const closePopup = (e) => {
-        if (!popup.contains(e.target)) {
+        if (!popup.contains(e.target) && e.target !== targetElement) {
             popup.remove();
+            currentPopup = null;
             document.removeEventListener('click', closePopup);
         }
     };