Update app.py

app.py

@@ -1,9 +1,10 @@
 import streamlit as st
 import pandas as pd
-from datetime import datetime
+from datetime import datetime, date
 import os
 import sys
 import random
+import json
 
 # Disable Streamlit's telemetry and usage statistics
 os.environ['STREAMLIT_ANALYTICS_ENABLED'] = 'false'
@@ -13,12 +14,12 @@ os.environ['STREAMLIT_SERVER_HEADLESS'] = 'true'
 
 # Set page configuration
 st.set_page_config(
-    page_title="Broadcast Solutions Task Board",
-    page_icon="📺",
+    page_title="Task Board",
+    page_icon="📋",
     layout="wide"
 )
 
-# Apply custom CSS for a horizontal board layout
+# Apply custom CSS for a horizontal board layout with expandable tasks
 st.markdown("""
 <style>
     /* Main theme colors */
@@ -36,21 +37,6 @@ st.markdown("""
         --backlog-color: #8BC34A;
     }
     
-    /* Header styling */
-    .main-header {
-        background-color: var(--header-bg);
-        color: white;
-        padding: 1rem;
-        text-align: center;
-        border-radius: 3px;
-        margin-bottom: 20px;
-    }
-    
-    .main-header h1 {
-        margin: 0;
-        font-size: 1.8rem;
-    }
-    
     /* Task Grid Layout */
     .task-container {
         display: flex;
@@ -60,8 +46,8 @@ st.markdown("""
     }
     
     .task-card {
-        width: 180px;
-        height: 150px;
+        width: 220px;
+        min-height: 150px;
         border: 1px solid var(--border-color);
         border-radius: 4px;
         overflow: hidden;
@@ -69,6 +55,13 @@ st.markdown("""
         display: flex;
         flex-direction: column;
         background-color: var(--card-bg);
+        transition: transform 0.2s, box-shadow 0.2s;
+        cursor: pointer;
+    }
+    
+    .task-card:hover {
+        transform: translateY(-3px);
+        box-shadow: 0 4px 8px rgba(0,0,0,0.2);
     }
     
     .card-header {
@@ -117,29 +110,65 @@ st.markdown("""
         font-size: 12px;
         font-style: italic;
         margin-top: auto;
-        margin-bottom: 10px;
+        margin-bottom: 5px;
     }
     
-    /* Status update section */
-    .status-update-section {
-        margin-top: 30px;
-        border-top: 1px solid #eee;
-        padding-top: 20px;
+    .task-dates {
+        padding: 0 10px 10px;
+        color: #666;
+        font-size: 11px;
+        display: flex;
+        justify-content: space-between;
     }
     
-    .status-update-row {
+    /* Modal Dialog Styling */
+    .modal-overlay {
+        display: none;
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background-color: rgba(0, 0, 0, 0.5);
+        z-index: 1000;
+        backdrop-filter: blur(2px);
+    }
+    
+    .modal-content {
+        position: fixed;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        background-color: white;
+        padding: 20px;
+        border-radius: 5px;
+        width: 80%;
+        max-width: 600px;
+        max-height: 80vh;
+        overflow-y: auto;
+        z-index: 1001;
+        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
+    }
+    
+    .modal-header {
         display: flex;
+        justify-content: space-between;
         align-items: center;
-        margin-bottom: 10px;
+        margin-bottom: 15px;
+        padding-bottom: 10px;
+        border-bottom: 1px solid #eee;
     }
     
-    .status-label {
-        width: 200px;
-        font-weight: 500;
+    .modal-close {
+        cursor: pointer;
+        font-size: 20px;
+        color: #999;
     }
     
-    .status-select {
-        flex-grow: 1;
+    .modal-title {
+        font-size: 18px;
+        font-weight: 600;
+        color: var(--primary-color);
     }
     
     /* Form styling */
@@ -150,11 +179,10 @@ st.markdown("""
     /* Remove default Streamlit formatting */
     #MainMenu {visibility: hidden;}
     footer {visibility: hidden;}
-    .block-container {padding-top: 0rem; padding-bottom: 0rem;}
+    .block-container {padding-top: 1rem; padding-bottom: 0rem;}
     
     /* Button styling */
     .stButton > button {
-        width: 100%;
         background-color: var(--secondary-color);
         color: white;
         border: none;
@@ -179,7 +207,70 @@ st.markdown("""
     .status-hidden {
         display: none;
     }
+    
+    /* Status Pills */
+    .status-pill {
+        display: inline-block;
+        padding: 3px 8px;
+        border-radius: 12px;
+        font-size: 11px;
+        font-weight: 500;
+        color: white;
+    }
+    
+    .status-pill.todo {
+        background-color: var(--todo-color);
+    }
+    
+    .status-pill.in-progress {
+        background-color: var(--progress-color);
+    }
+    
+    .status-pill.done {
+        background-color: var(--done-color);
+    }
+    
+    .status-pill.backlog {
+        background-color: var(--backlog-color);
+    }
+    
+    /* Date display in task card */
+    .date-display {
+        font-size: 10px;
+        color: #777;
+    }
 </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();
+            }
+        });
+    });
+    
+    function openTaskModal(taskId) {
+        document.getElementById(`modal-${taskId}`).style.display = 'block';
+    }
+    
+    function closeAllModals() {
+        document.querySelectorAll('.modal-overlay').forEach(modal => {
+            modal.style.display = 'none';
+        });
+    }
+});
+</script>
 """, unsafe_allow_html=True)
 
 # Status color mapping
@@ -191,38 +282,63 @@ STATUS_COLORS = {
 }
 
 # Set up paths
-TASKS_FILE = "tasks.csv"  # Simplified path for tasks
+TASKS_FILE = "tasks.json"  # Using JSON for better persistence
 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=[
-        'ID', 'Title', 'Description', 'Assignee', 'Status', 'Due Date'
+        'ID', 'Title', 'Description', 'Assignee', 'Status', 
+        'Date Started', 'Date to Finish', 'Due Date'  # Added new date fields
     ])
 
 def load_tasks():
-    """Load tasks from CSV file with better error handling"""
+    """Load tasks from JSON file with better error handling"""
     try:
         if os.path.exists(TASKS_FILE):
-            df = pd.read_csv(TASKS_FILE, parse_dates=['Due Date'])
-            if df.empty:
-                return create_empty_df()
-            # Ensure ID column exists
-            if 'ID' not in df.columns:
-                df['ID'] = [f"#{i}" for i in range(1, len(df) + 1)]
-            return df
+            with open(TASKS_FILE, 'r') as f:
+                tasks_data = json.load(f)
+                df = pd.DataFrame(tasks_data)
+                
+                # Convert date strings back to datetime objects
+                if not df.empty:
+                    date_cols = ['Date Started', 'Date to Finish', 'Due Date']
+                    for col in date_cols:
+                        if col in df.columns:
+                            df[col] = pd.to_datetime(df[col]).dt.date
+                
+                if df.empty:
+                    return create_empty_df()
+                    
+                # Ensure ID column exists
+                if 'ID' not in df.columns:
+                    df['ID'] = [f"#{i}" for i in range(1, len(df) + 1)]
+                return df
         else:
             return create_empty_df()
-    except Exception:
+    except Exception as e:
+        print(f"Error loading tasks: {str(e)}")
         return create_empty_df()
 
 def save_tasks():
-    """Save tasks to CSV file with better error handling"""
+    """Save tasks to JSON file with better error handling"""
     try:
-        st.session_state.tasks.to_csv(TASKS_FILE, index=False)
+        # Convert DataFrame to a list of dictionaries
+        tasks_dict = st.session_state.tasks.to_dict(orient='records')
+        
+        # Convert date objects to strings for JSON serialization
+        for task in tasks_dict:
+            for key, value in task.items():
+                if isinstance(value, (datetime, date)):
+                    task[key] = value.isoformat()
+        
+        # Save to JSON file
+        with open(TASKS_FILE, 'w') as f:
+            json.dump(tasks_dict, f, indent=2)
         return True
-    except Exception:
-        # Silently continue with in-memory storage
+    except Exception as e:
+        print(f"Error saving tasks: {str(e)}")
+        st.error(f"Error saving tasks: {str(e)}")
         return False
 
 def load_assignees():
@@ -323,16 +439,30 @@ def generate_task_id():
         # If any error occurs, generate a random ID
         return f"#{random.randint(1, 100)}"
 
+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()
+
+def delete_task(task_id):
+    """Delete a task by ID"""
+    task_idx = st.session_state.tasks[st.session_state.tasks['ID'] == task_id].index
+    if not task_idx.empty:
+        st.session_state.tasks = st.session_state.tasks.drop(task_idx).reset_index(drop=True)
+        save_tasks()
+        return True
+    return False
+
 # Initialize session state ONLY ONCE
 if 'tasks' not in st.session_state:
     st.session_state.tasks = load_tasks()
+    
+if 'task_modal_open' not in st.session_state:
+    st.session_state.task_modal_open = None
 
 # Load assignees directly from the file
 assignee_list = load_assignees()
 
-# Main header
-st.markdown('<div class="main-header"><h1>Task Board</h1></div>', unsafe_allow_html=True)
-
 # Sidebar for new tasks
 with st.sidebar:
     st.markdown('<div class="sidebar-title">➕ Add New Task</div>', unsafe_allow_html=True)
@@ -340,6 +470,14 @@ with st.sidebar:
     description = st.text_area("Description")
     assignee = st.selectbox("Assignee", assignee_list)
     status = st.selectbox("Status", ["Backlog", "To Do", "In Progress", "Done"])
+    
+    # Added date fields
+    col1, col2 = st.columns(2)
+    with col1:
+        date_started = st.date_input("Date Started", value=datetime.now().date())
+    with col2:
+        date_to_finish = st.date_input("Date to Finish", value=datetime.now().date())
+    
     due_date = st.date_input("Due Date")
     
     if st.button("Add Task"):
@@ -351,6 +489,8 @@ with st.sidebar:
                 'Description': description,
                 'Assignee': assignee,
                 'Status': status,
+                'Date Started': date_started,
+                'Date to Finish': date_to_finish,
                 'Due Date': due_date
             }
             st.session_state.tasks = pd.concat([
@@ -367,57 +507,164 @@ with st.sidebar:
 if st.session_state.tasks.empty:
     st.info("No tasks yet. Add your first task using the sidebar.")
 else:
-    # Start the flex container for task cards
-    st.markdown('<div class="task-container">', unsafe_allow_html=True)
+    # Group tasks by status for organized display
+    statuses = ["To Do", "In Progress", "Done", "Backlog"]
+    
+    # Create columns for each status
+    cols = st.columns(len(statuses))
     
-    # Render each task as a card
+    # Display each status column
+    for i, status_name in enumerate(statuses):
+        with cols[i]:
+            st.markdown(f"<h3>{status_name}</h3>", unsafe_allow_html=True)
+            
+            # Filter tasks by current status
+            status_tasks = st.session_state.tasks[st.session_state.tasks['Status'] == status_name]
+            
+            if status_tasks.empty:
+                st.markdown("<div style='text-align:center; color:#999; padding:20px;'>No tasks</div>", unsafe_allow_html=True)
+            else:
+                # Start the flex container for task cards
+                st.markdown('<div class="task-container">', unsafe_allow_html=True)
+                
+                # Render each task as a card
+                for idx, task in status_tasks.iterrows():
+                    status_class = STATUS_COLORS.get(task['Status'], "backlog")
+                    task_id = task['ID'] if 'ID' in task and pd.notna(task['ID']) else f"#{idx+1}"
+                    
+                    # Format dates for display
+                    date_started_str = task['Date Started'].strftime('%Y-%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('%Y-%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
+                    card_html = f"""
+                    <div class="task-card" data-task-id="{task_id}" onclick="document.getElementById('modal-{task_id}').style.display='block';">
+                        <div class="card-header {status_class}">
+                            <span class="task-id">{task_id}</span>
+                            <span>{task['Status']}</span>
+                        </div>
+                        <div class="task-title">{task['Title']}</div>
+                        <div class="task-assignee">{task['Assignee']}</div>
+                        <div class="task-dates">
+                            <span class="date-display">Start: {date_started_str}</span>
+                            <span class="date-display">Finish: {date_to_finish_str}</span>
+                        </div>
+                    </div>
+                    """
+                    
+                    # Render the card
+                    st.markdown(card_html, unsafe_allow_html=True)
+                
+                # Close the container
+                st.markdown('</div>', unsafe_allow_html=True)
+
+    # Create task modals for each task
     for idx, task in st.session_state.tasks.iterrows():
-        status_class = STATUS_COLORS.get(task['Status'], "backlog")
         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
+        date_started_str = task['Date Started'].strftime('%Y-%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('%Y-%m-%d') if 'Date to Finish' in task and pd.notna(task['Date to Finish']) else "Not set"
+        due_date_str = task['Due Date'].strftime('%Y-%m-%d') if 'Due Date' in task and pd.notna(task['Due Date']) else "Not set"
         
-        # Create the card HTML
-        card_html = f"""
-        <div class="task-card">
-            <div class="card-header {status_class}">
-                <span class="task-id">{task_id}</span>
-                <span>{task['Status']}</span>
+        # Create modal HTML
+        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">
+                    <p><strong>Task ID:</strong> {task_id}</p>
+                    <p><strong>Assignee:</strong> {task['Assignee']}</p>
+                    <p><strong>Description:</strong><br>{task['Description']}</p>
+                    <p><strong>Date Started:</strong> {date_started_str}</p>
+                    <p><strong>Date to Finish:</strong> {date_to_finish_str}</p>
+                    <p><strong>Due Date:</strong> {due_date_str}</p>
+                    <div id="task-status-{task_id}"></div>
+                </div>
             </div>
-            <div class="task-title">{task['Title']}</div>
-            <div class="task-assignee">{task['Assignee']}</div>
         </div>
         """
         
-        # Render the card
-        st.markdown(card_html, unsafe_allow_html=True)
-    
-    # Close the container
-    st.markdown('</div>', unsafe_allow_html=True)
-    
-    # Add status update section
-    st.markdown('<div class="status-update-section"><h3>Update Task Status</h3></div>', unsafe_allow_html=True)
-    
-    # Create two columns for the status update controls
-    status_cols = st.columns(2)
-    
-    # Display status update controls in two columns
-    col_index = 0
-    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}"
+        # Render the modal
+        st.markdown(modal_html, unsafe_allow_html=True)
         
-        with status_cols[col_index % 2]:
-            st.markdown(f"<div class='status-label'>{task_id}: {task['Title'][:20]}...</div>", unsafe_allow_html=True)
+        # Add task status update widget inside the task modal
+        # This is hacky but gets the job done - using a placeholder to inject the input into the modal
+        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)
             new_status = st.selectbox(
-                f"Status for {task_id}",
+                f"Update Status for {task_id}",
                 ["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"status_{idx}",
-                label_visibility="collapsed"
+                key=f"modal_status_{idx}"
             )
             
-            if new_status != task['Status']:
-                st.session_state.tasks.at[idx, 'Status'] = new_status
-                save_tasks()  # Save after updating
+            if st.button("Update Status", key=f"update_btn_{idx}"):
+                update_task(idx, 'Status', new_status)
                 st.rerun()
+                
+            if st.button("Delete Task", key=f"delete_btn_{idx}"):
+                if delete_task(task_id):
+                    st.success(f"Task {task_id} deleted!")
+                    st.rerun()
+                else:
+                    st.error(f"Failed to delete task {task_id}")
+            
+            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';
+            });
+        });
         
-        # Switch to next column
-        col_index += 1
+        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)