Update app.py

app.py

@@ -1,10 +1,10 @@
-import streamlit as st
 import pandas as pd
 from datetime import datetime, date
 import os
 import sys
 import random
 import json
+import tempfile
 
 # Disable Streamlit's telemetry and usage statistics
 os.environ['STREAMLIT_ANALYTICS_ENABLED'] = 'false'
@@ -279,40 +279,115 @@ st.markdown("""
         margin-top: 10px;
         margin-bottom: 10px;
     }
-</style>
-
-<script>
-document.addEventListener('DOMContentLoaded', function() {
-    // Task card click handler setup
-    document.querySelectorAll('.task-card').forEach(card => {
-        card.addEventListener('click', function() {
-            const taskId = this.getAttribute('data-task-id');
-            openTaskModal(taskId);
-        });
-    });
     
-    // Close modal when clicking the X or outside the modal
-    document.querySelectorAll('.modal-close, .modal-overlay').forEach(el => {
-        el.addEventListener('click', function(e) {
-            if (e.target === this) {
-                closeAllModals();
-            }
-        });
-    });
+    /* Inline status dropdown on task cards */
+    .task-status-dropdown {
+        position: relative;
+        display: inline-block;
+    }
+    
+    .status-dropdown-btn {
+        background-color: transparent;
+        border: none;
+        cursor: pointer;
+        font-size: 12px;
+        color: #fff;
+        text-align: right;
+        padding: 0;
+        margin: 0;
+        width: auto;
+    }
     
-    function openTaskModal(taskId) {
-        document.getElementById(`modal-${taskId}`).style.display = 'block';
+    .status-dropdown-content {
+        display: none;
+        position: absolute;
+        right: 0;
+        background-color: #f9f9f9;
+        min-width: 120px;
+        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+        z-index: 100;
+        border-radius: 4px;
     }
     
-    function closeAllModals() {
-        document.querySelectorAll('.modal-overlay').forEach(modal => {
-            modal.style.display = 'none';
-        });
+    .status-dropdown-content a {
+        color: black;
+        padding: 8px 10px;
+        text-decoration: none;
+        display: block;
+        font-size: 12px;
+        text-align: left;
     }
-});
-</script>
+    
+    .status-dropdown-content a:hover {
+        background-color: #f1f1f1;
+    }
+    
+    .task-status-dropdown:hover .status-dropdown-content {
+        display: block;
+    }
+    
+    /* Status colors for dropdown menu */
+    .status-option-todo {
+        border-left: 4px solid var(--todo-color);
+    }
+    
+    .status-option-progress {
+        border-left: 4px solid var(--progress-color);
+    }
+    
+    .status-option-done {
+        border-left: 4px solid var(--done-color);
+    }
+    
+    .status-option-backlog {
+        border-left: 4px solid var(--backlog-color);
+    }
+</style>
 """, unsafe_allow_html=True)
 
+# Set up paths with more reliable locations
+USER_HOME = os.path.expanduser("~")
+TEMP_DIR = tempfile.gettempdir()
+
+# Define multiple possible locations in order of preference
+TASKS_FILE_LOCATIONS = [
+    os.path.join(os.getcwd(), "data", "tasks.json"),  # Local data directory
+    os.path.join(os.getcwd(), "tasks.json"),          # Current directory
+    os.path.join(USER_HOME, "streamlit_tasks.json"),  # User's home directory
+    os.path.join(TEMP_DIR, "streamlit_tasks.json")    # System temp directory
+]
+
+ASSIGNEE_FILE = "Assignee.txt"  # Direct path to Assignee.txt
+
+# Function to find a writable location
+def get_writable_path(locations):
+    # First check if any existing location is writable
+    for loc in locations:
+        if os.path.exists(loc):
+            if os.access(os.path.dirname(loc), os.W_OK):
+                return loc
+    
+    # Then try to find a writable directory for a new file
+    for loc in locations:
+        dir_path = os.path.dirname(loc)
+        try:
+            if not os.path.exists(dir_path):
+                os.makedirs(dir_path, exist_ok=True)
+            # Test file creation
+            test_file = os.path.join(dir_path, ".write_test")
+            with open(test_file, 'w') as f:
+                f.write("test")
+            os.remove(test_file)
+            return loc
+        except (PermissionError, OSError):
+            continue
+    
+    # If all else fails, use in-memory storage
+    return None
+
+# Get the best writable path
+TASKS_FILE = get_writable_path(TASKS_FILE_LOCATIONS)
+
 # Status color mapping
 STATUS_COLORS = {
     "To Do": "todo",
@@ -321,10 +396,6 @@ STATUS_COLORS = {
     "Backlog": "backlog"
 }
 
-# Set up paths
-TASKS_FILE = "./data/tasks.json"  # Store in data directory for better permissions
-ASSIGNEE_FILE = "Assignee.txt"  # Direct path to Assignee.txt
-
 def create_empty_df():
     """Create an empty DataFrame with the required columns"""
     return pd.DataFrame(columns=[
@@ -353,29 +424,15 @@ def load_tasks():
     
     # Try loading from file
     try:
-        # Try the primary file location
-        if os.path.exists(TASKS_FILE):
+        # Try the selected file location
+        if TASKS_FILE and os.path.exists(TASKS_FILE):
             with open(TASKS_FILE, 'r') as f:
                 tasks_data = json.load(f)
                 df = pd.DataFrame(tasks_data)
+                print(f"Loaded tasks from: {TASKS_FILE}")
         else:
-            # Try alternative locations if main file doesn't exist
-            alt_locations = [
-                "./tasks.json",
-                os.path.join(os.path.expanduser("~"), "temp_tasks.json"),
-                "/tmp/tasks.json"
-            ]
-            
-            for location in alt_locations:
-                if os.path.exists(location):
-                    with open(location, 'r') as f:
-                        tasks_data = json.load(f)
-                        df = pd.DataFrame(tasks_data)
-                        st.info(f"Loaded tasks from alternative location: {location}")
-                        break
-            else:
-                # If no files found, create empty dataframe
-                return create_empty_df()
+            # If no tasks file exists, create empty dataframe
+            return create_empty_df()
         
         # Process the dataframe
         if not df.empty:
@@ -398,7 +455,7 @@ def load_tasks():
         return create_empty_df()
 
 def save_tasks():
-    """Save tasks to JSON file with better error handling and directory creation"""
+    """Save tasks to JSON file with better error handling"""
     try:
         # Convert DataFrame to a list of dictionaries
         tasks_dict = st.session_state.tasks.to_dict(orient='records')
@@ -409,34 +466,44 @@ def save_tasks():
                 if isinstance(value, (datetime, date)):
                     task[key] = value.isoformat()
         
-        # Ensure the directory exists
-        os.makedirs(os.path.dirname(TASKS_FILE), exist_ok=True)
+        # Check if we have a writable file path
+        if TASKS_FILE:
+            try:
+                # Ensure the directory exists
+                os.makedirs(os.path.dirname(TASKS_FILE), exist_ok=True)
+                
+                # Save to JSON file
+                with open(TASKS_FILE, 'w') as f:
+                    json.dump(tasks_dict, f, indent=2)
+                    
+                print(f"Successfully saved tasks to: {TASKS_FILE}")
+                # Reset in-memory flag if we succeeded in saving to file
+                st.session_state.using_memory_storage = False
+                return True
+            except Exception as e:
+                print(f"Error saving to {TASKS_FILE}: {str(e)}")
+                # Fall back to in-memory storage
         
-        # Try multiple file locations if permission denied
-        try:
-            # Save to JSON file
-            with open(TASKS_FILE, 'w') as f:
-                json.dump(tasks_dict, f, indent=2)
-            return True
-        except PermissionError:
-            # Try saving to a temp file in a user-writable location
-            temp_file = os.path.join(os.path.expanduser("~"), "temp_tasks.json")
-            with open(temp_file, 'w') as f:
-                json.dump(tasks_dict, f, indent=2)
-            st.info(f"Tasks saved to alternative location: {temp_file}")
-            return True
+        # Store in memory as fallback
+        st.session_state.in_memory_tasks = tasks_dict
+        st.session_state.using_memory_storage = True
+        
+        if not TASKS_FILE:
+            st.warning("No writable location found. Tasks stored in memory instead.")
+        else:
+            st.warning(f"Could not save to file: {TASKS_FILE}. Tasks stored in memory instead.")
+        
+        return False
     except Exception as e:
         print(f"Error saving tasks: {str(e)}")
-        # Using a session state to store tasks in memory as fallback
+        # Store in memory as fallback
         st.session_state.in_memory_tasks = tasks_dict
-        st.warning(f"Could not save to file: {str(e)}. Tasks stored in memory instead.")
+        st.session_state.using_memory_storage = True
+        st.warning(f"Error saving tasks: {str(e)}. Tasks stored in memory instead.")
         return False
 
 def load_assignees():
-    """Load assignees from Assignee.txt with strict requirement"""
-    # Always log file contents for debugging
-    log_files_in_directory()
-    
+    """Load assignees from Assignee.txt with better error handling"""
     # Check direct path first
     if os.path.exists(ASSIGNEE_FILE):
         return parse_assignee_file(ASSIGNEE_FILE)
@@ -448,15 +515,30 @@ def load_assignees():
         os.path.join(os.getcwd(), "Assignee.txt"),
         "/data/Assignee.txt",
         "../Assignee.txt",
+        os.path.join(USER_HOME, "Assignee.txt"),
+        os.path.join(TEMP_DIR, "Assignee.txt")
     ]
     
     for location in possible_locations:
         if os.path.exists(location):
+            print(f"Found assignee file at: {location}")
             return parse_assignee_file(location)
     
-    # If we reach here, the file wasn't found anywhere
-    st.error("Assignee.txt file not found. Please create this file in the app directory.")
-    return ["ERROR: Please create Assignee.txt file"]
+    # If file not found, create a default one in a writable location
+    try:
+        default_assignees = ["Team Member 1", "Team Member 2", "Team Member 3"]
+        default_location = os.path.join(USER_HOME, "Assignee.txt") if os.access(USER_HOME, os.W_OK) else os.path.join(TEMP_DIR, "Assignee.txt")
+        
+        with open(default_location, "w") as f:
+            for assignee in default_assignees:
+                f.write(f"{assignee}\n")
+        
+        print(f"Created default assignee file at: {default_location}")
+        return default_assignees
+    except Exception as e:
+        print(f"Error creating default assignee file: {str(e)}")
+        # Return default list if all else fails
+        return ["Team Member 1", "Team Member 2", "Team Member 3"]
 
 def parse_assignee_file(file_path):
     """Parse the assignee file and extract names"""
@@ -484,35 +566,14 @@ def parse_assignee_file(file_path):
             print(f"Found {len(assignees)} assignees: {assignees}")
             
             if not assignees:
-                st.warning(f"No valid assignee names found in {file_path}. File exists but may be empty or improperly formatted.")
-                return ["ERROR: Empty or invalid Assignee.txt"]
+                st.warning(f"No valid assignee names found in {file_path}. Using default assignees.")
+                return ["Team Member 1", "Team Member 2", "Team Member 3"]
                 
             return assignees
     except Exception as e:
         st.error(f"Error reading assignee file: {str(e)}")
         print(f"Error reading {file_path}: {str(e)}")
-        return ["ERROR: Cannot read Assignee.txt"]
-
-def log_files_in_directory():
-    """Log files in current directory for debugging"""
-    try:
-        cwd = os.getcwd()
-        files = os.listdir(cwd)
-        print(f"Files in {cwd}: {files}")
-        
-        # Also check parent directory
-        parent = os.path.dirname(cwd)
-        if os.path.exists(parent):
-            parent_files = os.listdir(parent)
-            print(f"Files in parent directory {parent}: {parent_files}")
-            
-        # Check app directory if different
-        app_dir = "/app"
-        if os.path.exists(app_dir) and app_dir != cwd:
-            app_files = os.listdir(app_dir)
-            print(f"Files in {app_dir}: {app_files}")
-    except Exception as e:
-        print(f"Error listing directory contents: {str(e)}")
+        return ["Team Member 1", "Team Member 2", "Team Member 3"]
 
 # Generate a new task ID
 def generate_task_id():
@@ -534,6 +595,7 @@ def update_task(task_idx, field, value):
     """Update a task field and save changes"""
     st.session_state.tasks.at[task_idx, field] = value
     save_tasks()
+    return True
 
 def delete_task(task_id):
     """Delete a task by ID"""
@@ -558,19 +620,21 @@ if 'in_memory_tasks' not in st.session_state:
 if 'using_memory_storage' not in st.session_state:
     st.session_state.using_memory_storage = False
 
-# Create a data directory for file storage
-try:
-    os.makedirs(os.path.dirname(TASKS_FILE), exist_ok=True)
-except Exception as e:
-    print(f"Could not create data directory: {str(e)}")
-    # If we can't create the directory, set a flag to use in-memory storage
+# Show storage location information
+if TASKS_FILE:
+    print(f"Using task storage location: {TASKS_FILE}")
+else:
+    print("No writable location found. Using in-memory storage only.")
     st.session_state.using_memory_storage = True
 
-# Load assignees directly from the file
+# Load assignees
 assignee_list = load_assignees()
 
+# Display storage status notification if using memory storage
 if st.session_state.using_memory_storage:
-    st.markdown('<div style="background-color: #fff3cd; color: #856404; padding: 8px; border-radius: 4px; font-size: 12px; margin-bottom: 10px;">Using in-memory storage due to file permission issues. Tasks may not persist after refresh.</div>', unsafe_allow_html=True)
+    st.markdown('<div style="background-color: #fff3cd; color: #856404; padding: 8px; border-radius: 4px; font-size: 12px; margin-bottom: 10px;">Using in-memory storage. Tasks saved but may not persist after app restart.</div>', unsafe_allow_html=True)
+elif TASKS_FILE:
+    st.markdown(f'<div style="background-color: #d4edda; color: #155724; padding: 8px; border-radius: 4px; font-size: 12px; margin-bottom: 10px;">Tasks saved to disk at: {TASKS_FILE}</div>', unsafe_allow_html=True)
 
 # Sidebar for new tasks
 with st.sidebar:
@@ -613,18 +677,221 @@ with st.sidebar:
                     st.session_state.tasks,
                     pd.DataFrame([new_task])
                 ], ignore_index=True)
-                save_tasks()
-                # Show success but don't mention storage
-                st.success("Task added!")
+                save_result = save_tasks()
+                # Show success message
+                st.success("Task added successfully!")
+                # Clear form after adding
+                st.experimental_rerun()
             except Exception as e:
                 st.error(f"Error adding task: {str(e)}")
-                # Still add to session state even if file save fails
-                st.session_state.in_memory_tasks = st.session_state.tasks.to_dict(orient='records')
-                st.info("Task was added to memory but might not persist after refresh.")
         else:
             st.warning("Please enter a task title")
+            # Create hidden buttons for handling status updates from the cards
+for idx, task in st.session_state.tasks.iterrows():
+    task_id = task['ID'] if 'ID' in task and pd.notna(task['ID']) else f"#{idx+1}"
+    task_id_clean = str(task_id).replace('#', '')
+    
+    for status in ["Backlog", "To Do", "In Progress", "Done"]:
+        status_key = status.replace(' ', '-')
+        button_key = f"update-status-{task_id_clean}-{status_key}"
+        
+        # Create a hidden button that will be triggered by JavaScript
+        if st.button("", key=button_key, help="Hidden button for status update", disabled=task['Status'] == status):
+            update_task(idx, 'Status', status)
+            st.experimental_rerun()
 
-# Display tasks in a horizontal grid layout
+# Add JavaScript for modal and status update functionality
+st.markdown("""
+<script>
+    // Function to open task details modal
+    function openTaskDetails(taskId) {
+        console.log('Opening task details for: ' + taskId);
+        const modal = document.getElementById(`modal-${taskId}`);
+        if (modal) {
+            modal.style.display = 'block';
+            // Move status widget into modal
+            const statusEl = document.getElementById(`status-update-${taskId}`);
+            const targetEl = document.getElementById(`task-status-${taskId}`);
+            if (statusEl && targetEl) {
+                statusEl.classList.remove('status-hidden');
+                targetEl.appendChild(statusEl);
+            }
+        }
+    }
+    
+    // Function to close task modal
+    function closeTaskModal(taskId) {
+        const modal = document.getElementById(`modal-${taskId}`);
+        if (modal) {
+            modal.style.display = 'none';
+        }
+    }
+    
+    // Close modal when clicking outside
+    document.addEventListener('click', function(event) {
+        if (event.target.classList.contains('modal-overlay')) {
+            event.target.style.display = 'none';
+        }
+    });
+    
+    // Function to update task status from dropdown
+    function updateTaskStatus(taskId, newStatus) {
+        console.log(`Updating task ${taskId} to status: ${newStatus}`);
+        
+        // Clean the task ID for use in the button ID
+        const taskIdClean = taskId.replace('#', '');
+        
+        // Format the status for the button ID
+        const statusKey = newStatus.replace(' ', '-');
+        
+        // Construct button ID based on task and status
+        const buttonId = `update-status-${taskIdClean}-${statusKey}`;
+        
+        // Find and click the corresponding hidden button
+        const button = document.querySelector(`button[data-testid="${buttonId}"]`);
+        if (button) {
+            button.click();
+        } else {
+            console.error(`Button not found: ${buttonId}`);
+        }
+    }
+    
+    // Setup task cards and modals after DOM is fully loaded
+    function setupTaskInteractions() {
+        console.log('Setting up task interactions');
+        
+        // Make sure task cards are clickable
+        document.querySelectorAll('.task-card .task-title').forEach(title => {
+            title.addEventListener('click', function() {
+                const taskId = this.closest('.task-card').getAttribute('data-task-id');
+                openTaskDetails(taskId);
+            });
+        });
+    }
+    
+    // Run setup on page load
+    document.addEventListener('DOMContentLoaded', function() {
+        console.log('DOM loaded, setting up task board');
+        setTimeout(setupTaskInteractions, 500);
+    });
+    
+    // Also run after Streamlit reruns
+    const observer = new MutationObserver(function(mutations) {
+        for (const mutation of mutations) {
+            if (mutation.type === 'childList' && mutation.addedNodes.length) {
+                setTimeout(setupTaskInteractions, 200);
+                break;
+            }
+        }
+    });
+    
+    // Start observing the document body for DOM changes
+    document.addEventListener('DOMContentLoaded', function() {
+        observer.observe(document.body, { childList: true, subtree: true });
+    });
+</script>
+""", unsafe_allow_html=True)# Create task modals for each task with more compact display
+for idx, task in st.session_state.tasks.iterrows():
+    task_id = task['ID'] if 'ID' in task and pd.notna(task['ID']) else f"#{idx+1}"
+    status_class = STATUS_COLORS.get(task['Status'], "backlog")
+    
+    # Format dates for display in modal - more compact format
+    date_started_str = task['Date Started'].strftime('%m/%d/%Y') if 'Date Started' in task and pd.notna(task['Date Started']) else "Not set"
+    date_to_finish_str = task['Date to Finish'].strftime('%m/%d/%Y') if 'Date to Finish' in task and pd.notna(task['Date to Finish']) else "Not set"
+    due_date_str = task['Due Date'].strftime('%m/%d/%Y') if 'Due Date' in task and pd.notna(task['Due Date']) else "Not set"
+    
+    # Create modal HTML with improved layout
+    modal_html = f"""
+    <div id="modal-{task_id}" class="modal-overlay">
+        <div class="modal-content">
+            <div class="modal-header">
+                <div class="modal-title">{task['Title']} <span class="status-pill {status_class}">{task['Status']}</span></div>
+                <span class="modal-close" onclick="closeTaskModal('{task_id}');">&times;</span>
+            </div>
+            <div class="modal-body">
+                <div style="display: flex; justify-content: space-between; margin-bottom: 10px;">
+                    <div><strong>Task ID:</strong> {task_id}</div>
+                    <div><strong>Assignee:</strong> {task['Assignee']}</div>
+                </div>
+                
+                <div style="margin-bottom: 15px;">
+                    <strong>Description:</strong><br>
+                    <div style="background: #f9f9f9; padding: 8px; border-radius: 4px; margin-top: 5px;">
+                        {task['Description'] if task['Description'] else "No description provided."}
+                    </div>
+                </div>
+                
+                <div style="display: flex; justify-content: space-between; margin-bottom: 15px; font-size: 13px;">
+                    <div><strong>Date Started:</strong><br>{date_started_str}</div>
+                    <div><strong>Date to Finish:</strong><br>{date_to_finish_str}</div>
+                    <div><strong>Due Date:</strong><br>{due_date_str}</div>
+                </div>
+                
+                <div id="task-status-{task_id}" style="margin-top: 15px; padding-top: 15px; border-top: 1px solid #eee;"></div>
+            </div>
+        </div>
+    </div>
+    """
+    
+    # Render the modal
+    st.markdown(modal_html, unsafe_allow_html=True)
+    
+    # Add task status update widget inside the task modal - improved layout
+    status_placeholder = st.empty()
+    with status_placeholder:
+        # Hide this with CSS and use JavaScript to move it into the modal
+        st.markdown(f"<div id='status-update-{task_id}' class='status-hidden'>", unsafe_allow_html=True)
+        
+        # Create two columns for the status update controls
+        col1, col2 = st.columns([3, 1])
+        
+        with col1:
+            new_status = st.selectbox(
+                f"Update Status",
+                ["Backlog", "To Do", "In Progress", "Done"],
+                index=["Backlog", "To Do", "In Progress", "Done"].index(task['Status']) if task['Status'] in ["Backlog", "To Do", "In Progress", "Done"] else 0,
+                key=f"modal_status_{task_id}"
+            )
+        
+        with col2:
+            if st.button("Update", key=f"update_btn_{task_id}"):
+                try:
+                    update_task(idx, 'Status', new_status)
+                    st.success("Updated!")
+                    # Use JavaScript to close the modal and refresh
+                    st.markdown(f"""
+                    <script>
+                        setTimeout(function() {{
+                            document.getElementById('modal-{task_id}').style.display = 'none';
+                            window.location.reload();
+                        }}, 500);
+                    </script>
+                    """, unsafe_allow_html=True)
+                except Exception as e:
+                    st.error(f"Update failed: {str(e)}")
+        
+        # Delete button with confirmation
+        if st.button("Delete Task", key=f"delete_btn_{task_id}"):
+            confirm = st.checkbox("Confirm deletion?", key=f"confirm_delete_{task_id}")
+            if confirm:
+                try:
+                    if delete_task(task_id):
+                        st.success(f"Task {task_id} deleted!")
+                        # Use JavaScript to close the modal and refresh
+                        st.markdown(f"""
+                        <script>
+                            setTimeout(function() {{
+                                document.getElementById('modal-{task_id}').style.display = 'none';
+                                window.location.reload();
+                            }}, 500);
+                        </script>
+                        """, unsafe_allow_html=True)
+                    else:
+                        st.error(f"Failed to delete task {task_id}")
+                except Exception as e:
+                    st.error(f"Delete failed: {str(e)}")
+        
+        st.markdown("</div>", unsafe_allow_html=True)# Display tasks in a horizontal grid layout
 if st.session_state.tasks.empty:
     st.info("No tasks yet. Add your first task using the sidebar.")
 else:
@@ -660,14 +927,23 @@ else:
                     date_started_str = task['Date Started'].strftime('%m/%d') if 'Date Started' in task and pd.notna(task['Date Started']) else "Not set"
                     date_to_finish_str = task['Date to Finish'].strftime('%m/%d') if 'Date to Finish' in task and pd.notna(task['Date to Finish']) else "Not set"
                     
-                    # Create the card HTML with dates and make it clickable - more compact
+                    # Create the card HTML with inline status dropdown
                     card_html = f"""
-                    <div class="task-card" data-task-id="{task_id}" onclick="document.getElementById('modal-{task_id}').style.display='block';">
+                    <div class="task-card" data-task-id="{task_id}">
                         <div class="card-header {status_class}">
                             <span class="task-id">{task_id}</span>
-                            <span>{task['Status']}</span>
+                            <div class="task-status-dropdown">
+                                <button class="status-dropdown-btn">⋮</button>
+                                <div class="status-dropdown-content">
+                                    <a href="#" class="status-option-backlog" onclick="updateTaskStatus('{task_id}', 'Backlog'); return false;">Backlog</a>
+                                    <a href="#" class="status-option-todo" onclick="updateTaskStatus('{task_id}', 'To Do'); return false;">To Do</a>
+                                    <a href="#" class="status-option-progress" onclick="updateTaskStatus('{task_id}', 'In Progress'); return false;">In Progress</a>
+                                    <a href="#" class="status-option-done" onclick="updateTaskStatus('{task_id}', 'Done'); return false;">Done</a>
+                                    <a href="#" onclick="openTaskDetails('{task_id}'); return false;">View Details</a>
+                                </div>
+                            </div>
                         </div>
-                        <div class="task-title">{task['Title']}</div>
+                        <div class="task-title" onclick="openTaskDetails('{task_id}');">{task['Title']}</div>
                         <div class="task-assignee">{task['Assignee']}</div>
                         <div class="task-dates">
                             <span class="date-display">Start: {date_started_str}</span>
@@ -683,158 +959,4 @@ else:
                 st.markdown('</div>', unsafe_allow_html=True)
     
     # Close container
-    st.markdown('</div>', unsafe_allow_html=True)
-
-    # Create task modals for each task with more compact display
-    for idx, task in st.session_state.tasks.iterrows():
-        task_id = task['ID'] if 'ID' in task and pd.notna(task['ID']) else f"#{idx+1}"
-        status_class = STATUS_COLORS.get(task['Status'], "backlog")
-        
-        # Format dates for display in modal - more compact format
-        date_started_str = task['Date Started'].strftime('%m/%d/%Y') if 'Date Started' in task and pd.notna(task['Date Started']) else "Not set"
-        date_to_finish_str = task['Date to Finish'].strftime('%m/%d/%Y') if 'Date to Finish' in task and pd.notna(task['Date to Finish']) else "Not set"
-        due_date_str = task['Due Date'].strftime('%m/%d/%Y') if 'Due Date' in task and pd.notna(task['Due Date']) else "Not set"
-        
-        # Create modal HTML with improved layout
-        modal_html = f"""
-        <div id="modal-{task_id}" class="modal-overlay">
-            <div class="modal-content">
-                <div class="modal-header">
-                    <div class="modal-title">{task['Title']} <span class="status-pill {status_class}">{task['Status']}</span></div>
-                    <span class="modal-close" onclick="document.getElementById('modal-{task_id}').style.display='none';">&times;</span>
-                </div>
-                <div class="modal-body">
-                    <div style="display: flex; justify-content: space-between; margin-bottom: 10px;">
-                        <div><strong>Task ID:</strong> {task_id}</div>
-                        <div><strong>Assignee:</strong> {task['Assignee']}</div>
-                    </div>
-                    
-                    <div style="margin-bottom: 15px;">
-                        <strong>Description:</strong><br>
-                        <div style="background: #f9f9f9; padding: 8px; border-radius: 4px; margin-top: 5px;">
-                            {task['Description'] if task['Description'] else "No description provided."}
-                        </div>
-                    </div>
-                    
-                    <div style="display: flex; justify-content: space-between; margin-bottom: 15px; font-size: 13px;">
-                        <div><strong>Date Started:</strong><br>{date_started_str}</div>
-                        <div><strong>Date to Finish:</strong><br>{date_to_finish_str}</div>
-                        <div><strong>Due Date:</strong><br>{due_date_str}</div>
-                    </div>
-                    
-                    <div id="task-status-{task_id}" style="margin-top: 15px; padding-top: 15px; border-top: 1px solid #eee;"></div>
-                </div>
-            </div>
-        </div>
-        """
-        
-        # Render the modal
-        st.markdown(modal_html, unsafe_allow_html=True)
-        
-        # Add task status update widget inside the task modal - improved layout
-        status_placeholder = st.empty()
-        with status_placeholder:
-            # Hide this with CSS and use JavaScript to move it into the modal
-            st.markdown(f"<div id='status-update-{task_id}' style='display:none;'>", unsafe_allow_html=True)
-            
-            # Create two columns for the status update controls
-            col1, col2 = st.columns([3, 1])
-            
-            with col1:
-                new_status = st.selectbox(
-                    f"Update Status",
-                    ["Backlog", "To Do", "In Progress", "Done"],
-                    index=["Backlog", "To Do", "In Progress", "Done"].index(task['Status']) if task['Status'] in ["Backlog", "To Do", "In Progress", "Done"] else 0,
-                    key=f"modal_status_{idx}"
-                )
-            
-            with col2:
-                if st.button("Update", key=f"update_btn_{idx}"):
-                    try:
-                        update_task(idx, 'Status', new_status)
-                        st.success("Updated!")
-                        # Use JavaScript to close the modal and refresh
-                        st.markdown(f"""
-                        <script>
-                            setTimeout(function() {{
-                                document.getElementById('modal-{task_id}').style.display = 'none';
-                                window.location.reload();
-                            }}, 500);
-                        </script>
-                        """, unsafe_allow_html=True)
-                    except Exception as e:
-                        st.error(f"Update failed: {str(e)}")
-            
-            # Delete button with confirmation
-            if st.button("Delete Task", key=f"delete_btn_{idx}"):
-                confirm = st.checkbox("Confirm deletion?", key=f"confirm_delete_{idx}")
-                if confirm:
-                    try:
-                        if delete_task(task_id):
-                            st.success(f"Task {task_id} deleted!")
-                            # Use JavaScript to close the modal and refresh
-                            st.markdown(f"""
-                            <script>
-                                setTimeout(function() {{
-                                    document.getElementById('modal-{task_id}').style.display = 'none';
-                                    window.location.reload();
-                                }}, 500);
-                            </script>
-                            """, unsafe_allow_html=True)
-                        else:
-                            st.error(f"Failed to delete task {task_id}")
-                    except Exception as e:
-                        st.error(f"Delete failed: {str(e)}")
-            
-            st.markdown("</div>", unsafe_allow_html=True)
-        
-        # JavaScript to move the status update widget into the modal
-        st.markdown(f"""
-        <script>
-            // Move the status widget into the modal
-            document.addEventListener('DOMContentLoaded', function() {{
-                var statusEl = document.getElementById('status-update-{task_id}');
-                var targetEl = document.getElementById('task-status-{task_id}');
-                if (statusEl && targetEl) {{
-                    statusEl.style.display = 'block';
-                    targetEl.appendChild(statusEl);
-                }}
-            }});
-        </script>
-        """, unsafe_allow_html=True)
-
-# JavaScript to make task modals work properly in Streamlit
-st.markdown("""
-<script>
-    // Ensure modals work properly with Streamlit's update system
-    function setupTaskModals() {
-        document.querySelectorAll('.task-card').forEach(card => {
-            card.addEventListener('click', function(e) {
-                e.preventDefault();
-                const taskId = this.getAttribute('data-task-id');
-                document.getElementById(`modal-${taskId}`).style.display = 'block';
-            });
-        });
-        
-        document.querySelectorAll('.modal-close, .modal-overlay').forEach(el => {
-            el.addEventListener('click', function(e) {
-                if (e.target === this) {
-                    document.querySelectorAll('.modal-overlay').forEach(modal => {
-                        modal.style.display = 'none';
-                    });
-                }
-            });
-        });
-    }
-    
-    // Run setup on initial load and after Streamlit updates
-    document.addEventListener('DOMContentLoaded', setupTaskModals);
-    
-    // For Streamlit's reactive updates
-    const observer = new MutationObserver(function(mutations) {
-        setupTaskModals();
-    });
-    
-    observer.observe(document.body, { childList: true, subtree: true });
-</script>
-""", unsafe_allow_html=True)
+    st.markdown('</div>', unsafe_allow_html=True)import streamlit as st