Add sub-tasks feature.

app.py

@@ -3725,10 +3725,18 @@ def unified_task_management():
             User.role.in_([Role.ADMIN, Role.SUPERVISOR])
         ).order_by(User.username).all()
     
+    # Convert team members to JSON-serializable format
+    team_members_data = [{
+        'id': member.id,
+        'username': member.username,
+        'email': member.email,
+        'role': member.role.value if member.role else 'Team Member'
+    } for member in team_members]
+    
     return render_template('unified_task_management.html',
                          title='Task Management',
                          available_projects=available_projects,
-                         team_members=team_members)
+                         team_members=team_members_data)
 
 # Sprint Management Route
 @app.route('/sprints')
@@ -3815,7 +3823,14 @@ def create_task():
         db.session.add(task)
         db.session.commit()
 
-        return jsonify({'success': True, 'message': 'Task created successfully'})
+        return jsonify({
+            'success': True, 
+            'message': 'Task created successfully',
+            'task': {
+                'id': task.id,
+                'task_number': task.task_number
+            }
+        })
 
     except Exception as e:
         db.session.rollback()
@@ -3836,17 +3851,33 @@ def get_task(task_id):
 
         task_data = {
             'id': task.id,
+            'task_number': getattr(task, 'task_number', f'TSK-{task.id:03d}'),
             'name': task.name,
             'description': task.description,
             'status': task.status.name,
             'priority': task.priority.name,
             'estimated_hours': task.estimated_hours,
             'assigned_to_id': task.assigned_to_id,
+            'assigned_to_name': task.assigned_to.username if task.assigned_to else None,
+            'project_id': task.project_id,
+            'project_name': task.project.name if task.project else None,
+            'project_code': task.project.code if task.project else None,
             'start_date': task.start_date.isoformat() if task.start_date else None,
-            'due_date': task.due_date.isoformat() if task.due_date else None
+            'due_date': task.due_date.isoformat() if task.due_date else None,
+            'completed_date': task.completed_date.isoformat() if task.completed_date else None,
+            'archived_date': task.archived_date.isoformat() if task.archived_date else None,
+            'sprint_id': task.sprint_id,
+            'subtasks': [{
+                'id': subtask.id,
+                'name': subtask.name,
+                'status': subtask.status.name,
+                'priority': subtask.priority.name,
+                'assigned_to_id': subtask.assigned_to_id,
+                'assigned_to_name': subtask.assigned_to.username if subtask.assigned_to else None
+            } for subtask in task.subtasks] if task.subtasks else []
         }
 
-        return jsonify({'success': True, 'task': task_data})
+        return jsonify(task_data)
 
     except Exception as e:
         return jsonify({'success': False, 'message': str(e)})
@@ -3977,6 +4008,14 @@ def get_unified_tasks():
                 'created_at': task.created_at.isoformat(),
                 'is_team_task': is_team_task,
                 'subtask_count': len(task.subtasks) if task.subtasks else 0,
+                'subtasks': [{
+                    'id': subtask.id,
+                    'name': subtask.name,
+                    'status': subtask.status.name,
+                    'priority': subtask.priority.name,
+                    'assigned_to_id': subtask.assigned_to_id,
+                    'assigned_to_name': subtask.assigned_to.username if subtask.assigned_to else None
+                } for subtask in task.subtasks] if task.subtasks else [],
                 'sprint_id': task.sprint_id,
                 'sprint_name': task.sprint.name if task.sprint else None,
                 'is_current_sprint': task.sprint.is_current if task.sprint else False

migrate_db.py

@@ -684,12 +684,22 @@ def migrate_task_system(db_path):
                 created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
                 updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
                 created_by_id INTEGER NOT NULL,
-                FOREIGN KEY (task_id) REFERENCES task (id),
+                FOREIGN KEY (task_id) REFERENCES task (id) ON DELETE CASCADE,
                 FOREIGN KEY (assigned_to_id) REFERENCES user (id),
                 FOREIGN KEY (created_by_id) REFERENCES user (id)
             )
             """)
             
+            # Create index for better performance
+            print("Creating index on sub_task.task_id...")
+            cursor.execute("CREATE INDEX idx_subtask_task_id ON sub_task(task_id)")
+        else:
+            # Check if the index exists
+            cursor.execute("SELECT name FROM sqlite_master WHERE type='index' AND name='idx_subtask_task_id'")
+            if not cursor.fetchone():
+                print("Creating missing index on sub_task.task_id...")
+                cursor.execute("CREATE INDEX idx_subtask_task_id ON sub_task(task_id)")
+
         # Check if task_dependency table exists
         cursor.execute("SELECT name FROM sqlite_master WHERE type='table' AND name='task_dependency'")
         if not cursor.fetchone():
@@ -1073,6 +1083,41 @@ def migrate_postgresql_schema():
                 """))
                 db.session.commit()
             
+            # Check if sub_task table exists
+            result = db.session.execute(text("""
+                SELECT table_name 
+                FROM information_schema.tables 
+                WHERE table_name = 'sub_task'
+            """))
+            
+            if not result.fetchone():
+                print("Creating sub_task table...")
+                db.session.execute(text("""
+                    CREATE TABLE sub_task (
+                        id SERIAL PRIMARY KEY,
+                        name VARCHAR(200) NOT NULL,
+                        description TEXT,
+                        status taskstatus DEFAULT 'NOT_STARTED',
+                        priority taskpriority DEFAULT 'MEDIUM',
+                        estimated_hours FLOAT,
+                        task_id INTEGER NOT NULL,
+                        assigned_to_id INTEGER,
+                        start_date DATE,
+                        due_date DATE,
+                        completed_date DATE,
+                        created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+                        updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+                        created_by_id INTEGER NOT NULL,
+                        FOREIGN KEY (task_id) REFERENCES task (id) ON DELETE CASCADE,
+                        FOREIGN KEY (assigned_to_id) REFERENCES "user" (id),
+                        FOREIGN KEY (created_by_id) REFERENCES "user" (id)
+                    )
+                """))
+                
+                # Create index for better performance
+                db.session.execute(text("CREATE INDEX idx_subtask_task_id ON sub_task(task_id)"))
+                db.session.commit()
+            
             print("PostgreSQL schema migration completed successfully!")
             
     except Exception as e:

static/js/subtasks.js

@@ -0,0 +1,363 @@
+// Sub-task Management Functions
+
+// Global variable to track subtasks
+let currentSubtasks = [];
+
+// Initialize subtasks when loading a task
+function initializeSubtasks(taskId) {
+    currentSubtasks = [];
+    const subtasksContainer = document.getElementById('subtasks-container');
+    if (!subtasksContainer) return;
+    
+    subtasksContainer.innerHTML = '<div class="loading">Loading subtasks...</div>';
+    
+    if (taskId) {
+        // Fetch existing subtasks
+        fetch(`/api/tasks/${taskId}`)
+            .then(response => response.json())
+            .then(task => {
+                if (task.subtasks) {
+                    currentSubtasks = task.subtasks;
+                    renderSubtasks();
+                } else {
+                    subtasksContainer.innerHTML = '<p class="no-subtasks">No subtasks yet</p>';
+                }
+            })
+            .catch(error => {
+                console.error('Error loading subtasks:', error);
+                subtasksContainer.innerHTML = '<p class="error">Error loading subtasks</p>';
+            });
+    } else {
+        renderSubtasks();
+    }
+}
+
+// Render subtasks in the modal
+function renderSubtasks() {
+    const container = document.getElementById('subtasks-container');
+    if (!container) return;
+    
+    if (currentSubtasks.length === 0) {
+        container.innerHTML = '<p class="no-subtasks">No subtasks yet</p>';
+        return;
+    }
+    
+    container.innerHTML = currentSubtasks.map((subtask, index) => `
+        <div class="subtask-item" data-subtask-id="${subtask.id || ''}" data-index="${index}">
+            <input type="checkbox" 
+                   class="subtask-checkbox" 
+                   ${subtask.status === 'COMPLETED' ? 'checked' : ''}
+                   onchange="toggleSubtaskStatus(${index})"
+                   ${subtask.id ? '' : 'disabled'}>
+            <input type="text" 
+                   class="subtask-name" 
+                   value="${escapeHtml(subtask.name)}" 
+                   placeholder="Subtask name"
+                   onchange="updateSubtaskName(${index}, this.value)">
+            <select class="subtask-priority" onchange="updateSubtaskPriority(${index}, this.value)">
+                <option value="LOW" ${subtask.priority === 'LOW' ? 'selected' : ''}>Low</option>
+                <option value="MEDIUM" ${subtask.priority === 'MEDIUM' ? 'selected' : ''}>Medium</option>
+                <option value="HIGH" ${subtask.priority === 'HIGH' ? 'selected' : ''}>High</option>
+                <option value="URGENT" ${subtask.priority === 'URGENT' ? 'selected' : ''}>Urgent</option>
+            </select>
+            <select class="subtask-assignee" onchange="updateSubtaskAssignee(${index}, this.value)">
+                <option value="">Unassigned</option>
+                ${renderAssigneeOptions(subtask.assigned_to_id)}
+            </select>
+            <button type="button" class="btn btn-danger btn-xs" onclick="removeSubtask(${index})">Remove</button>
+        </div>
+    `).join('');
+}
+
+// Add a new subtask
+function addSubtask() {
+    const newSubtask = {
+        name: '',
+        status: 'NOT_STARTED',
+        priority: 'MEDIUM',
+        assigned_to_id: null,
+        isNew: true
+    };
+    
+    currentSubtasks.push(newSubtask);
+    renderSubtasks();
+    
+    // Focus on the new subtask input
+    setTimeout(() => {
+        const inputs = document.querySelectorAll('.subtask-name');
+        if (inputs.length > 0) {
+            inputs[inputs.length - 1].focus();
+        }
+    }, 50);
+}
+
+// Remove a subtask
+function removeSubtask(index) {
+    const subtask = currentSubtasks[index];
+    
+    if (subtask.id) {
+        // If it has an ID, it exists in the database
+        if (confirm('Are you sure you want to delete this subtask?')) {
+            fetch(`/api/subtasks/${subtask.id}`, {
+                method: 'DELETE',
+                headers: {
+                    'Content-Type': 'application/json'
+                }
+            })
+            .then(response => {
+                if (response.ok) {
+                    currentSubtasks.splice(index, 1);
+                    renderSubtasks();
+                    showNotification('Subtask deleted successfully', 'success');
+                } else {
+                    throw new Error('Failed to delete subtask');
+                }
+            })
+            .catch(error => {
+                console.error('Error deleting subtask:', error);
+                showNotification('Error deleting subtask', 'error');
+            });
+        }
+    } else {
+        // Just remove from array if not saved yet
+        currentSubtasks.splice(index, 1);
+        renderSubtasks();
+    }
+}
+
+// Update subtask name
+function updateSubtaskName(index, name) {
+    currentSubtasks[index].name = name;
+}
+
+// Update subtask priority
+function updateSubtaskPriority(index, priority) {
+    currentSubtasks[index].priority = priority;
+}
+
+// Update subtask assignee
+function updateSubtaskAssignee(index, assigneeId) {
+    currentSubtasks[index].assigned_to_id = assigneeId || null;
+}
+
+// Toggle subtask status
+function toggleSubtaskStatus(index) {
+    const subtask = currentSubtasks[index];
+    const newStatus = subtask.status === 'COMPLETED' ? 'NOT_STARTED' : 'COMPLETED';
+    
+    if (subtask.id) {
+        // Update in database
+        fetch(`/api/subtasks/${subtask.id}`, {
+            method: 'PUT',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({ status: newStatus })
+        })
+        .then(response => response.json())
+        .then(updatedSubtask => {
+            currentSubtasks[index] = updatedSubtask;
+            renderSubtasks();
+            updateTaskProgress();
+        })
+        .catch(error => {
+            console.error('Error updating subtask status:', error);
+            showNotification('Error updating subtask status', 'error');
+            renderSubtasks(); // Re-render to revert checkbox
+        });
+    } else {
+        currentSubtasks[index].status = newStatus;
+    }
+}
+
+// Save all subtasks for a task
+function saveSubtasks(taskId) {
+    const promises = [];
+    
+    currentSubtasks.forEach(subtask => {
+        if (subtask.isNew && subtask.name.trim()) {
+            // Create new subtask
+            promises.push(
+                fetch('/api/subtasks', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json'
+                    },
+                    body: JSON.stringify({
+                        task_id: taskId,
+                        name: subtask.name,
+                        priority: subtask.priority,
+                        assigned_to_id: subtask.assigned_to_id,
+                        status: subtask.status
+                    })
+                })
+                .then(response => response.json())
+            );
+        } else if (subtask.id && !subtask.isNew) {
+            // Update existing subtask
+            promises.push(
+                fetch(`/api/subtasks/${subtask.id}`, {
+                    method: 'PUT',
+                    headers: {
+                        'Content-Type': 'application/json'
+                    },
+                    body: JSON.stringify({
+                        name: subtask.name,
+                        priority: subtask.priority,
+                        assigned_to_id: subtask.assigned_to_id,
+                        status: subtask.status
+                    })
+                })
+                .then(response => response.json())
+            );
+        }
+    });
+    
+    return Promise.all(promises);
+}
+
+// Update task progress based on subtasks
+function updateTaskProgress() {
+    const taskId = document.getElementById('task-id').value;
+    if (!taskId) return;
+    
+    // Refresh the task card in the board
+    if (typeof refreshTaskCard === 'function') {
+        refreshTaskCard(taskId);
+    }
+}
+
+// Render assignee options
+function renderAssigneeOptions(selectedId) {
+    // This should be populated from the global team members list
+    const teamMembers = window.teamMembers || [];
+    return teamMembers.map(member => 
+        `<option value="${member.id}" ${member.id == selectedId ? 'selected' : ''}>${escapeHtml(member.username)}</option>`
+    ).join('');
+}
+
+// Helper function to escape HTML
+function escapeHtml(unsafe) {
+    return unsafe
+        .replace(/&/g, "&amp;")
+        .replace(/</g, "&lt;")
+        .replace(/>/g, "&gt;")
+        .replace(/"/g, "&quot;")
+        .replace(/'/g, "&#039;");
+}
+
+// Display subtasks in task cards
+function renderSubtasksInCard(subtasks) {
+    if (!subtasks || subtasks.length === 0) return '';
+    
+    const completedCount = subtasks.filter(s => s.status === 'COMPLETED').length;
+    const totalCount = subtasks.length;
+    const percentage = Math.round((completedCount / totalCount) * 100);
+    
+    return `
+        <div class="task-subtasks">
+            <div class="subtask-progress">
+                <div class="subtask-progress-bar">
+                    <div class="subtask-progress-fill" style="width: ${percentage}%"></div>
+                </div>
+                <span class="subtask-count">${completedCount}/${totalCount} subtasks</span>
+            </div>
+        </div>
+    `;
+}
+
+// Add subtask styles
+const subtaskStyles = `
+<style>
+/* Subtask Styles - Compact */
+.subtask-item {
+    display: flex;
+    align-items: center;
+    gap: 0.3rem;
+    margin-bottom: 0.4rem;
+    padding: 0.4rem 0.5rem;
+    background: #f8f9fa;
+    border-radius: 4px;
+    border: 1px solid #e9ecef;
+}
+
+.subtask-checkbox {
+    cursor: pointer;
+    width: 18px;
+    height: 18px;
+}
+
+.subtask-name {
+    flex: 2;
+    padding: 0.3rem 0.5rem;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    font-size: 0.85rem;
+}
+
+.subtask-priority {
+    flex: 0.8;
+    padding: 0.3rem 0.5rem;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    font-size: 0.8rem;
+}
+
+.subtask-assignee {
+    flex: 1.2;
+    padding: 0.3rem 0.5rem;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    font-size: 0.8rem;
+}
+
+.no-subtasks {
+    color: #6c757d;
+    font-style: italic;
+    text-align: center;
+    padding: 1rem;
+}
+
+/* Subtask progress in task cards */
+.task-subtasks {
+    margin-top: 0.75rem;
+    padding-top: 0.75rem;
+    border-top: 1px solid #e9ecef;
+}
+
+.subtask-progress {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+.subtask-progress-bar {
+    flex: 1;
+    height: 6px;
+    background: #e9ecef;
+    border-radius: 3px;
+    overflow: hidden;
+}
+
+.subtask-progress-fill {
+    height: 100%;
+    background: #28a745;
+    transition: width 0.3s ease;
+}
+
+.subtask-count {
+    font-size: 0.75rem;
+    color: #6c757d;
+    white-space: nowrap;
+}
+</style>
+`;
+
+// Inject styles when document is ready
+if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', function() {
+        document.head.insertAdjacentHTML('beforeend', subtaskStyles);
+    });
+} else {
+    document.head.insertAdjacentHTML('beforeend', subtaskStyles);
+}

templates/task_modal.html

@@ -30,7 +30,7 @@
                     
                     <div class="form-group">
                         <label for="task-description">Description</label>
-                        <textarea id="task-description" rows="3"></textarea>
+                        <textarea id="task-description" rows="2"></textarea>
                     </div>
                     
                     <div class="form-group">
@@ -210,21 +210,30 @@ document.addEventListener('DOMContentLoaded', function() {
 
 <!-- Task Modal Styles -->
 <style>
-/* Task Modal Specific Styles */
+/* Task Modal Specific Styles - Compact Design */
 .task-modal .modal-content {
     width: 95%;
-    max-width: 1000px;
+    max-width: 900px;
-    max-height: 95vh;
+    max-height: 90vh;
     overflow-y: auto;
 }
 
+.task-modal .modal-header {
+    padding: 0.75rem 1rem;
+}
+
+.task-modal .modal-header h2 {
+    font-size: 1.25rem;
+    margin: 0;
+}
+
 .task-modal-content .modal-body {
-    padding: 1.5rem;
+    padding: 1rem;
 }
 
 .form-section {
-    margin-bottom: 2rem;
+    margin-bottom: 1.25rem;
-    padding-bottom: 1.5rem;
+    padding-bottom: 1rem;
     border-bottom: 1px solid #e9ecef;
 }
 
@@ -234,57 +243,57 @@ document.addEventListener('DOMContentLoaded', function() {
 }
 
 .form-section h3 {
-    margin: 0 0 1rem 0;
+    margin: 0 0 0.75rem 0;
     color: #495057;
-    font-size: 1.1rem;
+    font-size: 1rem;
     font-weight: 600;
-    padding-bottom: 0.5rem;
+    padding-bottom: 0.25rem;
     border-bottom: 2px solid #f8f9fa;
 }
 
-/* Dependencies Grid */
+/* Dependencies Grid - Compact */
 .dependencies-grid {
     display: grid;
     grid-template-columns: 1fr 1fr;
-    gap: 1.5rem;
+    gap: 1rem;
 }
 
 .dependency-column {
     background: #f8f9fa;
-    border-radius: 8px;
+    border-radius: 6px;
-    padding: 1rem;
+    padding: 0.75rem;
 }
 
 .dependency-column h4 {
-    margin: 0 0 0.5rem 0;
+    margin: 0 0 0.25rem 0;
     color: #495057;
-    font-size: 0.95rem;
+    font-size: 0.9rem;
     font-weight: 600;
 }
 
 .dependency-help {
-    font-size: 0.8rem;
+    font-size: 0.75rem;
     color: #6c757d;
-    margin: 0 0 1rem 0;
+    margin: 0 0 0.5rem 0;
-    line-height: 1.4;
+    line-height: 1.3;
 }
 
 .dependency-list {
-    min-height: 60px;
+    min-height: 40px;
-    margin-bottom: 1rem;
+    margin-bottom: 0.5rem;
 }
 
 .dependency-item {
     display: flex;
     align-items: center;
     justify-content: space-between;
-    padding: 0.6rem;
+    padding: 0.4rem 0.5rem;
     background: white;
-    border: 1px solid #ddd;
+    border: 1px solid #dee2e6;
-    border-radius: 6px;
+    border-radius: 4px;
-    margin-bottom: 0.5rem;
+    margin-bottom: 0.3rem;
-    font-size: 0.9rem;
+    font-size: 0.85rem;
-    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
 }
 
 .dependency-task-info {
@@ -332,15 +341,15 @@ document.addEventListener('DOMContentLoaded', function() {
 
 .add-dependency-form {
     display: flex;
-    gap: 0.5rem;
+    gap: 0.3rem;
 }
 
 .dependency-input {
     flex: 1;
-    padding: 0.5rem;
+    padding: 0.3rem 0.5rem;
     border: 1px solid #ddd;
     border-radius: 4px;
-    font-size: 0.9rem;
+    font-size: 0.8rem;
     font-family: 'Courier New', monospace;
     background: white;
 }
@@ -356,13 +365,13 @@ document.addEventListener('DOMContentLoaded', function() {
     font-style: italic;
 }
 
-/* Subtasks Section */
+/* Subtasks Section - Compact */
 .subtask-item {
     display: flex;
     align-items: center;
-    gap: 0.5rem;
+    gap: 0.3rem;
-    margin-bottom: 0.5rem;
+    margin-bottom: 0.3rem;
-    padding: 0.5rem;
+    padding: 0.3rem 0.5rem;
     background: #f8f9fa;
     border-radius: 4px;
 }
@@ -370,11 +379,13 @@ document.addEventListener('DOMContentLoaded', function() {
 .subtask-item input[type="text"] {
     flex: 1;
     margin: 0;
+    padding: 0.3rem 0.5rem;
+    font-size: 0.85rem;
 }
 
 .subtask-item button {
-    padding: 0.25rem 0.5rem;
+    padding: 0.2rem 0.4rem;
-    font-size: 0.75rem;
+    font-size: 0.7rem;
 }
 
 /* Hybrid Date Input Styles */
@@ -424,6 +435,70 @@ document.addEventListener('DOMContentLoaded', function() {
     background: #e9ecef;
 }
 
+/* Compact Form Styles */
+.form-group {
+    margin-bottom: 0.75rem;
+}
+
+.form-group label {
+    display: block;
+    margin-bottom: 0.25rem;
+    font-size: 0.85rem;
+    font-weight: 500;
+    color: #495057;
+}
+
+.form-group input,
+.form-group select,
+.form-group textarea {
+    width: 100%;
+    padding: 0.4rem 0.6rem;
+    font-size: 0.85rem;
+    border: 1px solid #ced4da;
+    border-radius: 4px;
+    transition: border-color 0.15s ease-in-out;
+}
+
+.form-group input:focus,
+.form-group select:focus,
+.form-group textarea:focus {
+    outline: none;
+    border-color: #80bdff;
+    box-shadow: 0 0 0 0.1rem rgba(0, 123, 255, 0.25);
+}
+
+.form-group textarea {
+    resize: vertical;
+    min-height: 50px;
+}
+
+.form-row {
+    display: flex;
+    gap: 0.75rem;
+    margin-bottom: 0.75rem;
+}
+
+.form-row .form-group {
+    flex: 1;
+    margin-bottom: 0;
+}
+
+/* Compact button styles */
+.btn-sm {
+    padding: 0.25rem 0.5rem;
+    font-size: 0.8rem;
+}
+
+.modal-footer {
+    padding: 0.75rem 1rem;
+    gap: 0.5rem;
+}
+
+.modal-footer .btn {
+    padding: 0.5rem 1rem;
+    font-size: 0.9rem;
+}
+
 /* Mobile Responsiveness */
 @media (max-width: 768px) {
     .task-modal .modal-content {

templates/unified_task_management.html

@@ -246,6 +246,39 @@
     flex-shrink: 0;
 }
 
+/* Subtask progress styles */
+.task-subtasks {
+    margin-top: 0.75rem;
+    padding-top: 0.75rem;
+    border-top: 1px solid #e9ecef;
+}
+
+.subtask-progress {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+.subtask-progress-bar {
+    flex: 1;
+    height: 6px;
+    background: #e9ecef;
+    border-radius: 3px;
+    overflow: hidden;
+}
+
+.subtask-progress-fill {
+    height: 100%;
+    background: #28a745;
+    transition: width 0.3s ease;
+}
+
+.subtask-count {
+    font-size: 0.75rem;
+    color: #6c757d;
+    white-space: nowrap;
+}
+
 @media (max-width: 768px) {
     .task-controls {
         flex-direction: column;
@@ -1538,6 +1571,7 @@ class UnifiedTaskManager {
                 <span class="task-assignee">${task.assigned_to_name || 'Unassigned'}</span>
                 ${dueDate ? `<span class="task-due-date ${isOverdue ? 'overdue' : ''}">${formatUserDate(task.due_date)}</span>` : ''}
             </div>
+            ${task.subtasks && task.subtasks.length > 0 ? this.renderSubtaskProgress(task.subtasks) : ''}
             ${task.status === 'COMPLETED' ? `<div class="task-completed-date">Completed: ${formatUserDate(task.completed_date)}</div>` : ''}
             ${task.status === 'ARCHIVED' ? `<div class="task-archived-date">Archived: ${formatUserDate(task.archived_date)}</div>` : ''}
             ${actionButtons}
@@ -1546,6 +1580,25 @@ class UnifiedTaskManager {
         return card;
     }
 
+    renderSubtaskProgress(subtasks) {
+        if (!subtasks || subtasks.length === 0) return '';
+        
+        const completedCount = subtasks.filter(s => s.status === 'COMPLETED').length;
+        const totalCount = subtasks.length;
+        const percentage = Math.round((completedCount / totalCount) * 100);
+        
+        return `
+            <div class="task-subtasks">
+                <div class="subtask-progress">
+                    <div class="subtask-progress-bar">
+                        <div class="subtask-progress-fill" style="width: ${percentage}%"></div>
+                    </div>
+                    <span class="subtask-count">${completedCount}/${totalCount} subtasks</span>
+                </div>
+            </div>
+        `;
+    }
+
     applyFilters() {
         this.renderTasks();
     }
@@ -1634,6 +1687,31 @@ class UnifiedTaskManager {
         }
     }
 
+    async refreshTaskCard(taskId) {
+        // Fetch updated task data
+        try {
+            const response = await fetch(`/api/tasks/${taskId}`);
+            const task = await response.json();
+            
+            if (task) {
+                // Find and replace the task card
+                const oldCard = document.querySelector(`[data-task-id="${taskId}"]`);
+                if (oldCard) {
+                    const newCard = this.createTaskCard(task);
+                    oldCard.replaceWith(newCard);
+                }
+                
+                // Update task in local array
+                const index = this.tasks.findIndex(t => t.id == taskId);
+                if (index !== -1) {
+                    this.tasks[index] = task;
+                }
+            }
+        } catch (error) {
+            console.error('Error refreshing task card:', error);
+        }
+    }
+
     async handleTaskMove(evt) {
         const taskId = evt.item.dataset.taskId;
         const newStatus = evt.to.id.replace('column-', '');
@@ -1688,6 +1766,9 @@ class UnifiedTaskManager {
             
             // Load dependencies
             await this.loadDependencies(task.id);
+            
+            // Initialize subtasks
+            initializeSubtasks(task.id);
         } else {
             document.getElementById('modal-title').textContent = 'Add New Task';
             document.getElementById('task-form').reset();
@@ -1696,6 +1777,9 @@ class UnifiedTaskManager {
             
             // Clear dependencies
             this.clearDependencies();
+            
+            // Initialize empty subtasks
+            initializeSubtasks(null);
         }
         
         modal.style.display = 'block';
@@ -1737,6 +1821,12 @@ class UnifiedTaskManager {
             
             const data = await response.json();
             if (data.success) {
+                // Save subtasks if we have a task ID
+                const savedTaskId = isEdit ? taskId : data.task.id;
+                if (savedTaskId) {
+                    await saveSubtasks(savedTaskId);
+                }
+                
                 closeTaskModal();
                 await this.loadTasks();
             } else {
@@ -1948,5 +2038,18 @@ window.onclick = function(event) {
         closeTaskModal();
     }
 };
+
+// Make team members available globally for subtasks
+window.teamMembers = {{ team_members | tojson }};
+
+// Make refreshTaskCard available globally
+window.refreshTaskCard = function(taskId) {
+    if (window.taskManager) {
+        window.taskManager.refreshTaskCard(taskId);
+    }
+};
 </script>
+
+<!-- Include subtasks functionality -->
+<script src="{{ url_for('static', filename='js/subtasks.js') }}"></script>
 {% endblock %}