Tasks - Project Overview

These blocks give a bird's eye view of projects. They take typed props (project, projects, people, milestones or initial) with fictional sample data. Sorting, filtering, searching, favorites and the week toggle all run on the client.

Progress is always shown with a progress element or a circular progress that has an accessible name, and the workload bars are labelled with the numbers they stand for. Status colors never carry meaning alone, because the status is also written as text.

Style One

Project header with a status badge, team avatars, quick actions, four stat cards for total, completed, in progress and overdue tasks and an overall progress bar.

Style Two

Project cards with a circular progress, task counts, a health badge, due date, team avatars and a menu, with a select that sorts by progress, due date or name.

Style Three

Team workload. A capacity bar for every person that turns amber near the limit and red when they are over it, with a toggle between this week and next week.

Style Four

Milestones timeline. Reached, current and upcoming milestones with dates, owners and task progress, and the current milestone highlighted.

Style Five

Project grid with search, status tabs with counts, color tiles, progress, members and favorite stars you can toggle.

Style Six

Portfolio table. Sort by project, progress or budget used, filter by status, see over budget projects in red and an average progress in the footer.