BeepTaskCard

Overview

BeepTaskCard provides a modern, visually rich card component designed for displaying tasks, project summaries, and actionable items. It combines attractive design with practical functionality including progress tracking, status indicators, action buttons, and comprehensive theming support.

Built on the BeepControl foundation, BeepTaskCard features flexible layouts, customizable content areas, interactive elements, animation support, theme integration, and accessibility features. Perfect for dashboards, project management systems, Kanban boards, and any application requiring organized task presentation.

Key Features

Visual Preview

Task Cards in Different States

Basic Usage

// Create and configure a BeepTaskCard
var taskCard = new BeepTaskCard();
taskCard.Size = new Size(300, 200);
taskCard.Title = "Design UI Mockups";
taskCard.Description = "Create and review UI mockups for the new dashboard.";
taskCard.Status = TaskStatus.InProgress;
taskCard.Progress = 60;

// Set task metadata
taskCard.DueDate = DateTime.Now.AddDays(3);
taskCard.Assignee = "Sarah Chen";
taskCard.Priority = TaskPriority.Medium;

// Handle task interactions
taskCard.TaskClicked += (s, e) =>
{
    ShowTaskDetails(taskCard.TaskId);
};

taskCard.StatusChanged += (s, e) =>
{
    UpdateTaskInDatabase(taskCard);
};

// Add to form or panel
this.Controls.Add(taskCard);

// Create task card with custom actions
var taskCard = new BeepTaskCard
{
    Title = "API Development",
    Description = "Implement REST API endpoints for user management",
    Status = TaskStatus.InProgress,
    Progress = 45,
    Priority = TaskPriority.High,
    Icon = Properties.Resources.ApiIcon
};

// Add custom action buttons
var updateButton = new BeepButton 
{ 
    Text = "Update Progress",
    Size = new Size(100, 30)
};
updateButton.Click += (s, e) => ShowProgressDialog(taskCard);

var commentButton = new BeepButton 
{ 
    Text = "Add Comment",
    Size = new Size(100, 30)
};
commentButton.Click += (s, e) => ShowCommentDialog(taskCard);

// Add actions to the card
taskCard.AddAction(updateButton);
taskCard.AddAction(commentButton);

// Configure context menu
var contextMenu = new ContextMenuStrip();
contextMenu.Items.Add("Edit Task", null, (s, e) => EditTask(taskCard));
contextMenu.Items.Add("Delete Task", null, (s, e) => DeleteTask(taskCard));
contextMenu.Items.Add("Duplicate Task", null, (s, e) => DuplicateTask(taskCard));
taskCard.ContextMenuStrip = contextMenu;

Properties

Core Properties

Task Metadata

Visual Properties

Events

Examples

public partial class ProjectDashboard : UserControl
{
    private FlowLayoutPanel taskPanel;
    private List projectTasks;
    private ITaskService taskService;

    public ProjectDashboard(ITaskService taskService)
    {
        this.taskService = taskService;
        InitializeComponents();
        LoadProjectTasks();
    }

    private void InitializeComponents()
    {
        taskPanel = new FlowLayoutPanel
        {
            Dock = DockStyle.Fill,
            FlowDirection = FlowDirection.LeftToRight,
            WrapContents = true,
            AutoScroll = true,
            Padding = new Padding(10)
        };

        this.Controls.Add(taskPanel);
    }

    private async void LoadProjectTasks()
    {
        try
        {
            projectTasks = await taskService.GetTasksAsync(ProjectId);
            CreateTaskCards();
        }
        catch (Exception ex)
        {
            MessageBox.Show($"Error loading tasks: {ex.Message}");
        }
    }

    private void CreateTaskCards()
    {
        taskPanel.Controls.Clear();

        foreach (var taskData in projectTasks)
        {
            var taskCard = CreateTaskCard(taskData);
            taskPanel.Controls.Add(taskCard);
        }
    }

    private BeepTaskCard CreateTaskCard(TaskData taskData)
    {
        var card = new BeepTaskCard
        {
            Size = new Size(300, 220),
            Margin = new Padding(10),
            Title = taskData.Title,
            Description = taskData.Description,
            Status = taskData.Status,
            Progress = taskData.ProgressPercentage,
            Priority = taskData.Priority,
            DueDate = taskData.DueDate,
            Assignee = taskData.AssignedTo,
            TaskId = taskData.Id.ToString()
        };

        // Set icon based on task type
        card.Icon = GetTaskTypeIcon(taskData.TaskType);

        // Add event handlers
        card.TaskClicked += OnTaskClicked;
        card.StatusChanged += OnTaskStatusChanged;
        card.ProgressChanged += OnTaskProgressChanged;

        // Add context-specific actions
        AddTaskActions(card, taskData);

        return card;
    }

    private void AddTaskActions(BeepTaskCard card, TaskData taskData)
    {
        // Edit action
        var editButton = new BeepButton
        {
            Text = "Edit",
            Size = new Size(60, 28),
            Theme = card.Theme
        };
        editButton.Click += (s, e) => EditTask(taskData.Id);
        card.AddAction(editButton);

        // Status-specific actions
        switch (taskData.Status)
        {
            case TaskStatus.NotStarted:
                var startButton = new BeepButton
                {
                    Text = "Start",
                    Size = new Size(60, 28),
                    Theme = card.Theme
                };
                startButton.Click += (s, e) => StartTask(taskData.Id);
                card.AddAction(startButton);
                break;

            case TaskStatus.InProgress:
                var completeButton = new BeepButton
                {
                    Text = "Complete",
                    Size = new Size(70, 28),
                    Theme = card.Theme
                };
                completeButton.Click += (s, e) => CompleteTask(taskData.Id);
                card.AddAction(completeButton);
                break;

            case TaskStatus.Completed:
                var archiveButton = new BeepButton
                {
                    Text = "Archive",
                    Size = new Size(70, 28),
                    Theme = card.Theme
                };
                archiveButton.Click += (s, e) => ArchiveTask(taskData.Id);
                card.AddAction(archiveButton);
                break;
        }

        // Comment action (always available)
        var commentButton = new BeepButton
        {
            Text = "💬",
            Size = new Size(35, 28),
            Theme = card.Theme,
            ToolTipText = "Add Comment"
        };
        commentButton.Click += (s, e) => ShowCommentDialog(taskData.Id);
        card.AddAction(commentButton);
    }

    private async void OnTaskClicked(object sender, TaskEventArgs e)
    {
        var taskDetails = await taskService.GetTaskDetailsAsync(e.TaskId);
        ShowTaskDetailsDialog(taskDetails);
    }

    private async void OnTaskStatusChanged(object sender, StatusChangedEventArgs e)
    {
        try
        {
            await taskService.UpdateTaskStatusAsync(e.TaskId, e.NewStatus);
            
            // Update the task in our local list
            var task = projectTasks.FirstOrDefault(t => t.Id.ToString() == e.TaskId);
            if (task != null)
            {
                task.Status = e.NewStatus;
                
                // Refresh the card to show updated actions
                RefreshTaskCard(e.TaskId);
            }

            // Show success notification
            ShowNotification($"Task status updated to {e.NewStatus}", NotificationType.Success);
        }
        catch (Exception ex)
        {
            MessageBox.Show($"Error updating task status: {ex.Message}");
        }
    }

    private async void OnTaskProgressChanged(object sender, ProgressEventArgs e)
    {
        try
        {
            await taskService.UpdateTaskProgressAsync(e.TaskId, e.NewProgress);
            
            // Update local data
            var task = projectTasks.FirstOrDefault(t => t.Id.ToString() == e.TaskId);
            if (task != null)
            {
                task.ProgressPercentage = e.NewProgress;
            }

            ShowNotification($"Progress updated to {e.NewProgress}%", NotificationType.Info);
        }
        catch (Exception ex)
        {
            MessageBox.Show($"Error updating progress: {ex.Message}");
        }
    }

    private void RefreshTaskCard(string taskId)
    {
        var taskData = projectTasks.FirstOrDefault(t => t.Id.ToString() == taskId);
        if (taskData != null)
        {
            // Find and replace the card
            var oldCard = taskPanel.Controls.OfType()
                .FirstOrDefault(c => c.TaskId == taskId);
            
            if (oldCard != null)
            {
                var index = taskPanel.Controls.GetChildIndex(oldCard);
                taskPanel.Controls.Remove(oldCard);
                
                var newCard = CreateTaskCard(taskData);
                taskPanel.Controls.Add(newCard);
                taskPanel.Controls.SetChildIndex(newCard, index);
            }
        }
    }

    private Image GetTaskTypeIcon(TaskType taskType)
    {
        return taskType switch
        {
            TaskType.Development => Properties.Resources.CodeIcon,
            TaskType.Design => Properties.Resources.DesignIcon,
            TaskType.Testing => Properties.Resources.TestIcon,
            TaskType.Documentation => Properties.Resources.DocIcon,
            TaskType.Bug => Properties.Resources.BugIcon,
            _ => Properties.Resources.DefaultTaskIcon
        };
    }

    // Helper methods
    private void EditTask(Guid taskId) { /* Implementation */ }
    private async void StartTask(Guid taskId) { /* Implementation */ }
    private async void CompleteTask(Guid taskId) { /* Implementation */ }
    private async void ArchiveTask(Guid taskId) { /* Implementation */ }
    private void ShowCommentDialog(Guid taskId) { /* Implementation */ }
    private void ShowTaskDetailsDialog(TaskDetails details) { /* Implementation */ }
    private void ShowNotification(string message, NotificationType type) { /* Implementation */ }
}

Theming

BeepTaskCard provides comprehensive theming support with automatic adaptation to different visual styles:

var taskCard = new BeepTaskCard
{
    Theme = "ModernDark",
    UseThemeColors = true
};

// Theme automatically applies:
// - CardBackColor: Main card background
// - BorderColor: Card border styling
// - TextColors: Title and description colors
// - StatusColors: Status indicator colors
// - ProgressColors: Progress bar styling
// - ActionColors: Button and action styling

Task-Specific Theming

• Status indicators - Color-coded status badges with theme integration
• Progress bars - Theme-aware progress visualization
• Priority styling - Visual priority indicators with appropriate colors
• Action buttons - Consistent button styling within theme

Best Practices

🎯 User Experience

• Clear information hierarchy: Prioritize title, description, and status
• Consistent actions: Provide consistent action patterns across all cards
• Visual feedback: Use colors and animations to indicate state changes
• Accessible design: Ensure sufficient contrast and keyboard navigation

🔧 Implementation

• Performance: Use virtualization for large numbers of task cards
• State management: Keep card state synchronized with data sources
• Event handling: Implement proper event handling for all interactions
• Error handling: Gracefully handle task update failures

📊 Data Management

• Real-time updates: Implement live updates for collaborative environments
• Optimistic updates: Update UI immediately, handle conflicts gracefully
• Caching: Cache task data appropriately for performance
• Validation: Validate task data before updating