Update app.py

app.py

@@ -4,11 +4,185 @@ from datetime import datetime
 import os
 import sys
 
+# Set page configuration
+st.set_page_config(
+    page_title="Broadcast Solutions Task Board",
+    page_icon="📺",
+    layout="wide"
+)
+
+# Apply custom CSS for a more professional broadcast look
+st.markdown("""
+<style>
+    /* Main theme colors for broadcast industry feel */
+    :root {
+        --primary-color: #0A2647;
+        --secondary-color: #144272;
+        --accent-color: #205295;
+        --highlight-color: #2C74B3;
+        --text-color: #0A2647;
+        --card-bg-todo: #f0f7ff;
+        --card-bg-progress: #fff7e6;
+        --card-bg-done: #efffef;
+    }
+    
+    /* Header styling */
+    .main-header {
+        background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
+        color: white;
+        padding: 1rem 2rem;
+        border-radius: 5px;
+        margin-bottom: 2rem;
+        text-align: center;
+    }
+    
+    .main-header h1 {
+        margin: 0;
+        font-size: 2.5rem;
+    }
+    
+    .company-name {
+        font-weight: 300;
+        font-size: 1.2rem;
+        opacity: 0.9;
+        letter-spacing: 1px;
+    }
+    
+    /* Task Cards */
+    .task-grid {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 15px;
+        padding-bottom: 20px;
+    }
+    
+    .task-card {
+        flex: 0 0 300px;
+        background-color: white;
+        border-radius: 12px;
+        padding: 15px;
+        box-shadow: 0 4px 8px rgba(0,0,0,0.08);
+        transition: transform 0.2s, box-shadow 0.2s;
+        position: relative;
+        overflow: hidden;
+    }
+    
+    .task-card:hover {
+        transform: translateY(-5px);
+        box-shadow: 0 6px 12px rgba(0,0,0,0.12);
+    }
+    
+    .task-card.todo {
+        border-top: 5px solid #3498db;
+        background-color: var(--card-bg-todo);
+    }
+    
+    .task-card.in-progress {
+        border-top: 5px solid #f39c12;
+        background-color: var(--card-bg-progress);
+    }
+    
+    .task-card.done {
+        border-top: 5px solid #2ecc71;
+        background-color: var(--card-bg-done);
+    }
+    
+    .task-title {
+        font-size: 1.2rem;
+        font-weight: 600;
+        color: var(--text-color);
+        margin-bottom: 10px;
+    }
+    
+    .task-meta {
+        display: flex;
+        justify-content: space-between;
+        color: #555;
+        font-size: 0.9rem;
+        margin-bottom: 12px;
+    }
+    
+    .task-desc {
+        color: #444;
+        font-size: 0.95rem;
+        margin-bottom: 15px;
+    }
+    
+    .task-footer {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-top: 10px;
+    }
+    
+    .status-pill {
+        padding: 4px 10px;
+        border-radius: 15px;
+        font-size: 0.8rem;
+        font-weight: 500;
+    }
+    
+    .status-pill.todo {
+        background-color: #e1f0ff;
+        color: #3498db;
+    }
+    
+    .status-pill.in-progress {
+        background-color: #fff4e0;
+        color: #f39c12;
+    }
+    
+    .status-pill.done {
+        background-color: #e0ffe0;
+        color: #2ecc71;
+    }
+    
+    /* Form styling */
+    .sidebar .block-container {
+        padding-top: 2rem;
+    }
+    
+    /* Remove default Streamlit formatting */
+    #MainMenu {visibility: hidden;}
+    footer {visibility: hidden;}
+    .block-container {padding-top: 0rem; padding-bottom: 0rem;}
+    
+    /* Button styling */
+    .stButton > button {
+        width: 100%;
+        background-color: var(--accent-color);
+        color: white;
+        border: none;
+        padding: 10px 15px;
+        border-radius: 5px;
+        font-weight: 500;
+    }
+    
+    .stButton > button:hover {
+        background-color: var(--highlight-color);
+    }
+    
+    /* Hide storage path message */
+    .storage-message {
+        display: none;
+    }
+    
+    /* Status selector */
+    .status-select {
+        width: 100%;
+        padding: 5px;
+        border-radius: 5px;
+        border: 1px solid #ddd;
+        margin-top: 5px;
+    }
+</style>
+""", unsafe_allow_html=True)
+
 # Color mapping
 STATUS_COLORS = {
-    "To Do": "#e6f3ff",
-    "In Progress": "#fff7e6",
-    "Done": "#e6ffe6"
+    "To Do": "todo",
+    "In Progress": "in-progress",
+    "Done": "done"
 }
 
 # Determine the best place to store data based on environment
@@ -30,14 +204,12 @@ def get_data_path():
             with open(test_file, 'w') as f:
                 f.write('test')
             os.remove(test_file)
-            st.success(f"Using {location} for data storage")
             return location
         except (PermissionError, OSError):
             continue
     
     # If we get here, we couldn't find a writable location
     st.error("Could not find a writable location for data storage!")
-    st.info("The application will run, but changes won't be saved")
     return None
 
 # Set up paths
@@ -97,10 +269,9 @@ def save_tasks():
 
 def load_assignees():
     """Load assignees from text file or use defaults"""
-    default_assignees = ["User 1", "User 2", "User 3"]
+    default_assignees = ["John Doe", "Jane Smith", "Alex Johnson", "Maria Garcia"]
     
     if not ASSIGNEE_FILE:
-        st.info("Using default assignees because no assignee file could be loaded")
         return default_assignees
         
     try:
@@ -108,7 +279,7 @@ def load_assignees():
             # Create a sample file
             try:
                 with open(ASSIGNEE_FILE, "w") as f:
-                    f.write("John Doe - Developer\nJane Smith - Designer\n")
+                    f.write("John Doe - Producer\nJane Smith - Director\nAlex Johnson - Camera Operator\nMaria Garcia - Editor\n")
             except:
                 return default_assignees
         
@@ -123,38 +294,8 @@ def load_assignees():
         
         return assignees if assignees else default_assignees
     except Exception as e:
-        st.info(f"Using default assignees due to error: {str(e)}")
         return default_assignees
 
-# Function to create styled task cards
-def task_card(title, description, assignee, status, due_date):
-    color = STATUS_COLORS.get(status, "#ffffff")
-    card = f"""
-    <div style="
-        background-color: {color};
-        border-radius: 8px;
-        padding: 15px;
-        margin: 10px 0;
-        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
-    ">
-        <h3 style="margin-top: 0; color: #2b5876;">{title}</h3>
-        <p><strong>Assignee:</strong> {assignee}</p>
-        <p><strong>Due Date:</strong> {due_date}</p>
-        <p><strong>Description:</strong> {description}</p>
-        <div style="margin-top: 15px;"></div>
-    </div>
-    """
-    return card
-
-# Display information about the environment (helpful for debugging)
-st.sidebar.expander("Environment Info").write(f"""
-- Python version: {sys.version}
-- Working directory: {os.getcwd()}
-- Data directory: {DATA_DIR}
-- Tasks file: {TASKS_FILE}
-- Assignee file: {ASSIGNEE_FILE}
-""")
-
 # Initialize session state ONLY ONCE
 if 'tasks' not in st.session_state:
     st.session_state.tasks = load_tasks()
@@ -162,8 +303,13 @@ if 'tasks' not in st.session_state:
 # Load assignees once and reuse
 assignee_list = load_assignees()
 
-# App UI starts here
-st.title("Company Task Board 🗒️")
+# Custom header
+st.markdown("""
+<div class="main-header">
+    <span class="company-name">BROADCAST SOLUTIONS</span>
+    <h1>Task Board</h1>
+</div>
+""", unsafe_allow_html=True)
 
 # Sidebar for new tasks
 with st.sidebar:
@@ -193,35 +339,58 @@ with st.sidebar:
         else:
             st.warning("Please enter a task title")
 
-st.divider()
-
-# Display tasks in cards
+# Display tasks in a horizontal grid
 if st.session_state.tasks.empty:
     st.info("No tasks yet. Add your first task using the sidebar.")
 else:
+    # Start the grid container
+    st.markdown('<div class="task-grid">', unsafe_allow_html=True)
+    
+    # Render each task as a card in the grid
     for idx, task in st.session_state.tasks.iterrows():
-        card = task_card(
-            task['Title'],
-            task['Description'],
-            task['Assignee'],
-            task['Status'],
-            task['Due Date'].strftime('%Y-%m-%d') if isinstance(task['Due Date'], datetime) else task['Due Date']
-        )
-        
-        # Display the card
-        st.markdown(card, unsafe_allow_html=True)
+        status_class = STATUS_COLORS.get(task['Status'], "todo")
         
-        # Status update dropdown below the card
-        new_status = st.selectbox(
-            "Update Status",
-            ["To Do", "In Progress", "Done"],
-            index=["To Do", "In Progress", "Done"].index(task['Status']),
-            key=f"status_{idx}"
-        )
+        # Format the date
+        due_date = task['Due Date']
+        if isinstance(due_date, datetime):
+            formatted_date = due_date.strftime('%Y-%m-%d')
+        else:
+            formatted_date = due_date
+            
+        # Create the card HTML
+        card_html = f"""
+        <div class="task-card {status_class}">
+            <div class="task-title">{task['Title']}</div>
+            <div class="task-meta">
+                <span><strong>Assignee:</strong> {task['Assignee']}</span>
+                <span><strong>Due:</strong> {formatted_date}</span>
+            </div>
+            <div class="task-desc">{task['Description']}</div>
+            <div class="task-footer">
+                <span class="status-pill {status_class}">{task['Status']}</span>
+            </div>
+        </div>
+        """
         
-        if new_status != task['Status']:
-            st.session_state.tasks.at[idx, 'Status'] = new_status
-            save_tasks()  # Save after updating
-            st.rerun()
+        # Render the card
+        st.markdown(card_html, unsafe_allow_html=True)
         
-        st.write("")  # Add some spacing between cards
+        # Hidden status update below each card
+        # We'll use columns to make this less prominent
+        cols = st.columns([3, 1])
+        with cols[1]:
+            new_status = st.selectbox(
+                "",  # Empty label
+                ["To Do", "In Progress", "Done"],
+                index=["To Do", "In Progress", "Done"].index(task['Status']),
+                key=f"status_{idx}",
+                label_visibility="collapsed"
+            )
+            
+            if new_status != task['Status']:
+                st.session_state.tasks.at[idx, 'Status'] = new_status
+                save_tasks()  # Save after updating
+                st.rerun()
+    
+    # Close the grid container
+    st.markdown('</div>', unsafe_allow_html=True)