feat: add my tasks list view

2020-12-30 20:56:59 -06:00 · 2020-12-30 20:56:59 -06:00 · dcf53b9077
commit dcf53b9077
parent d6101d9221
30 changed files with 2640 additions and 16 deletions
--- a/frontend/src/App/Routes.tsx
+++ b/frontend/src/App/Routes.tsx
@ -4,6 +4,7 @@ import * as H from 'history';

 import Dashboard from 'Dashboard';
 import Admin from 'Admin';
+import MyTasks from 'MyTasks';
 import Confirm from 'Confirm';
 import Projects from 'Projects';
 import Project from 'Projects/Project';
@ -69,6 +70,7 @@ const AuthorizedRoutes = () => {
        <Route path="/teams/:teamID" component={Teams} />
        <Route path="/profile" component={Profile} />
        <Route path="/admin" component={Admin} />
+        <Route path="/tasks" component={MyTasks} />
      </MainContent>
    </Switch>
  );
--- a/frontend/src/App/TopNavbar.tsx
+++ b/frontend/src/App/TopNavbar.tsx
@ -439,6 +439,9 @@ const GlobalTopNavbar: React.FC<GlobalTopNavbarProps> = ({
        onDashboardClick={() => {
          history.push('/');
        }}
+        onMyTasksClick={() => {
+          history.push('/tasks');
+        }}
        projectMembers={projectMembers}
        projectInvitedMembers={projectInvitedMembers}
        onProfileClick={onProfileClick}
--- a/frontend/src/MyTasks/MyTasksSort.tsx
+++ b/frontend/src/MyTasks/MyTasksSort.tsx
@ -0,0 +1,145 @@
+import React, { useState, useEffect } from 'react';
+import styled, { css } from 'styled-components';
+import { Checkmark, User, Calendar, Tags, Clock } from 'shared/icons';
+import { TaskMetaFilters, TaskMeta, TaskMetaMatch, DueDateFilterType } from 'shared/components/Lists';
+import Input from 'shared/components/ControlledInput';
+import { Popup, usePopup } from 'shared/components/PopupMenu';
+import produce from 'immer';
+import { mixin } from 'shared/utils/styles';
+import Member from 'shared/components/Member';
+import { MyTasksSort } from 'shared/generated/graphql';
+
+const FilterMember = styled(Member)`
+  margin: 2px 0;
+  &:hover {
+    cursor: pointer;
+    background: ${props => props.theme.colors.primary};
+  }
+`;
+
+export const Labels = styled.ul`
+  list-style: none;
+  margin: 0 8px;
+  padding: 0;
+  margin-bottom: 8px;
+`;
+
+export const Label = styled.li`
+  position: relative;
+`;
+
+export const CardLabel = styled.span<{ active: boolean; color: string }>`
+  ${props =>
+    props.active &&
+    css`
+      margin-left: 4px;
+      box-shadow: -8px 0 ${mixin.darken(props.color, 0.12)};
+      border-radius: 3px;
+    `}
+
+  cursor: pointer;
+  font-weight: 700;
+  margin: 0 0 4px;
+  min-height: 20px;
+  padding: 6px 12px;
+  position: relative;
+  transition: padding 85ms, margin 85ms, box-shadow 85ms;
+  background-color: ${props => props.color};
+  color: #fff;
+  display: block;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  min-height: 31px;
+`;
+
+export const ActionsList = styled.ul`
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+`;
+
+export const ActionItem = styled.li`
+  position: relative;
+  padding-left: 4px;
+  padding-right: 4px;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  font-size: 14px;
+  &:hover {
+    background: ${props => props.theme.colors.primary};
+  }
+`;
+
+export const ActionTitle = styled.span`
+  margin-left: 20px;
+`;
+
+const ActionItemSeparator = styled.li`
+  color: ${props => mixin.rgba(props.theme.colors.text.primary, 0.4)};
+  font-size: 12px;
+  padding-left: 4px;
+  padding-right: 4px;
+  padding-top: 0.75rem;
+  padding-bottom: 0.25rem;
+`;
+
+const ActiveIcon = styled(Checkmark)`
+  position: absolute;
+  right: 4px;
+`;
+
+const ItemIcon = styled.div`
+  position: absolute;
+`;
+
+const TaskNameInput = styled(Input)`
+  margin: 0;
+`;
+
+const ActionItemLine = styled.div`
+  height: 1px;
+  border-top: 1px solid #414561;
+  margin: 0.25rem !important;
+`;
+
+type MyTasksSortProps = {
+  sort: MyTasksSort;
+  onChangeSort: (sort: MyTasksSort) => void;
+};
+
+const MyTasksSortPopup: React.FC<MyTasksSortProps> = ({ sort: initialSort, onChangeSort }) => {
+  const [sort, setSort] = useState(initialSort);
+  const handleChangeSort = (f: MyTasksSort) => {
+    setSort(f);
+    onChangeSort(f);
+  };
+
+  return (
+    <>
+      <Popup tab={0} title={null}>
+        <ActionsList>
+          <ActionItem onClick={() => handleChangeSort(MyTasksSort.None)}>
+            {sort === MyTasksSort.None && <ActiveIcon width={16} height={16} />}
+            <ActionTitle>None</ActionTitle>
+          </ActionItem>
+          <ActionItem onClick={() => handleChangeSort(MyTasksSort.Project)}>
+            {sort === MyTasksSort.Project && <ActiveIcon width={16} height={16} />}
+            <ActionTitle>Project</ActionTitle>
+          </ActionItem>
+          <ActionItem onClick={() => handleChangeSort(MyTasksSort.DueDate)}>
+            {sort === MyTasksSort.DueDate && <ActiveIcon width={16} height={16} />}
+            <ActionTitle>Due Date</ActionTitle>
+          </ActionItem>
+        </ActionsList>
+      </Popup>
+    </>
+  );
+};
+
+export default MyTasksSortPopup;
--- a/frontend/src/MyTasks/TaskEntry.tsx
+++ b/frontend/src/MyTasks/TaskEntry.tsx
@ -0,0 +1,413 @@
+import React, { useState, useRef } from 'react';
+import styled, { css } from 'styled-components/macro';
+import dayjs from 'dayjs';
+import { CheckCircleOutline, CheckCircle, Cross, Briefcase, ChevronRight } from 'shared/icons';
+import { mixin } from 'shared/utils/styles';
+
+const RIGHT_ROW_WIDTH = 327;
+const TaskName = styled.div<{ focused: boolean }>`
+  flex: 0 1 auto;
+  min-width: 1px;
+  overflow: hidden;
+  margin-right: 4px;
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: 2px;
+  height: 20px;
+  padding: 0 1px;
+
+  max-height: 100%;
+  position: relative;
+  &:hover {
+    ${props =>
+      !props.focused &&
+      css`
+        border-color: #9ca6af !important;
+        border: 1px solid ${props.theme.colors.primary} !important;
+      `}
+  }
+`;
+
+const DueDateCell = styled.div`
+  align-items: center;
+  align-self: stretch;
+  display: flex;
+  flex-grow: 1;
+`;
+
+const CellPlaceholder = styled.div<{ width: number }>`
+  min-width: ${p => p.width}px;
+  width: ${p => p.width}px;
+`;
+const DueDateCellDisplay = styled.div`
+  align-items: center;
+  cursor: pointer;
+  display: flex;
+  flex-grow: 1;
+  height: 100%;
+`;
+
+const DueDateCellLabel = styled.div`
+  align-items: center;
+  color: ${props => props.theme.colors.text.primary};
+
+  font-size: 11px;
+  flex: 0 1 auto;
+  min-width: 1px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: flex;
+  flex-flow: row wrap;
+  white-space: pre-wrap;
+`;
+
+const DueDateRemoveButton = styled.div`
+  align-items: center;
+  bottom: 0;
+  cursor: pointer;
+  display: flex;
+  height: 100%;
+  padding-left: 4px;
+  padding-right: 8px;
+  position: absolute;
+  right: 0;
+  top: 0;
+  visibility: hidden;
+  svg {
+    fill: ${props => props.theme.colors.text.primary};
+  }
+  &:hover svg {
+    fill: ${props => props.theme.colors.text.secondary};
+  }
+`;
+const TaskGroupItemCell = styled.div<{ width: number; focused: boolean }>`
+  width: ${p => p.width}px;
+  background: transparent;
+  position: relative;
+
+  border: 1px solid #414561;
+  justify-content: space-between;
+  margin-right: -1px;
+  z-index: 0;
+  padding: 0 8px;
+  align-items: center;
+  display: flex;
+  height: 37px;
+  overflow: hidden;
+  &:hover ${DueDateRemoveButton} {
+    visibility: visible;
+  }
+  &:hover ${TaskName} {
+    ${props =>
+      !props.focused &&
+      css`
+        background: ${props.theme.colors.bg.secondary};
+        border: 1px solid ${mixin.darken(props.theme.colors.bg.secondary, 0.25)};
+        border-radius: 2px;
+        cursor: text;
+      `}
+  }
+`;
+
+const TaskGroupItem = styled.div`
+  padding-right: 24px;
+  contain: style;
+  display: flex;
+  margin-bottom: -1px;
+  margin-top: -1px;
+  height: 37px;
+  &:hover {
+    background-color: #161d31;
+  }
+  & ${TaskGroupItemCell}:first-child {
+    position: absolute;
+    padding: 0 4px 0 0;
+    margin-left: 24px;
+    left: 0;
+    flex: 1 1 auto;
+    min-width: 1px;
+    border-right: 0;
+    border-left: 0;
+  }
+  & ${TaskGroupItemCell}:last-child {
+    border-right: 0;
+  }
+`;
+
+const TaskItemComplete = styled.div`
+  flex: 0 0 auto;
+  margin: 0 3px 0 0;
+  align-items: center;
+  box-sizing: border-box;
+  display: inline-flex;
+  height: 16px;
+  justify-content: center;
+  overflow: visible;
+  width: 16px;
+  cursor: pointer;
+  svg {
+    transition: all 0.2 ease;
+  }
+  &:hover svg {
+    fill: ${props => props.theme.colors.primary};
+  }
+`;
+
+const TaskDetailsButton = styled.div`
+  align-items: center;
+  cursor: pointer;
+  display: flex;
+  font-size: 12px;
+  height: 100%;
+  justify-content: flex-end;
+  margin-left: auto;
+  opacity: 0;
+  padding-left: 4px;
+  color: ${props => props.theme.colors.text.primary};
+  svg {
+    fill: ${props => props.theme.colors.text.primary};
+  }
+`;
+
+const TaskDetailsArea = styled.div`
+  align-items: center;
+  cursor: pointer;
+  display: flex;
+  flex: 1 0 auto;
+  height: 100%;
+  margin-right: 24px;
+  &:hover ${TaskDetailsButton} {
+    opacity: 1;
+  }
+`;
+
+const TaskDetailsWorkpace = styled(Briefcase)`
+  flex: 0 0 auto;
+  margin-right: 8px;
+`;
+const TaskDetailsLabel = styled.div`
+  display: flex;
+  align-items: center;
+`;
+
+const TaskDetailsChevron = styled(ChevronRight)`
+  margin-left: 4px;
+  flex: 0 0 auto;
+`;
+
+const TaskNameShadow = styled.div`
+  box-sizing: border-box;
+  min-height: 1em;
+  overflow: hidden;
+  visibility: hidden;
+  white-space: pre;
+  border: 0;
+  font-size: 13px;
+  line-height: 20px;
+  margin: 0;
+  min-width: 20px;
+  padding: 0 4px;
+  text-rendering: optimizeSpeed;
+`;
+
+const TaskNameInput = styled.textarea`
+  white-space: pre;
+  background: transparent;
+  border-radius: 0;
+  display: block;
+  color: ${props => props.theme.colors.text.primary};
+  height: 100%;
+  outline: 0;
+  overflow: hidden;
+  position: absolute;
+  resize: none;
+  top: 0;
+  width: 100%;
+  border: 0;
+  font-size: 13px;
+  line-height: 20px;
+  margin: 0;
+  min-width: 20px;
+  padding: 0 4px;
+  text-rendering: optimizeSpeed;
+`;
+
+const ProjectPill = styled.div`
+  background-color: ${props => props.theme.colors.bg.primary};
+  text-overflow: ellipsis;
+  border-radius: 10px;
+  box-sizing: border-box;
+  display: block;
+  font-size: 12px;
+  font-weight: 400;
+  height: 20px;
+  line-height: 20px;
+  overflow: hidden;
+  padding: 0 8px;
+  text-align: left;
+  white-space: nowrap;
+`;
+
+const ProjectPillContents = styled.div`
+  align-items: center;
+  display: flex;
+`;
+
+const ProjectPillName = styled.span`
+  flex: 0 1 auto;
+  min-width: 1px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: ${props => props.theme.colors.text.primary};
+`;
+
+const ProjectPillColor = styled.svg`
+  overflow: hidden;
+  flex: 0 0 auto;
+  margin-right: 4px;
+  fill: #0064fb;
+  height: 12px;
+  width: 12px;
+`;
+
+type TaskEntryProps = {
+  name: string;
+  dueDate?: string | null;
+  onEditName: (name: string) => void;
+  project: string;
+  hasTime: boolean;
+  autoFocus?: boolean;
+  onEditProject: ($target: React.RefObject<HTMLElement>) => void;
+  onToggleComplete: (complete: boolean) => void;
+  complete: boolean;
+  onEditDueDate: ($target: React.RefObject<HTMLElement>) => void;
+  onTaskDetails: () => void;
+  onRemoveDueDate: () => void;
+};
+
+const TaskEntry: React.FC<TaskEntryProps> = ({
+  autoFocus = false,
+  onToggleComplete,
+  onEditName,
+  onTaskDetails,
+  name: initialName,
+  complete,
+  project,
+  dueDate,
+  hasTime,
+  onEditProject,
+  onEditDueDate,
+  onRemoveDueDate,
+}) => {
+  const leftRow = window.innerWidth - RIGHT_ROW_WIDTH;
+  const [focused, setFocused] = useState(autoFocus);
+  const [name, setName] = useState(initialName);
+  const $projects = useRef<HTMLDivElement>(null);
+  const $dueDate = useRef<HTMLDivElement>(null);
+  const $nameInput = useRef<HTMLTextAreaElement>(null);
+  return (
+    <TaskGroupItem>
+      <TaskGroupItemCell focused={focused} width={leftRow}>
+        <TaskItemComplete onClick={() => onToggleComplete(!complete)}>
+          {complete ? <CheckCircle width={16} height={16} /> : <CheckCircleOutline width={16} height={16} />}
+        </TaskItemComplete>
+        <TaskName focused={focused}>
+          <TaskNameShadow>{name}</TaskNameShadow>
+          <TaskNameInput
+            autoFocus={autoFocus}
+            onFocus={() => setFocused(true)}
+            ref={$nameInput}
+            onBlur={() => {
+              setFocused(false);
+              onEditName(name);
+            }}
+            onKeyDown={e => {
+              if (e.keyCode === 13) {
+                e.preventDefault();
+                if ($nameInput.current) {
+                  $nameInput.current.blur();
+                }
+              }
+            }}
+            onChange={e => setName(e.currentTarget.value)}
+            wrap="off"
+            rows={1}
+          >
+            {name}
+          </TaskNameInput>
+        </TaskName>
+        <TaskDetailsArea onClick={() => onTaskDetails()}>
+          <TaskDetailsButton>
+            <TaskDetailsWorkpace width={16} height={16} />
+            <TaskDetailsLabel>
+              Details
+              <TaskDetailsChevron width={12} height={12} />
+            </TaskDetailsLabel>
+          </TaskDetailsButton>
+        </TaskDetailsArea>
+      </TaskGroupItemCell>
+      <CellPlaceholder width={leftRow} />
+      <TaskGroupItemCell width={120} focused={false} ref={$dueDate}>
+        <DueDateCell onClick={() => onEditDueDate($dueDate)}>
+          <DueDateCellDisplay>
+            <DueDateCellLabel>
+              {dueDate ? dayjs(dueDate).format(hasTime ? 'MMM D [at] h:mm A' : 'MMM D') : ''}
+            </DueDateCellLabel>
+          </DueDateCellDisplay>
+        </DueDateCell>
+        {dueDate && (
+          <DueDateRemoveButton onClick={() => onRemoveDueDate()}>
+            <Cross width={12} height={12} />
+          </DueDateRemoveButton>
+        )}
+      </TaskGroupItemCell>
+      <TaskGroupItemCell width={120} focused={false} ref={$projects}>
+        <ProjectPill
+          onClick={() => {
+            onEditProject($projects);
+          }}
+        >
+          <ProjectPillContents>
+            <ProjectPillColor viewBox="0 0 24 24" focusable={false}>
+              <path d="M10.4,4h3.2c2.2,0,3,0.2,3.9,0.7c0.8,0.4,1.5,1.1,1.9,1.9s0.7,1.6,0.7,3.9v3.2c0,2.2-0.2,3-0.7,3.9c-0.4,0.8-1.1,1.5-1.9,1.9s-1.6,0.7-3.9,0.7h-3.2c-2.2,0-3-0.2-3.9-0.7c-0.8-0.4-1.5-1.1-1.9-1.9c-0.4-1-0.6-1.8-0.6-4v-3.2c0-2.2,0.2-3,0.7-3.9C5.1,5.7,5.8,5,6.6,4.6C7.4,4.2,8.2,4,10.4,4z" />
+            </ProjectPillColor>
+            <ProjectPillName>{project}</ProjectPillName>
+          </ProjectPillContents>
+        </ProjectPill>
+      </TaskGroupItemCell>
+      <TaskGroupItemCell width={50} focused={false} />
+    </TaskGroupItem>
+  );
+};
+export default TaskEntry;
+type NewTaskEntryProps = {
+  onClick: () => void;
+};
+const AddTaskLabel = styled.span`
+  font-size: 14px;
+  position: relative;
+
+  color: ${props => props.theme.colors.text.primary};
+
+  justify-content: space-between;
+  z-index: 0;
+  padding: 0 8px;
+  align-items: center;
+  display: flex;
+  height: 37px;
+  flex: 1 1;
+  cursor: pointer;
+  margin-left: 24px;
+`;
+
+const NewTaskEntry: React.FC<NewTaskEntryProps> = ({ onClick }) => {
+  const leftRow = window.innerWidth - RIGHT_ROW_WIDTH;
+  return (
+    <TaskGroupItem>
+      <AddTaskLabel onClick={onClick}>Add task...</AddTaskLabel>
+    </TaskGroupItem>
+  );
+};
+
+export { NewTaskEntry };
--- a/frontend/src/MyTasks/index.tsx
+++ b/frontend/src/MyTasks/index.tsx
@ -0,0 +1,868 @@
+import React, { useState, useEffect, useRef } from 'react';
+import styled, { css } from 'styled-components/macro';
+import GlobalTopNavbar from 'App/TopNavbar';
+import Details from 'Projects/Project/Details';
+import {
+  useMyTasksQuery,
+  MyTasksSort,
+  MyTasksStatus,
+  useCreateTaskMutation,
+  MyTasksQuery,
+  MyTasksDocument,
+  useUpdateTaskNameMutation,
+  useSetTaskCompleteMutation,
+  useUpdateTaskDueDateMutation,
+} from 'shared/generated/graphql';
+
+import { Route, useRouteMatch, useHistory, RouteComponentProps } from 'react-router-dom';
+import { usePopup, Popup } from 'shared/components/PopupMenu';
+import updateApolloCache from 'shared/utils/cache';
+import produce from 'immer';
+import NOOP from 'shared/utils/noop';
+import { Sort, Cogs, CaretDown, CheckCircle, CaretRight } from 'shared/icons';
+import Select from 'react-select';
+import { editorColourStyles } from 'shared/components/Select';
+import useOnOutsideClick from 'shared/hooks/onOutsideClick';
+import DueDateManager from 'shared/components/DueDateManager';
+import dayjs from 'dayjs';
+import useStickyState from 'shared/hooks/useStickyState';
+import MyTasksSortPopup from './MyTasksSort';
+import TaskEntry from './TaskEntry';
+
+type TaskRouteProps = {
+  taskID: string;
+};
+
+function prettySort(sort: MyTasksSort) {
+  if (sort === MyTasksSort.None) {
+    return 'Sort';
+  }
+  return `Sort: ${sort.charAt(0) +
+    sort
+      .slice(1)
+      .toLowerCase()
+      .replace(/_/gi, ' ')}`;
+}
+
+type Group = {
+  id: string;
+  name: string | null;
+  tasks: Array<Task>;
+};
+const DueDateEditorLabel = styled.div`
+  align-items: center;
+  color: ${props => props.theme.colors.text.primary};
+
+  font-size: 11px;
+  padding: 0 8px;
+  flex: 0 1 auto;
+  min-width: 1px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: flex;
+  flex-flow: row wrap;
+  white-space: pre-wrap;
+  height: 35px;
+`;
+
+const ProjectBar = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 40px;
+  padding: 0 12px;
+`;
+
+const ProjectActions = styled.div`
+  display: flex;
+  align-items: center;
+`;
+
+const ProjectActionWrapper = styled.div<{ disabled?: boolean }>`
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  font-size: 15px;
+  color: ${props => props.theme.colors.text.primary};
+
+  &:not(:last-of-type) {
+    margin-right: 16px;
+  }
+
+  &:hover {
+    color: ${props => props.theme.colors.text.secondary};
+  }
+  ${props =>
+    props.disabled &&
+    css`
+      opacity: 0.5;
+      cursor: default;
+      pointer-events: none;
+    `}
+`;
+
+const ProjectActionText = styled.span`
+  padding-left: 4px;
+`;
+
+type ProjectActionProps = {
+  onClick?: (target: React.RefObject<HTMLElement>) => void;
+  disabled?: boolean;
+};
+
+const ProjectAction: React.FC<ProjectActionProps> = ({ onClick, disabled = false, children }) => {
+  const $container = useRef<HTMLDivElement>(null);
+  const handleClick = () => {
+    if (onClick) {
+      onClick($container);
+    }
+  };
+  return (
+    <ProjectActionWrapper ref={$container} onClick={handleClick} disabled={disabled}>
+      {children}
+    </ProjectActionWrapper>
+  );
+};
+
+const EditorPositioner = styled.div<{ top: number; left: number }>`
+  position: absolute;
+  top: ${p => p.top}px;
+  justify-content: flex-end;
+  margin-left: -100vw;
+  z-index: 10000;
+  align-items: flex-start;
+  display: flex;
+  font-size: 13px;
+  height: 0;
+  position: fixed;
+  width: 100vw;
+  left: ${p => p.left}px;
+`;
+
+const EditorPositionerContents = styled.div`
+  position: relative;
+`;
+
+const EditorContainer = styled.div<{ width: number }>`
+  border: 1px solid ${props => props.theme.colors.primary};
+  background: ${props => props.theme.colors.bg.secondary};
+  position: relative;
+  width: ${p => p.width}px;
+`;
+
+const EditorCell = styled.div<{ width: number }>`
+  display: flex;
+  width: ${p => p.width}px;
+`;
+
+// TABLE
+const VerticalScoller = styled.div`
+  contain: strict;
+  flex: 1 1 auto;
+  overflow-x: hidden;
+  padding-bottom: 1px;
+  position: relative;
+
+  min-height: 1px;
+  overflow-y: auto;
+`;
+
+const VerticalScollerInner = styled.div`
+  min-height: 100%;
+  overflow-y: hidden;
+  min-width: 1px;
+  overflow-x: auto;
+`;
+
+const VerticalScollerInnerBar = styled.div`
+  display: flex;
+  margin: 0 24px;
+  margin-bottom: 1px;
+  border-top: 1px solid #414561;
+`;
+
+const TableContents = styled.div`
+  box-sizing: border-box;
+  display: inline-block;
+  margin-bottom: 32px;
+  min-width: 100%;
+`;
+
+const TaskGroupContainer = styled.div``;
+
+const TaskGroupHeader = styled.div`
+  height: 50px;
+  width: 100%;
+`;
+
+const TaskGroupItems = styled.div`
+  overflow: unset;
+`;
+
+const ProjectPill = styled.div`
+  background-color: ${props => props.theme.colors.bg.primary};
+  text-overflow: ellipsis;
+  border-radius: 10px;
+  box-sizing: border-box;
+  display: block;
+  font-size: 12px;
+  font-weight: 400;
+  height: 20px;
+  line-height: 20px;
+  overflow: hidden;
+  padding: 0 8px;
+  text-align: left;
+  white-space: nowrap;
+`;
+
+const ProjectPillContents = styled.div`
+  align-items: center;
+  display: flex;
+`;
+
+const ProjectPillName = styled.span`
+  flex: 0 1 auto;
+  min-width: 1px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: ${props => props.theme.colors.text.primary};
+`;
+
+const ProjectPillColor = styled.svg`
+  overflow: hidden;
+  flex: 0 0 auto;
+  margin-right: 4px;
+  fill: #0064fb;
+  height: 12px;
+  width: 12px;
+`;
+
+const SingleValue = ({ children, ...props }: any) => {
+  return (
+    <ProjectPill>
+      <ProjectPillContents>
+        <ProjectPillColor viewBox="0 0 24 24" focusable={false}>
+          <path d="M10.4,4h3.2c2.2,0,3,0.2,3.9,0.7c0.8,0.4,1.5,1.1,1.9,1.9s0.7,1.6,0.7,3.9v3.2c0,2.2-0.2,3-0.7,3.9c-0.4,0.8-1.1,1.5-1.9,1.9s-1.6,0.7-3.9,0.7h-3.2c-2.2,0-3-0.2-3.9-0.7c-0.8-0.4-1.5-1.1-1.9-1.9c-0.4-1-0.6-1.8-0.6-4v-3.2c0-2.2,0.2-3,0.7-3.9C5.1,5.7,5.8,5,6.6,4.6C7.4,4.2,8.2,4,10.4,4z" />
+        </ProjectPillColor>
+        <ProjectPillName>{children}</ProjectPillName>
+      </ProjectPillContents>
+    </ProjectPill>
+  );
+};
+
+const OptionWrapper = styled.div`
+  align-items: center;
+  display: flex;
+  height: 40px;
+  padding: 0 16px;
+  cursor: pointer;
+  &:hover {
+    background: #414561;
+  }
+`;
+
+const OptionLabel = styled.div`
+  align-items: baseline;
+  display: flex;
+  min-width: 1px;
+`;
+
+const OptionTitle = styled.div`
+  min-width: 50px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`;
+const OptionSubTitle = styled.div`
+  color: ${props => props.theme.colors.text.primary};
+  font-size: 11px;
+  margin-left: 8px;
+  min-width: 50px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`;
+const Option = ({ innerProps, data }: any) => {
+  return (
+    <OptionWrapper {...innerProps}>
+      <OptionLabel>
+        <OptionTitle>{data.label}</OptionTitle>
+        <OptionSubTitle>{data.label}</OptionSubTitle>
+      </OptionLabel>
+    </OptionWrapper>
+  );
+};
+
+const TaskGroupHeaderContents = styled.div<{ width: number }>`
+  width: ${p => p.width}px;
+  left: 0;
+  position: absolute;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  font-size: 16px;
+  font-weight: 500;
+  margin-left: 24px;
+  line-height: 20px;
+  align-items: center;
+  box-sizing: border-box;
+  display: flex;
+  flex: 1 1 auto;
+  min-height: 30px;
+  padding-right: 32px;
+  position: relative;
+  border-bottom: 1px solid transparent;
+  border-top: 1px solid transparent;
+`;
+
+const TaskGroupMinify = styled.div`
+  height: 28px;
+  min-height: 28px;
+  min-width: 28px;
+  width: 28px;
+  border-radius: 6px;
+  user-select: none;
+
+  margin-right: 4px;
+
+  align-items: center;
+  box-sizing: border-box;
+  display: inline-flex;
+  justify-content: center;
+  transition-duration: 0.2s;
+  transition-property: background, border, box-shadow, fill;
+  cursor: pointer;
+  svg {
+    fill: ${props => props.theme.colors.text.primary};
+    transition-duration: 0.2s;
+    transition-property: background, border, box-shadow, fill;
+  }
+
+  &:hover svg {
+    fill: ${props => props.theme.colors.text.secondary};
+  }
+`;
+const TaskGroupName = styled.div`
+  flex-grow: 1;
+  align-items: center;
+  display: flex;
+  height: 50px;
+  min-width: 1px;
+  color: ${props => props.theme.colors.text.secondary};
+  font-weight: 400;
+`;
+
+// HEADER
+const ScrollContainer = styled.div`
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  min-height: 1px;
+  position: relative;
+  width: 100%;
+`;
+
+const Row = styled.div`
+  box-sizing: border-box;
+  flex: 0 0 auto;
+  height: 37px;
+  position: relative;
+`;
+
+const RowHeaderLeft = styled.div<{ width: number }>`
+  width: ${p => p.width}px;
+
+  align-items: stretch;
+  display: flex;
+  flex-direction: column;
+  height: 37px;
+  left: 0;
+  position: absolute;
+  z-index: 100;
+`;
+const RowHeaderLeftInner = styled.div`
+  align-items: stretch;
+  color: ${props => props.theme.colors.text.primary};
+  display: flex;
+  flex: 1 0 auto;
+  font-size: 12px;
+  margin-right: -1px;
+  padding-left: 24px;
+`;
+const RowHeaderLeftName = styled.div`
+  position: relative;
+  align-items: center;
+  border-right: 1px solid #414561;
+  border-top: 1px solid #414561;
+  border-bottom: 1px solid #414561;
+  display: flex;
+  flex: 1 0 auto;
+  justify-content: space-between;
+`;
+
+const RowHeaderLeftNameText = styled.div`
+  align-items: center;
+  display: flex;
+`;
+
+const RowHeaderRight = styled.div<{ left: number }>`
+  left: ${p => p.left}px;
+  right: 0px;
+  height: 37px;
+  position: absolute;
+`;
+
+const RowScrollable = styled.div`
+  min-width: 1px;
+  overflow-x: auto;
+  overflow-y: hidden;
+  width: 100%;
+`;
+
+const RowScrollContent = styled.div`
+  align-items: center;
+  display: inline-flex;
+  height: 37px;
+  width: 100%;
+`;
+
+const RowHeaderRightContainer = styled.div`
+  padding-right: 24px;
+
+  align-items: stretch;
+  display: flex;
+  flex: 1 0 auto;
+  height: 37px;
+  justify-content: flex-end;
+  margin: -1px 0;
+`;
+
+const ItemWrapper = styled.div<{ width: number }>`
+  width: ${p => p.width}px;
+  align-items: center;
+  border: 1px solid #414561;
+  border-bottom: 0;
+  box-sizing: border-box;
+  cursor: pointer;
+  display: inline-flex;
+  flex: 0 0 auto;
+  font-size: 12px;
+  justify-content: space-between;
+  margin-right: -1px;
+  padding: 0 8px;
+  position: relative;
+  color: ${props => props.theme.colors.text.primary};
+  border-bottom: 1px solid #414561;
+  &:hover {
+    background: ${props => props.theme.colors.primary};
+    color: ${props => props.theme.colors.text.secondary};
+  }
+`;
+const ItemsContainer = styled.div`
+  display: flex;
+  flex-direction: row;
+  height: 100%;
+  width: 100%;
+  & ${ItemWrapper}:last-child {
+    border-right: 0;
+  }
+`;
+
+const ItemName = styled.div`
+  align-items: center;
+  display: flex;
+  overflow: hidden;
+`;
+type DateEditorState = {
+  open: boolean;
+  pos: { top: number; left: number } | null;
+  task: null | Task;
+};
+
+type ProjectEditorState = {
+  open: boolean;
+  pos: { top: number; left: number } | null;
+  task: null | Task;
+};
+const RIGHT_ROW_WIDTH = 327;
+
+const Projects = () => {
+  const leftRow = window.innerWidth - RIGHT_ROW_WIDTH;
+  const [menuOpen, setMenuOpen] = useState(false);
+  const [filters, setFilters] = useStickyState<{ sort: MyTasksSort; status: MyTasksStatus }>(
+    { sort: MyTasksSort.None, status: MyTasksStatus.All },
+    'my_tasks_filter',
+  );
+  const { data } = useMyTasksQuery({ variables: { sort: filters.sort, status: filters.status } });
+  const [dateEditor, setDateEditor] = useState<DateEditorState>({ open: false, pos: null, task: null });
+  const onEditDueDate = (task: Task, $target: React.RefObject<HTMLElement>) => {
+    if ($target && $target.current && data) {
+      const pos = $target.current.getBoundingClientRect();
+      setDateEditor({
+        open: true,
+        pos: {
+          top: pos.top,
+          left: pos.right,
+        },
+        task,
+      });
+    }
+  };
+  const [newTask, setNewTask] = useState<{ open: boolean }>({ open: false });
+  const match = useRouteMatch();
+  const history = useHistory();
+  const [projectEditor, setProjectEditor] = useState<ProjectEditorState>({ open: false, pos: null, task: null });
+  const onEditProject = ($target: React.RefObject<HTMLElement>) => {
+    if ($target && $target.current) {
+      const pos = $target.current.getBoundingClientRect();
+      setProjectEditor({
+        open: true,
+        pos: {
+          top: pos.top,
+          left: pos.right,
+        },
+        task: null,
+      });
+    }
+  };
+  const { showPopup } = usePopup();
+  const [updateTaskDueDate] = useUpdateTaskDueDateMutation();
+  const $editorContents = useRef<HTMLDivElement>(null);
+  const $dateContents = useRef<HTMLDivElement>(null);
+  useEffect(() => {
+    if (dateEditor.open && $dateContents.current && dateEditor.task) {
+      showPopup(
+        $dateContents,
+        <Popup tab={0} title={null}>
+          <DueDateManager
+            task={dateEditor.task}
+            onCancel={() => null}
+            onDueDateChange={(task, dueDate, hasTime) => {
+              if (dateEditor.task) {
+                updateTaskDueDate({ variables: { taskID: dateEditor.task.id, dueDate, hasTime } });
+                setDateEditor(prev => ({ ...prev, task: { ...task, dueDate: dueDate.toISOString(), hasTime } }));
+              }
+            }}
+            onRemoveDueDate={task => {
+              if (dateEditor.task) {
+                updateTaskDueDate({ variables: { taskID: dateEditor.task.id, dueDate: null, hasTime: false } });
+                setDateEditor(prev => ({ ...prev, task: { ...task, hasTime: false } }));
+              }
+            }}
+          />
+        </Popup>,
+        { onClose: () => setDateEditor({ open: false, task: null, pos: null }) },
+      );
+    }
+  }, [dateEditor]);
+
+  const [createTask] = useCreateTaskMutation({
+    update: (client, newTaskData) => {
+      updateApolloCache<MyTasksQuery>(
+        client,
+        MyTasksDocument,
+        cache =>
+          produce(cache, draftCache => {
+            if (newTaskData.data) {
+              draftCache.myTasks.tasks.unshift(newTaskData.data.createTask);
+            }
+          }),
+        { status: MyTasksStatus.All, sort: MyTasksSort.None },
+      );
+    },
+  });
+
+  const [setTaskComplete] = useSetTaskCompleteMutation();
+  const [updateTaskName] = useUpdateTaskNameMutation();
+  const [minified, setMinified] = useStickyState<Array<string>>([], 'my_tasks_minified');
+  useOnOutsideClick(
+    $editorContents,
+    projectEditor.open,
+    () =>
+      setProjectEditor({
+        open: false,
+        task: null,
+        pos: null,
+      }),
+    null,
+  );
+  if (data) {
+    const groups: Array<Group> = [];
+    if (filters.sort === MyTasksSort.None) {
+      groups.push({
+        id: 'recently-assigned',
+        name: 'Recently Assigned',
+        tasks: data.myTasks.tasks.map(task => ({
+          ...task,
+          labels: [],
+          position: 0,
+        })),
+      });
+    } else {
+      let { tasks } = data.myTasks;
+      if (filters.sort === MyTasksSort.DueDate) {
+        const group: Group = { id: 'due_date', name: null, tasks: [] };
+        data.myTasks.tasks.forEach(task => {
+          if (task.dueDate) {
+            group.tasks.push({ ...task, labels: [], position: 0 });
+          }
+        });
+        groups.push(group);
+        tasks = tasks.filter(t => t.dueDate === null);
+      }
+      const projects = new Map<string, Array<Task>>();
+      data.myTasks.projects.forEach(p => {
+        if (!projects.has(p.projectID)) {
+          projects.set(p.projectID, []);
+        }
+        const prev = projects.get(p.projectID);
+        const task = tasks.find(t => t.id === p.taskID);
+        if (prev && task) {
+          projects.set(p.projectID, [...prev, { ...task, labels: [], position: 0 }]);
+        }
+      });
+      for (const [id, pTasks] of projects) {
+        const project = data.projects.find(c => c.id === id);
+        if (pTasks.length === 0) continue;
+        if (project) {
+          groups.push({
+            id,
+            name: project.name,
+            tasks: pTasks.sort((a, b) => {
+              if (a.dueDate === null && b.dueDate === null) return 0;
+              if (a.dueDate === null && b.dueDate !== null) return 1;
+              if (a.dueDate !== null && b.dueDate === null) return -1;
+              const first = dayjs(a.dueDate);
+              const second = dayjs(b.dueDate);
+              if (first.isSame(second, 'minute')) return 0;
+              if (first.isAfter(second)) return -1;
+              return 1;
+            }),
+          });
+        }
+      }
+      groups.sort((a, b) => {
+        if (a.name === null && b.name === null) return 0;
+        if (a.name === null) return -1;
+        if (b.name === null) return 1;
+        return a.name.localeCompare(b.name);
+      });
+    }
+    return (
+      <>
+        <GlobalTopNavbar onSaveProjectName={NOOP} projectID={null} name={null} />
+        <ProjectBar>
+          <ProjectActions />
+          <ProjectActions>
+            <ProjectAction disabled>
+              <CheckCircle width={13} height={13} />
+              <ProjectActionText>All Tasks</ProjectActionText>
+            </ProjectAction>
+            <ProjectAction
+              onClick={$target => {
+                showPopup(
+                  $target,
+                  <MyTasksSortPopup
+                    sort={filters.sort}
+                    onChangeSort={sort => setFilters(prev => ({ ...prev, sort }))}
+                  />,
+                );
+              }}
+            >
+              <Sort width={13} height={13} />
+              <ProjectActionText>{prettySort(filters.sort)}</ProjectActionText>
+            </ProjectAction>
+            <ProjectAction disabled>
+              <Cogs width={13} height={13} />
+              <ProjectActionText>Customize</ProjectActionText>
+            </ProjectAction>
+          </ProjectActions>
+        </ProjectBar>
+        <ScrollContainer>
+          <Row>
+            <RowHeaderLeft width={leftRow}>
+              <RowHeaderLeftInner>
+                <RowHeaderLeftName>
+                  <RowHeaderLeftNameText>Task name</RowHeaderLeftNameText>
+                </RowHeaderLeftName>
+              </RowHeaderLeftInner>
+            </RowHeaderLeft>
+            <RowHeaderRight left={leftRow}>
+              <RowScrollable>
+                <RowScrollContent>
+                  <RowHeaderRightContainer>
+                    <ItemsContainer>
+                      <ItemWrapper width={120}>
+                        <ItemName>Due date</ItemName>
+                      </ItemWrapper>
+                      <ItemWrapper width={120}>
+                        <ItemName>Project</ItemName>
+                      </ItemWrapper>
+                      <ItemWrapper width={50} />
+                    </ItemsContainer>
+                  </RowHeaderRightContainer>
+                </RowScrollContent>
+              </RowScrollable>
+            </RowHeaderRight>
+          </Row>
+          <VerticalScoller>
+            <VerticalScollerInner>
+              <TableContents>
+                {groups.map(group => {
+                  const isMinified = minified.find(m => m === group.id) ?? false;
+                  return (
+                    <TaskGroupContainer key={group.id}>
+                      {group.name && (
+                        <TaskGroupHeader>
+                          <TaskGroupHeaderContents width={leftRow}>
+                            <TaskGroupMinify
+                              onClick={() => {
+                                setMinified(prev => {
+                                  if (isMinified) {
+                                    return prev.filter(c => c !== group.id);
+                                  }
+                                  return [...prev, group.id];
+                                });
+                              }}
+                            >
+                              {isMinified ? (
+                                <CaretRight width={16} height={16} />
+                              ) : (
+                                <CaretDown width={16} height={16} />
+                              )}
+                            </TaskGroupMinify>
+                            <TaskGroupName>{group.name}</TaskGroupName>
+                          </TaskGroupHeaderContents>
+                        </TaskGroupHeader>
+                      )}
+                      <TaskGroupItems>
+                        {!isMinified &&
+                          group.tasks.map(task => {
+                            const projectID = data.myTasks.projects.find(t => t.taskID === task.id)?.projectID;
+                            const projectName = data.projects.find(p => p.id === projectID)?.name;
+                            return (
+                              <TaskEntry
+                                key={task.id}
+                                complete={task.complete ?? false}
+                                onToggleComplete={complete => {
+                                  setTaskComplete({ variables: { taskID: task.id, complete } });
+                                }}
+                                onTaskDetails={() => {
+                                  history.push(`${match.url}/c/${task.id}`);
+                                }}
+                                onRemoveDueDate={() => {
+                                  updateTaskDueDate({ variables: { taskID: task.id, dueDate: null, hasTime: false } });
+                                }}
+                                project={projectName ?? 'none'}
+                                dueDate={task.dueDate}
+                                hasTime={task.hasTime ?? false}
+                                name={task.name}
+                                onEditName={name => updateTaskName({ variables: { taskID: task.id, name } })}
+                                onEditProject={onEditProject}
+                                onEditDueDate={$target => onEditDueDate({ ...task, position: 0, labels: [] }, $target)}
+                              />
+                            );
+                          })}
+                      </TaskGroupItems>
+                    </TaskGroupContainer>
+                  );
+                })}
+              </TableContents>
+            </VerticalScollerInner>
+          </VerticalScoller>
+        </ScrollContainer>
+        {dateEditor.open && dateEditor.pos !== null && dateEditor.task && (
+          <EditorPositioner left={dateEditor.pos.left} top={dateEditor.pos.top}>
+            <EditorPositionerContents ref={$dateContents}>
+              <EditorContainer width={120}>
+                <EditorCell width={120}>
+                  <DueDateEditorLabel>
+                    {dateEditor.task.dueDate
+                      ? dayjs(dateEditor.task.dueDate).format(dateEditor.task.hasTime ? 'MMM D [at] h:mm A' : 'MMM D')
+                      : ''}
+                  </DueDateEditorLabel>
+                </EditorCell>
+              </EditorContainer>
+            </EditorPositionerContents>
+          </EditorPositioner>
+        )}
+        {projectEditor.open && projectEditor.pos !== null && (
+          <EditorPositioner left={projectEditor.pos.left} top={projectEditor.pos.top}>
+            <EditorPositionerContents ref={$editorContents}>
+              <EditorContainer width={300}>
+                <EditorCell width={300}>
+                  <Select
+                    components={{ SingleValue, Option }}
+                    autoFocus
+                    styles={editorColourStyles}
+                    options={[{ label: 'hello', value: '1' }]}
+                    onInputChange={(query, { action }) => {
+                      if (action === 'input-change') {
+                        setMenuOpen(true);
+                      }
+                    }}
+                    onChange={() => setMenuOpen(false)}
+                    onBlur={() => setMenuOpen(false)}
+                    menuIsOpen={menuOpen}
+                  />
+                </EditorCell>
+              </EditorContainer>
+            </EditorPositionerContents>
+          </EditorPositioner>
+        )}
+        <Route
+          path={`${match.path}/c/:taskID`}
+          render={(routeProps: RouteComponentProps<TaskRouteProps>) => (
+            <Details
+              refreshCache={NOOP}
+              availableMembers={[]}
+              projectURL={`${match.url}`}
+              taskID={routeProps.match.params.taskID}
+              onTaskNameChange={(updatedTask, newName) => {
+                updateTaskName({ variables: { taskID: updatedTask.id, name: newName } });
+              }}
+              onTaskDescriptionChange={(updatedTask, newDescription) => {
+                /*
+                updateTaskDescription({
+                  variables: { taskID: updatedTask.id, description: newDescription },
+                  optimisticResponse: {
+                    __typename: 'Mutation',
+                    updateTaskDescription: {
+                      __typename: 'Task',
+                      id: updatedTask.id,
+                      description: newDescription,
+                    },
+                  },
+                });
+                */
+              }}
+              onDeleteTask={deletedTask => {
+                // deleteTask({ variables: { taskID: deletedTask.id } });
+                history.push(`${match.url}`);
+              }}
+              onOpenAddLabelPopup={(task, $targetRef) => {
+                /*
+                taskLabelsRef.current = task.labels;
+                showPopup(
+                  $targetRef,
+                  <LabelManagerEditor
+                    onLabelToggle={labelID => {
+                      toggleTaskLabel({ variables: { taskID: task.id, projectLabelID: labelID } });
+                    }}
+                    labelColors={data.labelColors}
+                    labels={labelsRef}
+                    taskLabels={taskLabelsRef}
+                    projectID={projectID}
+                  />,
+                );
+                */
+              }}
+            />
+          )}
+        />
+      </>
+    );
+  }
+  return null;
+};
+
+export default Projects;
--- a/frontend/src/Projects/Project/Board/index.tsx
+++ b/frontend/src/Projects/Project/Board/index.tsx
@ -426,6 +426,7 @@ const ProjectBoard: React.FC<ProjectBoardProps> = ({ projectID, onCardLabelClick
              name,
              complete: false,
              completedAt: null,
+              hasTime: false,
              taskGroup: {
                __typename: 'TaskGroup',
                id: taskGroup.id,
--- a/frontend/src/shared/components/PopupMenu/index.tsx
+++ b/frontend/src/shared/components/PopupMenu/index.tsx
@ -17,7 +17,7 @@ import {
 } from './Styles';

 function getPopupOptions(options?: PopupOptions) {
-  const popupOptions = {
+  const popupOptions: PopupOptionsInternal = {
    borders: true,
    diamondColor: theme.colors.bg.secondary,
    targetPadding: '10px',
@ -40,6 +40,9 @@ function getPopupOptions(options?: PopupOptions) {
    if (options.diamondColor) {
      popupOptions.diamondColor = options.diamondColor;
    }
+    if (options.onClose) {
+      popupOptions.onClose = options.onClose;
+    }
  }
  return popupOptions;
 }
@ -136,6 +139,7 @@ type PopupOptionsInternal = {
  targetPadding: string;
  diamondColor: string;
  showDiamond: boolean;
+  onClose?: () => void;
 };

 type PopupOptions = {
@ -144,6 +148,7 @@ type PopupOptions = {
  width?: number | null;
  borders?: boolean | null;
  diamondColor?: string | null;
+  onClose?: () => void;
 };
 const defaultState = {
  isOpen: false,
@ -239,7 +244,12 @@ export const PopupProvider: React.FC = ({ children }) => {
            top={currentState.top}
            targetPadding={currentState.options.targetPadding}
            left={currentState.left}
-            onClose={() => setState(defaultState)}
+            onClose={() => {
+              if (currentState.options && currentState.options.onClose) {
+                currentState.options.onClose();
+              }
+              setState(defaultState);
+            }}
            width={currentState.options.width}
          >
            {currentState.content}
--- a/frontend/src/shared/components/Select/index.tsx
+++ b/frontend/src/shared/components/Select/index.tsx
@ -84,6 +84,58 @@ export const colourStyles = {
  },
 };

+export const editorColourStyles = {
+  ...colourStyles,
+  input: (styles: any) => ({
+    ...styles,
+    color: '#000',
+  }),
+  singleValue: (styles: any) => {
+    return {
+      ...styles,
+      color: '#000',
+    };
+  },
+  menu: (styles: any) => {
+    return {
+      ...styles,
+      backgroundColor: '#fff',
+    };
+  },
+  indicatorsContainer: (styles: any) => {
+    return {
+      ...styles,
+      display: 'none',
+    };
+  },
+  container: (styles: any) => {
+    return {
+      ...styles,
+      display: 'flex',
+      flex: '1 1',
+    };
+  },
+  control: (styles: any, data: any) => {
+    return {
+      ...styles,
+      flex: '1 1',
+      backgroundColor: 'transparent',
+      boxShadow: 'none',
+      borderRadius: '0',
+      minHeight: '35px',
+      border: '0',
+      ':hover': {
+        boxShadow: 'none',
+        borderRadius: '0',
+      },
+      ':active': {
+        boxShadow: 'none',
+        borderRadius: '0',
+      },
+    };
+  },
+};
+
 const InputLabel = styled.span<{ width: string }>`
 width: ${props => props.width};
 padding-left: 0.7rem;
--- a/frontend/src/shared/components/TopNavbar/TopNavbar.stories.tsx
+++ b/frontend/src/shared/components/TopNavbar/TopNavbar.stories.tsx
@ -43,6 +43,7 @@ export const Default = () => {
        onDashboardClick={action('open dashboard')}
        onRemoveFromBoard={action('remove project')}
        onProfileClick={action('profile click')}
+        onMyTasksClick={action('profile click')}
      />
    </>
  );
--- a/frontend/src/shared/components/TopNavbar/index.tsx
+++ b/frontend/src/shared/components/TopNavbar/index.tsx
@ -179,6 +179,7 @@ type NavBarProps = {
  onRemoveFromBoard?: (userID: string) => void;
  onMemberProfile?: ($targetRef: React.RefObject<HTMLElement>, memberID: string) => void;
  onInvitedMemberProfile?: ($targetRef: React.RefObject<HTMLElement>, email: string) => void;
+  onMyTasksClick: () => void;
 };

 const NavBar: React.FC<NavBarProps> = ({
@ -201,6 +202,7 @@ const NavBar: React.FC<NavBarProps> = ({
  onProfileClick,
  onNotificationClick,
  onDashboardClick,
+  onMyTasksClick,
  user,
  projectMembers,
  onOpenSettings,
@ -306,7 +308,7 @@ const NavBar: React.FC<NavBarProps> = ({
          <IconContainer onClick={() => onDashboardClick()}>
            <HomeDashboard width={20} height={20} />
          </IconContainer>
-          <IconContainer disabled onClick={NOOP}>
+          <IconContainer onClick={() => onMyTasksClick()}>
            <CheckCircle width={20} height={20} />
          </IconContainer>
          <IconContainer disabled onClick={NOOP}>
--- a/frontend/src/shared/generated/graphql.tsx
+++ b/frontend/src/shared/generated/graphql.tsx
@ -302,6 +302,7 @@ export type Query = {
  invitedUsers: Array<InvitedUserAccount>;
  labelColors: Array<LabelColor>;
  me: MePayload;
+  myTasks: MyTasksPayload;
  notifications: Array<Notification>;
  organizations: Array<Organization>;
  projects: Array<Project>;
@ -332,6 +333,11 @@ export type QueryFindUserArgs = {
 };


+export type QueryMyTasksArgs = {
+  input: MyTasks;
+};
+
+
 export type QueryProjectsArgs = {
  input?: Maybe<ProjectsFilter>;
 };
@ -682,6 +688,40 @@ export type MutationUpdateUserRoleArgs = {
  input: UpdateUserRole;
 };

+export enum MyTasksStatus {
+  All = 'ALL',
+  Incomplete = 'INCOMPLETE',
+  CompleteAll = 'COMPLETE_ALL',
+  CompleteToday = 'COMPLETE_TODAY',
+  CompleteYesterday = 'COMPLETE_YESTERDAY',
+  CompleteOneWeek = 'COMPLETE_ONE_WEEK',
+  CompleteTwoWeek = 'COMPLETE_TWO_WEEK',
+  CompleteThreeWeek = 'COMPLETE_THREE_WEEK'
+}
+
+export enum MyTasksSort {
+  None = 'NONE',
+  Project = 'PROJECT',
+  DueDate = 'DUE_DATE'
+}
+
+export type MyTasks = {
+  status: MyTasksStatus;
+  sort: MyTasksSort;
+};
+
+export type ProjectTaskMapping = {
+  __typename?: 'ProjectTaskMapping';
+  projectID: Scalars['UUID'];
+  taskID: Scalars['UUID'];
+};
+
+export type MyTasksPayload = {
+  __typename?: 'MyTasksPayload';
+  tasks: Array<Task>;
+  projects: Array<ProjectTaskMapping>;
+};
+
 export type TeamRole = {
  __typename?: 'TeamRole';
  teamID: Scalars['UUID'];
@ -859,6 +899,7 @@ export type NewTask = {
  taskGroupID: Scalars['UUID'];
  name: Scalars['String'];
  position: Scalars['Float'];
+  assigned?: Maybe<Array<Scalars['UUID']>>;
 };

 export type AssignTaskInput = {
@ -1529,7 +1570,7 @@ export type FindTaskQuery = (

 export type TaskFieldsFragment = (
  { __typename?: 'Task' }
-  & Pick<Task, 'id' | 'name' | 'description' | 'dueDate' | 'complete' | 'completedAt' | 'position'>
+  & Pick<Task, 'id' | 'name' | 'description' | 'dueDate' | 'hasTime' | 'complete' | 'completedAt' | 'position'>
  & { badges: (
    { __typename?: 'TaskBadges' }
    & { checklist?: Maybe<(
@ -1605,6 +1646,33 @@ export type MeQuery = (
  ) }
 );

+export type MyTasksQueryVariables = Exact<{
+  status: MyTasksStatus;
+  sort: MyTasksSort;
+}>;
+
+
+export type MyTasksQuery = (
+  { __typename?: 'Query' }
+  & { projects: Array<(
+    { __typename?: 'Project' }
+    & Pick<Project, 'id' | 'name'>
+  )>, myTasks: (
+    { __typename?: 'MyTasksPayload' }
+    & { tasks: Array<(
+      { __typename?: 'Task' }
+      & Pick<Task, 'id' | 'name' | 'dueDate' | 'hasTime' | 'complete' | 'completedAt'>
+      & { taskGroup: (
+        { __typename?: 'TaskGroup' }
+        & Pick<TaskGroup, 'id' | 'name'>
+      ) }
+    )>, projects: Array<(
+      { __typename?: 'ProjectTaskMapping' }
+      & Pick<ProjectTaskMapping, 'projectID' | 'taskID'>
+    )> }
+  ) }
+);
+
 export type DeleteProjectMutationVariables = Exact<{
  projectID: Scalars['UUID'];
 }>;
@ -1712,6 +1780,7 @@ export type CreateTaskMutationVariables = Exact<{
  taskGroupID: Scalars['UUID'];
  name: Scalars['String'];
  position: Scalars['Float'];
+  assigned?: Maybe<Array<Scalars['UUID']>>;
 }>;


@ -2559,6 +2628,7 @@ export const TaskFieldsFragmentDoc = gql`
  name
  description
  dueDate
+  hasTime
  complete
  completedAt
  position
@ -3238,6 +3308,59 @@ export function useMeLazyQuery(baseOptions?: ApolloReactHooks.LazyQueryHookOptio
 export type MeQueryHookResult = ReturnType<typeof useMeQuery>;
 export type MeLazyQueryHookResult = ReturnType<typeof useMeLazyQuery>;
 export type MeQueryResult = ApolloReactCommon.QueryResult<MeQuery, MeQueryVariables>;
+export const MyTasksDocument = gql`
+    query myTasks($status: MyTasksStatus!, $sort: MyTasksSort!) {
+  projects {
+    id
+    name
+  }
+  myTasks(input: {status: $status, sort: $sort}) {
+    tasks {
+      id
+      taskGroup {
+        id
+        name
+      }
+      name
+      dueDate
+      hasTime
+      complete
+      completedAt
+    }
+    projects {
+      projectID
+      taskID
+    }
+  }
+}
+    `;
+
+/**
+ * __useMyTasksQuery__
+ *
+ * To run a query within a React component, call `useMyTasksQuery` and pass it any options that fit your needs.
+ * When your component renders, `useMyTasksQuery` returns an object from Apollo Client that contains loading, error, and data properties
+ * you can use to render your UI.
+ *
+ * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
+ *
+ * @example
+ * const { data, loading, error } = useMyTasksQuery({
+ *   variables: {
+ *      status: // value for 'status'
+ *      sort: // value for 'sort'
+ *   },
+ * });
+ */
+export function useMyTasksQuery(baseOptions?: ApolloReactHooks.QueryHookOptions<MyTasksQuery, MyTasksQueryVariables>) {
+        return ApolloReactHooks.useQuery<MyTasksQuery, MyTasksQueryVariables>(MyTasksDocument, baseOptions);
+      }
+export function useMyTasksLazyQuery(baseOptions?: ApolloReactHooks.LazyQueryHookOptions<MyTasksQuery, MyTasksQueryVariables>) {
+          return ApolloReactHooks.useLazyQuery<MyTasksQuery, MyTasksQueryVariables>(MyTasksDocument, baseOptions);
+        }
+export type MyTasksQueryHookResult = ReturnType<typeof useMyTasksQuery>;
+export type MyTasksLazyQueryHookResult = ReturnType<typeof useMyTasksLazyQuery>;
+export type MyTasksQueryResult = ApolloReactCommon.QueryResult<MyTasksQuery, MyTasksQueryVariables>;
 export const DeleteProjectDocument = gql`
    mutation deleteProject($projectID: UUID!) {
  deleteProject(input: {projectID: $projectID}) {
@ -3440,8 +3563,10 @@ export type UpdateProjectMemberRoleMutationHookResult = ReturnType<typeof useUpd
 export type UpdateProjectMemberRoleMutationResult = ApolloReactCommon.MutationResult<UpdateProjectMemberRoleMutation>;
 export type UpdateProjectMemberRoleMutationOptions = ApolloReactCommon.BaseMutationOptions<UpdateProjectMemberRoleMutation, UpdateProjectMemberRoleMutationVariables>;
 export const CreateTaskDocument = gql`
-    mutation createTask($taskGroupID: UUID!, $name: String!, $position: Float!) {
-  createTask(input: {taskGroupID: $taskGroupID, name: $name, position: $position}) {
+    mutation createTask($taskGroupID: UUID!, $name: String!, $position: Float!, $assigned: [UUID!]) {
+  createTask(
+    input: {taskGroupID: $taskGroupID, name: $name, position: $position, assigned: $assigned}
+  ) {
    ...TaskFields
  }
 }
@ -3464,6 +3589,7 @@ export type CreateTaskMutationFn = ApolloReactCommon.MutationFunction<CreateTask
 *      taskGroupID: // value for 'taskGroupID'
 *      name: // value for 'name'
 *      position: // value for 'position'
+ *      assigned: // value for 'assigned'
 *   },
 * });
 */
@ -5175,4 +5301,4 @@ export function useUsersLazyQuery(baseOptions?: ApolloReactHooks.LazyQueryHookOp
        }
 export type UsersQueryHookResult = ReturnType<typeof useUsersQuery>;
 export type UsersLazyQueryHookResult = ReturnType<typeof useUsersLazyQuery>;
-export type UsersQueryResult = ApolloReactCommon.QueryResult<UsersQuery, UsersQueryVariables>;
+export type UsersQueryResult = ApolloReactCommon.QueryResult<UsersQuery, UsersQueryVariables>;
--- a/frontend/src/shared/graphql/fragments/task.ts
+++ b/frontend/src/shared/graphql/fragments/task.ts
@ -6,6 +6,7 @@ const TASK_FRAGMENT = gql`
    name
    description
    dueDate
+    hasTime
    complete
    completedAt
    position
--- a/frontend/src/shared/graphql/myTasks.graphqls
+++ b/frontend/src/shared/graphql/myTasks.graphqls
@ -0,0 +1,24 @@
+query myTasks($status: MyTasksStatus!, $sort: MyTasksSort!) {
+  projects {
+    id
+    name
+  }
+  myTasks(input: { status: $status, sort: $sort }) {
+    tasks {
+      id
+      taskGroup {
+        id
+        name
+      }
+      name
+      dueDate
+      hasTime
+      complete
+      completedAt
+    }
+    projects {
+      projectID
+      taskID
+    }
+  }
+}
--- a/frontend/src/shared/graphql/task/createTask.ts
+++ b/frontend/src/shared/graphql/task/createTask.ts
@ -2,8 +2,8 @@ import gql from 'graphql-tag';
 import TASK_FRAGMENT from '../fragments/task';

 const CREATE_TASK_MUTATION = gql`
-  mutation createTask($taskGroupID: UUID!, $name: String!, $position: Float!) {
-    createTask(input: { taskGroupID: $taskGroupID, name: $name, position: $position }) {
+  mutation createTask($taskGroupID: UUID!, $name: String!, $position: Float!, $assigned: [UUID!]) {
+    createTask(input: { taskGroupID: $taskGroupID, name: $name, position: $position, assigned: $assigned }) {
      ...TaskFields
    }
  }
--- a/frontend/src/shared/hooks/useStickyState.ts
+++ b/frontend/src/shared/hooks/useStickyState.ts
@ -0,0 +1,14 @@
+import React from 'react';
+
+function useStickyState<T>(defaultValue: any, key: string): [T, React.Dispatch<React.SetStateAction<T>>] {
+  const [value, setValue] = React.useState<T>(() => {
+    const stickyValue = window.localStorage.getItem(key);
+    return stickyValue !== null ? JSON.parse(stickyValue) : defaultValue;
+  });
+  React.useEffect(() => {
+    window.localStorage.setItem(key, JSON.stringify(value));
+  }, [key, value]);
+  return [value, setValue];
+}
+
+export default useStickyState;
--- a/frontend/src/shared/icons/Briefcase.tsx
+++ b/frontend/src/shared/icons/Briefcase.tsx
@ -0,0 +1,12 @@
+import React from 'react';
+import Icon, { IconProps } from './Icon';
+
+const Briefcase: React.FC<IconProps> = ({ width = '16px', height = '16px', className }) => {
+  return (
+    <Icon width={width} height={height} className={className} viewBox="0 0 512 512">
+      <path d="M320 336c0 8.84-7.16 16-16 16h-96c-8.84 0-16-7.16-16-16v-48H0v144c0 25.6 22.4 48 48 48h416c25.6 0 48-22.4 48-48V288H320v48zm144-208h-80V80c0-25.6-22.4-48-48-48H176c-25.6 0-48 22.4-48 48v48H48c-25.6 0-48 22.4-48 48v80h512v-80c0-25.6-22.4-48-48-48zm-144 0H192V96h128v32z" />
+    </Icon>
+  );
+};
+
+export default Briefcase;
--- a/frontend/src/shared/icons/CheckCircleOutline.tsx
+++ b/frontend/src/shared/icons/CheckCircleOutline.tsx
@ -0,0 +1,12 @@
+import React from 'react';
+import Icon, { IconProps } from './Icon';
+
+const CheckCircleOutline: React.FC<IconProps> = ({ width = '16px', height = '16px', className }) => {
+  return (
+    <Icon width={width} height={height} className={className} viewBox="0 0 512 512">
+      <path d="M256 8C119.033 8 8 119.033 8 256s111.033 248 248 248 248-111.033 248-248S392.967 8 256 8zm0 48c110.532 0 200 89.451 200 200 0 110.532-89.451 200-200 200-110.532 0-200-89.451-200-200 0-110.532 89.451-200 200-200m140.204 130.267l-22.536-22.718c-4.667-4.705-12.265-4.736-16.97-.068L215.346 303.697l-59.792-60.277c-4.667-4.705-12.265-4.736-16.97-.069l-22.719 22.536c-4.705 4.667-4.736 12.265-.068 16.971l90.781 91.516c4.667 4.705 12.265 4.736 16.97.068l172.589-171.204c4.704-4.668 4.734-12.266.067-16.971z" />
+    </Icon>
+  );
+};
+
+export default CheckCircleOutline;
--- a/frontend/src/shared/icons/ChevronRight.tsx
+++ b/frontend/src/shared/icons/ChevronRight.tsx
@ -0,0 +1,12 @@
+import React from 'react';
+import Icon, { IconProps } from './Icon';
+
+const ChevronRight: React.FC<IconProps> = ({ width = '16px', height = '16px', className }) => {
+  return (
+    <Icon width={width} height={height} className={className} viewBox="0 0 512 512">
+      <path d="M285.476 272.971L91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z" />
+    </Icon>
+  );
+};
+
+export default ChevronRight;
--- a/frontend/src/shared/icons/Cogs.tsx
+++ b/frontend/src/shared/icons/Cogs.tsx
@ -0,0 +1,12 @@
+import React from 'react';
+import Icon, { IconProps } from './Icon';
+
+const Cogs: React.FC<IconProps> = ({ width = '16px', height = '16px', className }) => {
+  return (
+    <Icon width={width} height={height} className={className} viewBox="0 0 640 512">
+      <path d="M512.1 191l-8.2 14.3c-3 5.3-9.4 7.5-15.1 5.4-11.8-4.4-22.6-10.7-32.1-18.6-4.6-3.8-5.8-10.5-2.8-15.7l8.2-14.3c-6.9-8-12.3-17.3-15.9-27.4h-16.5c-6 0-11.2-4.3-12.2-10.3-2-12-2.1-24.6 0-37.1 1-6 6.2-10.4 12.2-10.4h16.5c3.6-10.1 9-19.4 15.9-27.4l-8.2-14.3c-3-5.2-1.9-11.9 2.8-15.7 9.5-7.9 20.4-14.2 32.1-18.6 5.7-2.1 12.1.1 15.1 5.4l8.2 14.3c10.5-1.9 21.2-1.9 31.7 0L552 6.3c3-5.3 9.4-7.5 15.1-5.4 11.8 4.4 22.6 10.7 32.1 18.6 4.6 3.8 5.8 10.5 2.8 15.7l-8.2 14.3c6.9 8 12.3 17.3 15.9 27.4h16.5c6 0 11.2 4.3 12.2 10.3 2 12 2.1 24.6 0 37.1-1 6-6.2 10.4-12.2 10.4h-16.5c-3.6 10.1-9 19.4-15.9 27.4l8.2 14.3c3 5.2 1.9 11.9-2.8 15.7-9.5 7.9-20.4 14.2-32.1 18.6-5.7 2.1-12.1-.1-15.1-5.4l-8.2-14.3c-10.4 1.9-21.2 1.9-31.7 0zm-10.5-58.8c38.5 29.6 82.4-14.3 52.8-52.8-38.5-29.7-82.4 14.3-52.8 52.8zM386.3 286.1l33.7 16.8c10.1 5.8 14.5 18.1 10.5 29.1-8.9 24.2-26.4 46.4-42.6 65.8-7.4 8.9-20.2 11.1-30.3 5.3l-29.1-16.8c-16 13.7-34.6 24.6-54.9 31.7v33.6c0 11.6-8.3 21.6-19.7 23.6-24.6 4.2-50.4 4.4-75.9 0-11.5-2-20-11.9-20-23.6V418c-20.3-7.2-38.9-18-54.9-31.7L74 403c-10 5.8-22.9 3.6-30.3-5.3-16.2-19.4-33.3-41.6-42.2-65.7-4-10.9.4-23.2 10.5-29.1l33.3-16.8c-3.9-20.9-3.9-42.4 0-63.4L12 205.8c-10.1-5.8-14.6-18.1-10.5-29 8.9-24.2 26-46.4 42.2-65.8 7.4-8.9 20.2-11.1 30.3-5.3l29.1 16.8c16-13.7 34.6-24.6 54.9-31.7V57.1c0-11.5 8.2-21.5 19.6-23.5 24.6-4.2 50.5-4.4 76-.1 11.5 2 20 11.9 20 23.6v33.6c20.3 7.2 38.9 18 54.9 31.7l29.1-16.8c10-5.8 22.9-3.6 30.3 5.3 16.2 19.4 33.2 41.6 42.1 65.8 4 10.9.1 23.2-10 29.1l-33.7 16.8c3.9 21 3.9 42.5 0 63.5zm-117.6 21.1c59.2-77-28.7-164.9-105.7-105.7-59.2 77 28.7 164.9 105.7 105.7zm243.4 182.7l-8.2 14.3c-3 5.3-9.4 7.5-15.1 5.4-11.8-4.4-22.6-10.7-32.1-18.6-4.6-3.8-5.8-10.5-2.8-15.7l8.2-14.3c-6.9-8-12.3-17.3-15.9-27.4h-16.5c-6 0-11.2-4.3-12.2-10.3-2-12-2.1-24.6 0-37.1 1-6 6.2-10.4 12.2-10.4h16.5c3.6-10.1 9-19.4 15.9-27.4l-8.2-14.3c-3-5.2-1.9-11.9 2.8-15.7 9.5-7.9 20.4-14.2 32.1-18.6 5.7-2.1 12.1.1 15.1 5.4l8.2 14.3c10.5-1.9 21.2-1.9 31.7 0l8.2-14.3c3-5.3 9.4-7.5 15.1-5.4 11.8 4.4 22.6 10.7 32.1 18.6 4.6 3.8 5.8 10.5 2.8 15.7l-8.2 14.3c6.9 8 12.3 17.3 15.9 27.4h16.5c6 0 11.2 4.3 12.2 10.3 2 12 2.1 24.6 0 37.1-1 6-6.2 10.4-12.2 10.4h-16.5c-3.6 10.1-9 19.4-15.9 27.4l8.2 14.3c3 5.2 1.9 11.9-2.8 15.7-9.5 7.9-20.4 14.2-32.1 18.6-5.7 2.1-12.1-.1-15.1-5.4l-8.2-14.3c-10.4 1.9-21.2 1.9-31.7 0zM501.6 431c38.5 29.6 82.4-14.3 52.8-52.8-38.5-29.6-82.4 14.3-52.8 52.8z" />
+    </Icon>
+  );
+};
+
+export default Cogs;
--- a/frontend/src/shared/icons/index.ts
+++ b/frontend/src/shared/icons/index.ts
@ -1,7 +1,11 @@
 import Cross from './Cross';
 import Cog from './Cog';
+import Cogs from './Cogs';
 import ArrowDown from './ArrowDown';
+import CheckCircleOutline from './CheckCircleOutline';
+import Briefcase from './Briefcase';
 import ListUnordered from './ListUnordered';
+import ChevronRight from './ChevronRight';
 import Dot from './Dot';
 import CaretDown from './CaretDown';
 import Eye from './Eye';
@ -102,5 +106,9 @@ export {
  Dot,
  ArrowDown,
  CaretRight,
+  CheckCircleOutline,
+  Briefcase,
  DotCircle,
+  ChevronRight,
+  Cogs,
 };
--- a/go.sum
+++ b/go.sum
@ -381,8 +381,6 @@ github.com/lib/pq v1.3.0/go.mod h1:5WUZQaWbwv1U+lTReE5YruASi9Al49XbQIvNi/34Woo=
 github.com/lithammer/fuzzysearch v1.1.0 h1:go9v8tLCrNTTlH42OAaq4eHFe81TDHEnlrMEb6R4f+A=
 github.com/lithammer/fuzzysearch v1.1.0/go.mod h1:Bqx4wo8lTOFcJr3ckpY6HA9lEIOO0H5HrkJ5CsN56HQ=
 github.com/logrusorgru/aurora v0.0.0-20200102142835-e9ef32dff381/go.mod h1:7rIyQOR62GCctdiQpZ/zOJlFyk6y+94wXzv6RNZgaR4=
-github.com/magefile/mage v1.9.0 h1:t3AU2wNwehMCW97vuqQLtw6puppWXHO+O2MHo5a50XE=
-github.com/magefile/mage v1.9.0/go.mod h1:z5UZb/iS3GoOSn0JgWuiw7dxlurVYTu+/jHXqQg881A=
 github.com/magefile/mage v1.11.0 h1:C/55Ywp9BpgVVclD3lRnSYCwXTYxmSppIgLeDYlNuls=
 github.com/magefile/mage v1.11.0/go.mod h1:z5UZb/iS3GoOSn0JgWuiw7dxlurVYTu+/jHXqQg881A=
 github.com/magiconair/properties v1.8.0 h1:LLgXmsheXeRoUOBOjtwPQCWIYqM/LU1ayDtDePerRcY=
--- a/internal/db/querier.go
+++ b/internal/db/querier.go
@ -69,6 +69,8 @@ type Querier interface {
 	GetAllUserAccounts(ctx context.Context) ([]UserAccount, error)
 	GetAllVisibleProjectsForUserID(ctx context.Context, userID uuid.UUID) ([]Project, error)
 	GetAssignedMembersForTask(ctx context.Context, taskID uuid.UUID) ([]TaskAssigned, error)
+	GetAssignedTasksDueDateForUserID(ctx context.Context, userID uuid.UUID) ([]Task, error)
+	GetAssignedTasksProjectForUserID(ctx context.Context, userID uuid.UUID) ([]Task, error)
 	GetCommentsForTaskID(ctx context.Context, taskID uuid.UUID) ([]TaskComment, error)
 	GetConfirmTokenByEmail(ctx context.Context, email string) (UserAccountConfirmToken, error)
 	GetConfirmTokenByID(ctx context.Context, confirmTokenID uuid.UUID) (UserAccountConfirmToken, error)
@ -90,12 +92,14 @@ type Querier interface {
 	GetProjectIDForTaskChecklist(ctx context.Context, taskChecklistID uuid.UUID) (uuid.UUID, error)
 	GetProjectIDForTaskChecklistItem(ctx context.Context, taskChecklistItemID uuid.UUID) (uuid.UUID, error)
 	GetProjectIDForTaskGroup(ctx context.Context, taskGroupID uuid.UUID) (uuid.UUID, error)
+	GetProjectIdMappings(ctx context.Context, dollar_1 []uuid.UUID) ([]GetProjectIdMappingsRow, error)
 	GetProjectLabelByID(ctx context.Context, projectLabelID uuid.UUID) (ProjectLabel, error)
 	GetProjectLabelsForProject(ctx context.Context, projectID uuid.UUID) ([]ProjectLabel, error)
 	GetProjectMemberInvitedIDByEmail(ctx context.Context, email string) (GetProjectMemberInvitedIDByEmailRow, error)
 	GetProjectMembersForProjectID(ctx context.Context, projectID uuid.UUID) ([]ProjectMember, error)
 	GetProjectRolesForUserID(ctx context.Context, userID uuid.UUID) ([]GetProjectRolesForUserIDRow, error)
 	GetProjectsForInvitedMember(ctx context.Context, email string) ([]uuid.UUID, error)
+	GetRecentlyAssignedTaskForUserID(ctx context.Context, userID uuid.UUID) ([]Task, error)
 	GetRefreshTokenByID(ctx context.Context, tokenID uuid.UUID) (RefreshToken, error)
 	GetRoleForProjectMemberByUserID(ctx context.Context, arg GetRoleForProjectMemberByUserIDParams) (Role, error)
 	GetRoleForTeamMember(ctx context.Context, arg GetRoleForTeamMemberParams) (Role, error)
--- a/internal/db/query/task.sql
+++ b/internal/db/query/task.sql
@ -56,3 +56,26 @@ DELETE FROM task_comment WHERE task_comment_id = $1 RETURNING *;

 -- name: UpdateTaskComment :one
 UPDATE task_comment SET message = $2, updated_at = $3 WHERE task_comment_id = $1 RETURNING *;
+
+-- name: GetRecentlyAssignedTaskForUserID :many
+SELECT task.* FROM task_assigned INNER JOIN
+  task ON task.task_id = task_assigned.task_id WHERE user_id = $1 ORDER BY task_assigned.assigned_date DESC;
+
+-- name: GetAssignedTasksProjectForUserID :many
+SELECT task.* FROM task_assigned
+   INNER JOIN task ON task.task_id = task_assigned.task_id
+  INNER JOIN task_group ON task_group.task_group_id = task.task_group_id
+   WHERE user_id = $1
+   ORDER BY task_group.project_id DESC, task_assigned.assigned_date DESC;
+
+-- name: GetProjectIdMappings :many
+SELECT project_id, task_id FROM task
+INNER JOIN task_group ON task_group.task_group_id = task.task_group_id
+  WHERE task_id = ANY($1::uuid[]);
+
+-- name: GetAssignedTasksDueDateForUserID :many
+SELECT task.* FROM task_assigned
+   INNER JOIN task ON task.task_id = task_assigned.task_id
+  INNER JOIN task_group ON task_group.task_group_id = task.task_group_id
+   WHERE user_id = $1
+   ORDER BY task.due_date DESC, task_group.project_id DESC;
--- a/internal/db/task.sql.go
+++ b/internal/db/task.sql.go
@ -9,6 +9,7 @@ import (
 	"time"

 	"github.com/google/uuid"
+	"github.com/lib/pq"
 )

 const createTask = `-- name: CreateTask :one
@ -197,6 +198,90 @@ func (q *Queries) GetAllTasks(ctx context.Context) ([]Task, error) {
 	return items, nil
 }

+const getAssignedTasksDueDateForUserID = `-- name: GetAssignedTasksDueDateForUserID :many
+SELECT task.task_id, task.task_group_id, task.created_at, task.name, task.position, task.description, task.due_date, task.complete, task.completed_at, task.has_time FROM task_assigned
+   INNER JOIN task ON task.task_id = task_assigned.task_id
+  INNER JOIN task_group ON task_group.task_group_id = task.task_group_id
+   WHERE user_id = $1
+   ORDER BY task.due_date DESC, task_group.project_id DESC
+`
+
+func (q *Queries) GetAssignedTasksDueDateForUserID(ctx context.Context, userID uuid.UUID) ([]Task, error) {
+	rows, err := q.db.QueryContext(ctx, getAssignedTasksDueDateForUserID, userID)
+	if err != nil {
+		return nil, err
+	}
+	defer rows.Close()
+	var items []Task
+	for rows.Next() {
+		var i Task
+		if err := rows.Scan(
+			&i.TaskID,
+			&i.TaskGroupID,
+			&i.CreatedAt,
+			&i.Name,
+			&i.Position,
+			&i.Description,
+			&i.DueDate,
+			&i.Complete,
+			&i.CompletedAt,
+			&i.HasTime,
+		); err != nil {
+			return nil, err
+		}
+		items = append(items, i)
+	}
+	if err := rows.Close(); err != nil {
+		return nil, err
+	}
+	if err := rows.Err(); err != nil {
+		return nil, err
+	}
+	return items, nil
+}
+
+const getAssignedTasksProjectForUserID = `-- name: GetAssignedTasksProjectForUserID :many
+SELECT task.task_id, task.task_group_id, task.created_at, task.name, task.position, task.description, task.due_date, task.complete, task.completed_at, task.has_time FROM task_assigned
+   INNER JOIN task ON task.task_id = task_assigned.task_id
+  INNER JOIN task_group ON task_group.task_group_id = task.task_group_id
+   WHERE user_id = $1
+   ORDER BY task_group.project_id DESC, task_assigned.assigned_date DESC
+`
+
+func (q *Queries) GetAssignedTasksProjectForUserID(ctx context.Context, userID uuid.UUID) ([]Task, error) {
+	rows, err := q.db.QueryContext(ctx, getAssignedTasksProjectForUserID, userID)
+	if err != nil {
+		return nil, err
+	}
+	defer rows.Close()
+	var items []Task
+	for rows.Next() {
+		var i Task
+		if err := rows.Scan(
+			&i.TaskID,
+			&i.TaskGroupID,
+			&i.CreatedAt,
+			&i.Name,
+			&i.Position,
+			&i.Description,
+			&i.DueDate,
+			&i.Complete,
+			&i.CompletedAt,
+			&i.HasTime,
+		); err != nil {
+			return nil, err
+		}
+		items = append(items, i)
+	}
+	if err := rows.Close(); err != nil {
+		return nil, err
+	}
+	if err := rows.Err(); err != nil {
+		return nil, err
+	}
+	return items, nil
+}
+
 const getCommentsForTaskID = `-- name: GetCommentsForTaskID :many
 SELECT task_comment_id, task_id, created_at, updated_at, created_by, pinned, message FROM task_comment WHERE task_id = $1 ORDER BY created_at
 `
@ -245,6 +330,79 @@ func (q *Queries) GetProjectIDForTask(ctx context.Context, taskID uuid.UUID) (uu
 	return project_id, err
 }

+const getProjectIdMappings = `-- name: GetProjectIdMappings :many
+SELECT project_id, task_id FROM task
+INNER JOIN task_group ON task_group.task_group_id = task.task_group_id
+  WHERE task_id = ANY($1::uuid[])
+`
+
+type GetProjectIdMappingsRow struct {
+	ProjectID uuid.UUID `json:"project_id"`
+	TaskID    uuid.UUID `json:"task_id"`
+}
+
+func (q *Queries) GetProjectIdMappings(ctx context.Context, dollar_1 []uuid.UUID) ([]GetProjectIdMappingsRow, error) {
+	rows, err := q.db.QueryContext(ctx, getProjectIdMappings, pq.Array(dollar_1))
+	if err != nil {
+		return nil, err
+	}
+	defer rows.Close()
+	var items []GetProjectIdMappingsRow
+	for rows.Next() {
+		var i GetProjectIdMappingsRow
+		if err := rows.Scan(&i.ProjectID, &i.TaskID); err != nil {
+			return nil, err
+		}
+		items = append(items, i)
+	}
+	if err := rows.Close(); err != nil {
+		return nil, err
+	}
+	if err := rows.Err(); err != nil {
+		return nil, err
+	}
+	return items, nil
+}
+
+const getRecentlyAssignedTaskForUserID = `-- name: GetRecentlyAssignedTaskForUserID :many
+SELECT task.task_id, task.task_group_id, task.created_at, task.name, task.position, task.description, task.due_date, task.complete, task.completed_at, task.has_time FROM task_assigned INNER JOIN
+  task ON task.task_id = task_assigned.task_id WHERE user_id = $1 ORDER BY task_assigned.assigned_date DESC
+`
+
+func (q *Queries) GetRecentlyAssignedTaskForUserID(ctx context.Context, userID uuid.UUID) ([]Task, error) {
+	rows, err := q.db.QueryContext(ctx, getRecentlyAssignedTaskForUserID, userID)
+	if err != nil {
+		return nil, err
+	}
+	defer rows.Close()
+	var items []Task
+	for rows.Next() {
+		var i Task
+		if err := rows.Scan(
+			&i.TaskID,
+			&i.TaskGroupID,
+			&i.CreatedAt,
+			&i.Name,
+			&i.Position,
+			&i.Description,
+			&i.DueDate,
+			&i.Complete,
+			&i.CompletedAt,
+			&i.HasTime,
+		); err != nil {
+			return nil, err
+		}
+		items = append(items, i)
+	}
+	if err := rows.Close(); err != nil {
+		return nil, err
+	}
+	if err := rows.Err(); err != nil {
+		return nil, err
+	}
+	return items, nil
+}
+
 const getTaskByID = `-- name: GetTaskByID :one
 SELECT task_id, task_group_id, created_at, name, position, description, due_date, complete, completed_at, has_time FROM task WHERE task_id = $1
 `
@ -334,7 +492,7 @@ func (q *Queries) SetTaskComplete(ctx context.Context, arg SetTaskCompleteParams
 }

 const updateTaskComment = `-- name: UpdateTaskComment :one
-UPDATE task_comment SET message = $2, updated_at = COALESCE($3, updated_at) WHERE task_comment_id = $1 RETURNING task_comment_id, task_id, created_at, updated_at, created_by, pinned, message
+UPDATE task_comment SET message = $2, updated_at = $3 WHERE task_comment_id = $1 RETURNING task_comment_id, task_id, created_at, updated_at, created_by, pinned, message
 `

 type UpdateTaskCommentParams struct {
--- a/internal/graph/generated.go
+++ b/internal/graph/generated.go
@ -273,6 +273,11 @@ type ComplexityRoot struct {
 		UpdateUserRole                  func(childComplexity int, input UpdateUserRole) int
 	}

+	MyTasksPayload struct {
+		Projects func(childComplexity int) int
+		Tasks    func(childComplexity int) int
+	}
+
 	Notification struct {
 		ActionType func(childComplexity int) int
 		Actor      func(childComplexity int) int
@ -338,6 +343,11 @@ type ComplexityRoot struct {
 		RoleCode  func(childComplexity int) int
 	}

+	ProjectTaskMapping struct {
+		ProjectID func(childComplexity int) int
+		TaskID    func(childComplexity int) int
+	}
+
 	Query struct {
 		FindProject   func(childComplexity int, input FindProject) int
 		FindTask      func(childComplexity int, input FindTask) int
@ -346,6 +356,7 @@ type ComplexityRoot struct {
 		InvitedUsers  func(childComplexity int) int
 		LabelColors   func(childComplexity int) int
 		Me            func(childComplexity int) int
+		MyTasks       func(childComplexity int, input MyTasks) int
 		Notifications func(childComplexity int) int
 		Organizations func(childComplexity int) int
 		Projects      func(childComplexity int, input *ProjectsFilter) int
@ -622,6 +633,7 @@ type QueryResolver interface {
 	Projects(ctx context.Context, input *ProjectsFilter) ([]db.Project, error)
 	FindTeam(ctx context.Context, input FindTeam) (*db.Team, error)
 	Teams(ctx context.Context) ([]db.Team, error)
+	MyTasks(ctx context.Context, input MyTasks) (*MyTasksPayload, error)
 	LabelColors(ctx context.Context) ([]db.LabelColor, error)
 	TaskGroups(ctx context.Context) ([]db.TaskGroup, error)
 	Me(ctx context.Context) (*MePayload, error)
@ -1878,6 +1890,20 @@ func (e *executableSchema) Complexity(typeName, field string, childComplexity in

 		return e.complexity.Mutation.UpdateUserRole(childComplexity, args["input"].(UpdateUserRole)), true

+	case "MyTasksPayload.projects":
+		if e.complexity.MyTasksPayload.Projects == nil {
+			break
+		}
+
+		return e.complexity.MyTasksPayload.Projects(childComplexity), true
+
+	case "MyTasksPayload.tasks":
+		if e.complexity.MyTasksPayload.Tasks == nil {
+			break
+		}
+
+		return e.complexity.MyTasksPayload.Tasks(childComplexity), true
+
 	case "Notification.actionType":
 		if e.complexity.Notification.ActionType == nil {
 			break
@ -2123,6 +2149,20 @@ func (e *executableSchema) Complexity(typeName, field string, childComplexity in

 		return e.complexity.ProjectRole.RoleCode(childComplexity), true

+	case "ProjectTaskMapping.projectID":
+		if e.complexity.ProjectTaskMapping.ProjectID == nil {
+			break
+		}
+
+		return e.complexity.ProjectTaskMapping.ProjectID(childComplexity), true
+
+	case "ProjectTaskMapping.taskID":
+		if e.complexity.ProjectTaskMapping.TaskID == nil {
+			break
+		}
+
+		return e.complexity.ProjectTaskMapping.TaskID(childComplexity), true
+
 	case "Query.findProject":
 		if e.complexity.Query.FindProject == nil {
 			break
@ -2192,6 +2232,18 @@ func (e *executableSchema) Complexity(typeName, field string, childComplexity in

 		return e.complexity.Query.Me(childComplexity), true

+	case "Query.myTasks":
+		if e.complexity.Query.MyTasks == nil {
+			break
+		}
+
+		args, err := ec.field_Query_myTasks_args(context.TODO(), rawArgs)
+		if err != nil {
+			return 0, false
+		}
+
+		return e.complexity.Query.MyTasks(childComplexity, args["input"].(MyTasks)), true
+
 	case "Query.notifications":
 		if e.complexity.Query.Notifications == nil {
 			break
@ -3229,13 +3281,47 @@ type Query {
  projects(input: ProjectsFilter): [Project!]!
  findTeam(input: FindTeam!): Team!
  teams: [Team!]!
+  myTasks(input: MyTasks!): MyTasksPayload!
  labelColors: [LabelColor!]!
  taskGroups: [TaskGroup!]!
  me: MePayload!
 }

+
 type Mutation

+enum MyTasksStatus {
+  ALL
+  INCOMPLETE
+  COMPLETE_ALL
+  COMPLETE_TODAY
+  COMPLETE_YESTERDAY
+  COMPLETE_ONE_WEEK
+  COMPLETE_TWO_WEEK
+  COMPLETE_THREE_WEEK
+}
+
+enum MyTasksSort {
+  NONE
+  PROJECT
+  DUE_DATE
+}
+
+input MyTasks {
+  status: MyTasksStatus!
+  sort: MyTasksSort!
+}
+
+type ProjectTaskMapping {
+  projectID: UUID!
+  taskID: UUID!
+}
+
+type MyTasksPayload {
+  tasks: [Task!]!
+  projects: [ProjectTaskMapping!]!
+}
+
 type TeamRole {
  teamID: UUID!
  roleCode: RoleCode!
@ -3462,6 +3548,7 @@ input NewTask {
  taskGroupID: UUID!
  name: String!
  position: Float!
+  assigned: [UUID!]
 }

 input AssignTaskInput {
@ -4806,6 +4893,20 @@ func (ec *executionContext) field_Query_findUser_args(ctx context.Context, rawAr
 	return args, nil
 }

+func (ec *executionContext) field_Query_myTasks_args(ctx context.Context, rawArgs map[string]interface{}) (map[string]interface{}, error) {
+	var err error
+	args := map[string]interface{}{}
+	var arg0 MyTasks
+	if tmp, ok := rawArgs["input"]; ok {
+		arg0, err = ec.unmarshalNMyTasks2githubᚗcomᚋjordanknottᚋtaskcafeᚋinternalᚋgraphᚐMyTasks(ctx, tmp)
+		if err != nil {
+			return nil, err
+		}
+	}
+	args["input"] = arg0
+	return args, nil
+}
+
 func (ec *executionContext) field_Query_projects_args(ctx context.Context, rawArgs map[string]interface{}) (map[string]interface{}, error) {
 	var err error
 	args := map[string]interface{}{}
@ -11270,6 +11371,74 @@ func (ec *executionContext) _Mutation_updateUserInfo(ctx context.Context, field
 	return ec.marshalNUpdateUserInfoPayload2ᚖgithubᚗcomᚋjordanknottᚋtaskcafeᚋinternalᚋgraphᚐUpdateUserInfoPayload(ctx, field.Selections, res)
 }

+func (ec *executionContext) _MyTasksPayload_tasks(ctx context.Context, field graphql.CollectedField, obj *MyTasksPayload) (ret graphql.Marshaler) {
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	fc := &graphql.FieldContext{
+		Object:   "MyTasksPayload",
+		Field:    field,
+		Args:     nil,
+		IsMethod: false,
+	}
+
+	ctx = graphql.WithFieldContext(ctx, fc)
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.Tasks, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.([]db.Task)
+	fc.Result = res
+	return ec.marshalNTask2ᚕgithubᚗcomᚋjordanknottᚋtaskcafeᚋinternalᚋdbᚐTaskᚄ(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) _MyTasksPayload_projects(ctx context.Context, field graphql.CollectedField, obj *MyTasksPayload) (ret graphql.Marshaler) {
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	fc := &graphql.FieldContext{
+		Object:   "MyTasksPayload",
+		Field:    field,
+		Args:     nil,
+		IsMethod: false,
+	}
+
+	ctx = graphql.WithFieldContext(ctx, fc)
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.Projects, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.([]ProjectTaskMapping)
+	fc.Result = res
+	return ec.marshalNProjectTaskMapping2ᚕgithubᚗcomᚋjordanknottᚋtaskcafeᚋinternalᚋgraphᚐProjectTaskMappingᚄ(ctx, field.Selections, res)
+}
+
 func (ec *executionContext) _Notification_id(ctx context.Context, field graphql.CollectedField, obj *db.Notification) (ret graphql.Marshaler) {
 	defer func() {
 		if r := recover(); r != nil {
@ -12445,6 +12614,74 @@ func (ec *executionContext) _ProjectRole_roleCode(ctx context.Context, field gra
 	return ec.marshalNRoleCode2githubᚗcomᚋjordanknottᚋtaskcafeᚋinternalᚋgraphᚐRoleCode(ctx, field.Selections, res)
 }

+func (ec *executionContext) _ProjectTaskMapping_projectID(ctx context.Context, field graphql.CollectedField, obj *ProjectTaskMapping) (ret graphql.Marshaler) {
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	fc := &graphql.FieldContext{
+		Object:   "ProjectTaskMapping",
+		Field:    field,
+		Args:     nil,
+		IsMethod: false,
+	}
+
+	ctx = graphql.WithFieldContext(ctx, fc)
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.ProjectID, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(uuid.UUID)
+	fc.Result = res
+	return ec.marshalNUUID2githubᚗcomᚋgoogleᚋuuidᚐUUID(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) _ProjectTaskMapping_taskID(ctx context.Context, field graphql.CollectedField, obj *ProjectTaskMapping) (ret graphql.Marshaler) {
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	fc := &graphql.FieldContext{
+		Object:   "ProjectTaskMapping",
+		Field:    field,
+		Args:     nil,
+		IsMethod: false,
+	}
+
+	ctx = graphql.WithFieldContext(ctx, fc)
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.TaskID, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(uuid.UUID)
+	fc.Result = res
+	return ec.marshalNUUID2githubᚗcomᚋgoogleᚋuuidᚐUUID(ctx, field.Selections, res)
+}
+
 func (ec *executionContext) _Query_organizations(ctx context.Context, field graphql.CollectedField) (ret graphql.Marshaler) {
 	defer func() {
 		if r := recover(); r != nil {
@ -12818,6 +13055,47 @@ func (ec *executionContext) _Query_teams(ctx context.Context, field graphql.Coll
 	return ec.marshalNTeam2ᚕgithubᚗcomᚋjordanknottᚋtaskcafeᚋinternalᚋdbᚐTeamᚄ(ctx, field.Selections, res)
 }

+func (ec *executionContext) _Query_myTasks(ctx context.Context, field graphql.CollectedField) (ret graphql.Marshaler) {
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	fc := &graphql.FieldContext{
+		Object:   "Query",
+		Field:    field,
+		Args:     nil,
+		IsMethod: true,
+	}
+
+	ctx = graphql.WithFieldContext(ctx, fc)
+	rawArgs := field.ArgumentMap(ec.Variables)
+	args, err := ec.field_Query_myTasks_args(ctx, rawArgs)
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	fc.Args = args
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return ec.resolvers.Query().MyTasks(rctx, args["input"].(MyTasks))
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(*MyTasksPayload)
+	fc.Result = res
+	return ec.marshalNMyTasksPayload2ᚖgithubᚗcomᚋjordanknottᚋtaskcafeᚋinternalᚋgraphᚐMyTasksPayload(ctx, field.Selections, res)
+}
+
 func (ec *executionContext) _Query_labelColors(ctx context.Context, field graphql.CollectedField) (ret graphql.Marshaler) {
 	defer func() {
 		if r := recover(); r != nil {
@ -17902,6 +18180,30 @@ func (ec *executionContext) unmarshalInputMemberSearchFilter(ctx context.Context
 	return it, nil
 }

+func (ec *executionContext) unmarshalInputMyTasks(ctx context.Context, obj interface{}) (MyTasks, error) {
+	var it MyTasks
+	var asMap = obj.(map[string]interface{})
+
+	for k, v := range asMap {
+		switch k {
+		case "status":
+			var err error
+			it.Status, err = ec.unmarshalNMyTasksStatus2githubᚗcomᚋjordanknottᚋtaskcafeᚋinternalᚋgraphᚐMyTasksStatus(ctx, v)
+			if err != nil {
+				return it, err
+			}
+		case "sort":
+			var err error
+			it.Sort, err = ec.unmarshalNMyTasksSort2githubᚗcomᚋjordanknottᚋtaskcafeᚋinternalᚋgraphᚐMyTasksSort(ctx, v)
+			if err != nil {
+				return it, err
+			}
+		}
+	}
+
+	return it, nil
+}
+
 func (ec *executionContext) unmarshalInputNewProject(ctx context.Context, obj interface{}) (NewProject, error) {
 	var it NewProject
 	var asMap = obj.(map[string]interface{})
@ -17998,6 +18300,12 @@ func (ec *executionContext) unmarshalInputNewTask(ctx context.Context, obj inter
 			if err != nil {
 				return it, err
 			}
+		case "assigned":
+			var err error
+			it.Assigned, err = ec.unmarshalOUUID2ᚕgithubᚗcomᚋgoogleᚋuuidᚐUUIDᚄ(ctx, v)
+			if err != nil {
+				return it, err
+			}
 		}
 	}

@ -20086,6 +20394,38 @@ func (ec *executionContext) _Mutation(ctx context.Context, sel ast.SelectionSet)
 	return out
 }

+var myTasksPayloadImplementors = []string{"MyTasksPayload"}
+
+func (ec *executionContext) _MyTasksPayload(ctx context.Context, sel ast.SelectionSet, obj *MyTasksPayload) graphql.Marshaler {
+	fields := graphql.CollectFields(ec.OperationContext, sel, myTasksPayloadImplementors)
+
+	out := graphql.NewFieldSet(fields)
+	var invalids uint32
+	for i, field := range fields {
+		switch field.Name {
+		case "__typename":
+			out.Values[i] = graphql.MarshalString("MyTasksPayload")
+		case "tasks":
+			out.Values[i] = ec._MyTasksPayload_tasks(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				invalids++
+			}
+		case "projects":
+			out.Values[i] = ec._MyTasksPayload_projects(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				invalids++
+			}
+		default:
+			panic("unknown field " + strconv.Quote(field.Name))
+		}
+	}
+	out.Dispatch()
+	if invalids > 0 {
+		return graphql.Null
+	}
+	return out
+}
+
 var notificationImplementors = []string{"Notification"}

 func (ec *executionContext) _Notification(ctx context.Context, sel ast.SelectionSet, obj *db.Notification) graphql.Marshaler {
@ -20601,6 +20941,38 @@ func (ec *executionContext) _ProjectRole(ctx context.Context, sel ast.SelectionS
 	return out
 }

+var projectTaskMappingImplementors = []string{"ProjectTaskMapping"}
+
+func (ec *executionContext) _ProjectTaskMapping(ctx context.Context, sel ast.SelectionSet, obj *ProjectTaskMapping) graphql.Marshaler {
+	fields := graphql.CollectFields(ec.OperationContext, sel, projectTaskMappingImplementors)
+
+	out := graphql.NewFieldSet(fields)
+	var invalids uint32
+	for i, field := range fields {
+		switch field.Name {
+		case "__typename":
+			out.Values[i] = graphql.MarshalString("ProjectTaskMapping")
+		case "projectID":
+			out.Values[i] = ec._ProjectTaskMapping_projectID(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				invalids++
+			}
+		case "taskID":
+			out.Values[i] = ec._ProjectTaskMapping_taskID(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				invalids++
+			}
+		default:
+			panic("unknown field " + strconv.Quote(field.Name))
+		}
+	}
+	out.Dispatch()
+	if invalids > 0 {
+		return graphql.Null
+	}
+	return out
+}
+
 var queryImplementors = []string{"Query"}

 func (ec *executionContext) _Query(ctx context.Context, sel ast.SelectionSet) graphql.Marshaler {
@ -20742,6 +21114,20 @@ func (ec *executionContext) _Query(ctx context.Context, sel ast.SelectionSet) gr
 				}
 				return res
 			})
+		case "myTasks":
+			field := field
+			out.Concurrently(i, func() (res graphql.Marshaler) {
+				defer func() {
+					if r := recover(); r != nil {
+						ec.Error(ctx, ec.Recover(ctx, r))
+					}
+				}()
+				res = ec._Query_myTasks(ctx, field)
+				if res == graphql.Null {
+					atomic.AddUint32(&invalids, 1)
+				}
+				return res
+			})
 		case "labelColors":
 			field := field
 			out.Concurrently(i, func() (res graphql.Marshaler) {
@ -23147,6 +23533,42 @@ func (ec *executionContext) marshalNMemberSearchResult2ᚕgithubᚗcomᚋjordank
 	return ret
 }

+func (ec *executionContext) unmarshalNMyTasks2githubᚗcomᚋjordanknottᚋtaskcafeᚋinternalᚋgraphᚐMyTasks(ctx context.Context, v interface{}) (MyTasks, error) {
+	return ec.unmarshalInputMyTasks(ctx, v)
+}
+
+func (ec *executionContext) marshalNMyTasksPayload2githubᚗcomᚋjordanknottᚋtaskcafeᚋinternalᚋgraphᚐMyTasksPayload(ctx context.Context, sel ast.SelectionSet, v MyTasksPayload) graphql.Marshaler {
+	return ec._MyTasksPayload(ctx, sel, &v)
+}
+
+func (ec *executionContext) marshalNMyTasksPayload2ᚖgithubᚗcomᚋjordanknottᚋtaskcafeᚋinternalᚋgraphᚐMyTasksPayload(ctx context.Context, sel ast.SelectionSet, v *MyTasksPayload) graphql.Marshaler {
+	if v == nil {
+		if !graphql.HasFieldError(ctx, graphql.GetFieldContext(ctx)) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	return ec._MyTasksPayload(ctx, sel, v)
+}
+
+func (ec *executionContext) unmarshalNMyTasksSort2githubᚗcomᚋjordanknottᚋtaskcafeᚋinternalᚋgraphᚐMyTasksSort(ctx context.Context, v interface{}) (MyTasksSort, error) {
+	var res MyTasksSort
+	return res, res.UnmarshalGQL(v)
+}
+
+func (ec *executionContext) marshalNMyTasksSort2githubᚗcomᚋjordanknottᚋtaskcafeᚋinternalᚋgraphᚐMyTasksSort(ctx context.Context, sel ast.SelectionSet, v MyTasksSort) graphql.Marshaler {
+	return v
+}
+
+func (ec *executionContext) unmarshalNMyTasksStatus2githubᚗcomᚋjordanknottᚋtaskcafeᚋinternalᚋgraphᚐMyTasksStatus(ctx context.Context, v interface{}) (MyTasksStatus, error) {
+	var res MyTasksStatus
+	return res, res.UnmarshalGQL(v)
+}
+
+func (ec *executionContext) marshalNMyTasksStatus2githubᚗcomᚋjordanknottᚋtaskcafeᚋinternalᚋgraphᚐMyTasksStatus(ctx context.Context, sel ast.SelectionSet, v MyTasksStatus) graphql.Marshaler {
+	return v
+}
+
 func (ec *executionContext) unmarshalNNewProject2githubᚗcomᚋjordanknottᚋtaskcafeᚋinternalᚋgraphᚐNewProject(ctx context.Context, v interface{}) (NewProject, error) {
 	return ec.unmarshalInputNewProject(ctx, v)
 }
@ -23473,6 +23895,47 @@ func (ec *executionContext) marshalNProjectRole2ᚕgithubᚗcomᚋjordanknottᚋ
 	return ret
 }

+func (ec *executionContext) marshalNProjectTaskMapping2githubᚗcomᚋjordanknottᚋtaskcafeᚋinternalᚋgraphᚐProjectTaskMapping(ctx context.Context, sel ast.SelectionSet, v ProjectTaskMapping) graphql.Marshaler {
+	return ec._ProjectTaskMapping(ctx, sel, &v)
+}
+
+func (ec *executionContext) marshalNProjectTaskMapping2ᚕgithubᚗcomᚋjordanknottᚋtaskcafeᚋinternalᚋgraphᚐProjectTaskMappingᚄ(ctx context.Context, sel ast.SelectionSet, v []ProjectTaskMapping) graphql.Marshaler {
+	ret := make(graphql.Array, len(v))
+	var wg sync.WaitGroup
+	isLen1 := len(v) == 1
+	if !isLen1 {
+		wg.Add(len(v))
+	}
+	for i := range v {
+		i := i
+		fc := &graphql.FieldContext{
+			Index:  &i,
+			Result: &v[i],
+		}
+		ctx := graphql.WithFieldContext(ctx, fc)
+		f := func(i int) {
+			defer func() {
+				if r := recover(); r != nil {
+					ec.Error(ctx, ec.Recover(ctx, r))
+					ret = nil
+				}
+			}()
+			if !isLen1 {
+				defer wg.Done()
+			}
+			ret[i] = ec.marshalNProjectTaskMapping2githubᚗcomᚋjordanknottᚋtaskcafeᚋinternalᚋgraphᚐProjectTaskMapping(ctx, sel, v[i])
+		}
+		if isLen1 {
+			f(i)
+		} else {
+			go f(i)
+		}
+
+	}
+	wg.Wait()
+	return ret
+}
+
 func (ec *executionContext) marshalNRefreshToken2githubᚗcomᚋjordanknottᚋtaskcafeᚋinternalᚋdbᚐRefreshToken(ctx context.Context, sel ast.SelectionSet, v db.RefreshToken) graphql.Marshaler {
 	return ec._RefreshToken(ctx, sel, &v)
 }
@ -24875,6 +25338,38 @@ func (ec *executionContext) marshalOUUID2githubᚗcomᚋgoogleᚋuuidᚐUUID(ctx
 	return MarshalUUID(v)
 }

+func (ec *executionContext) unmarshalOUUID2ᚕgithubᚗcomᚋgoogleᚋuuidᚐUUIDᚄ(ctx context.Context, v interface{}) ([]uuid.UUID, error) {
+	var vSlice []interface{}
+	if v != nil {
+		if tmp1, ok := v.([]interface{}); ok {
+			vSlice = tmp1
+		} else {
+			vSlice = []interface{}{v}
+		}
+	}
+	var err error
+	res := make([]uuid.UUID, len(vSlice))
+	for i := range vSlice {
+		res[i], err = ec.unmarshalNUUID2githubᚗcomᚋgoogleᚋuuidᚐUUID(ctx, vSlice[i])
+		if err != nil {
+			return nil, err
+		}
+	}
+	return res, nil
+}
+
+func (ec *executionContext) marshalOUUID2ᚕgithubᚗcomᚋgoogleᚋuuidᚐUUIDᚄ(ctx context.Context, sel ast.SelectionSet, v []uuid.UUID) graphql.Marshaler {
+	if v == nil {
+		return graphql.Null
+	}
+	ret := make(graphql.Array, len(v))
+	for i := range v {
+		ret[i] = ec.marshalNUUID2githubᚗcomᚋgoogleᚋuuidᚐUUID(ctx, sel, v[i])
+	}
+
+	return ret
+}
+
 func (ec *executionContext) unmarshalOUUID2ᚖgithubᚗcomᚋgoogleᚋuuidᚐUUID(ctx context.Context, v interface{}) (*uuid.UUID, error) {
 	if v == nil {
 		return nil, nil
--- a/internal/graph/models_gen.go
+++ b/internal/graph/models_gen.go
@ -291,6 +291,16 @@ type MemberSearchResult struct {
 	Status     ShareStatus     `json:"status"`
 }

+type MyTasks struct {
+	Status MyTasksStatus `json:"status"`
+	Sort   MyTasksSort   `json:"sort"`
+}
+
+type MyTasksPayload struct {
+	Tasks    []db.Task            `json:"tasks"`
+	Projects []ProjectTaskMapping `json:"projects"`
+}
+
 type NewProject struct {
 	TeamID *uuid.UUID `json:"teamID"`
 	Name   string     `json:"name"`
@ -307,9 +317,10 @@ type NewRefreshToken struct {
 }

 type NewTask struct {
-	TaskGroupID uuid.UUID `json:"taskGroupID"`
-	Name        string    `json:"name"`
-	Position    float64   `json:"position"`
+	TaskGroupID uuid.UUID   `json:"taskGroupID"`
+	Name        string      `json:"name"`
+	Position    float64     `json:"position"`
+	Assigned    []uuid.UUID `json:"assigned"`
 }

 type NewTaskGroup struct {
@ -376,6 +387,11 @@ type ProjectRole struct {
 	RoleCode  RoleCode  `json:"roleCode"`
 }

+type ProjectTaskMapping struct {
+	ProjectID uuid.UUID `json:"projectID"`
+	TaskID    uuid.UUID `json:"taskID"`
+}
+
 type ProjectsFilter struct {
 	TeamID *uuid.UUID `json:"teamID"`
 }
@ -797,6 +813,102 @@ func (e EntityType) MarshalGQL(w io.Writer) {
 	fmt.Fprint(w, strconv.Quote(e.String()))
 }

+type MyTasksSort string
+
+const (
+	MyTasksSortNone    MyTasksSort = "NONE"
+	MyTasksSortProject MyTasksSort = "PROJECT"
+	MyTasksSortDueDate MyTasksSort = "DUE_DATE"
+)
+
+var AllMyTasksSort = []MyTasksSort{
+	MyTasksSortNone,
+	MyTasksSortProject,
+	MyTasksSortDueDate,
+}
+
+func (e MyTasksSort) IsValid() bool {
+	switch e {
+	case MyTasksSortNone, MyTasksSortProject, MyTasksSortDueDate:
+		return true
+	}
+	return false
+}
+
+func (e MyTasksSort) String() string {
+	return string(e)
+}
+
+func (e *MyTasksSort) UnmarshalGQL(v interface{}) error {
+	str, ok := v.(string)
+	if !ok {
+		return fmt.Errorf("enums must be strings")
+	}
+
+	*e = MyTasksSort(str)
+	if !e.IsValid() {
+		return fmt.Errorf("%s is not a valid MyTasksSort", str)
+	}
+	return nil
+}
+
+func (e MyTasksSort) MarshalGQL(w io.Writer) {
+	fmt.Fprint(w, strconv.Quote(e.String()))
+}
+
+type MyTasksStatus string
+
+const (
+	MyTasksStatusAll               MyTasksStatus = "ALL"
+	MyTasksStatusIncomplete        MyTasksStatus = "INCOMPLETE"
+	MyTasksStatusCompleteAll       MyTasksStatus = "COMPLETE_ALL"
+	MyTasksStatusCompleteToday     MyTasksStatus = "COMPLETE_TODAY"
+	MyTasksStatusCompleteYesterday MyTasksStatus = "COMPLETE_YESTERDAY"
+	MyTasksStatusCompleteOneWeek   MyTasksStatus = "COMPLETE_ONE_WEEK"
+	MyTasksStatusCompleteTwoWeek   MyTasksStatus = "COMPLETE_TWO_WEEK"
+	MyTasksStatusCompleteThreeWeek MyTasksStatus = "COMPLETE_THREE_WEEK"
+)
+
+var AllMyTasksStatus = []MyTasksStatus{
+	MyTasksStatusAll,
+	MyTasksStatusIncomplete,
+	MyTasksStatusCompleteAll,
+	MyTasksStatusCompleteToday,
+	MyTasksStatusCompleteYesterday,
+	MyTasksStatusCompleteOneWeek,
+	MyTasksStatusCompleteTwoWeek,
+	MyTasksStatusCompleteThreeWeek,
+}
+
+func (e MyTasksStatus) IsValid() bool {
+	switch e {
+	case MyTasksStatusAll, MyTasksStatusIncomplete, MyTasksStatusCompleteAll, MyTasksStatusCompleteToday, MyTasksStatusCompleteYesterday, MyTasksStatusCompleteOneWeek, MyTasksStatusCompleteTwoWeek, MyTasksStatusCompleteThreeWeek:
+		return true
+	}
+	return false
+}
+
+func (e MyTasksStatus) String() string {
+	return string(e)
+}
+
+func (e *MyTasksStatus) UnmarshalGQL(v interface{}) error {
+	str, ok := v.(string)
+	if !ok {
+		return fmt.Errorf("enums must be strings")
+	}
+
+	*e = MyTasksStatus(str)
+	if !e.IsValid() {
+		return fmt.Errorf("%s is not a valid MyTasksStatus", str)
+	}
+	return nil
+}
+
+func (e MyTasksStatus) MarshalGQL(w io.Writer) {
+	fmt.Fprint(w, strconv.Quote(e.String()))
+}
+
 type ObjectType string

 const (
--- a/internal/graph/schema.graphqls
+++ b/internal/graph/schema.graphqls
@ -261,13 +261,47 @@ type Query {
  projects(input: ProjectsFilter): [Project!]!
  findTeam(input: FindTeam!): Team!
  teams: [Team!]!
+  myTasks(input: MyTasks!): MyTasksPayload!
  labelColors: [LabelColor!]!
  taskGroups: [TaskGroup!]!
  me: MePayload!
 }

+
 type Mutation

+enum MyTasksStatus {
+  ALL
+  INCOMPLETE
+  COMPLETE_ALL
+  COMPLETE_TODAY
+  COMPLETE_YESTERDAY
+  COMPLETE_ONE_WEEK
+  COMPLETE_TWO_WEEK
+  COMPLETE_THREE_WEEK
+}
+
+enum MyTasksSort {
+  NONE
+  PROJECT
+  DUE_DATE
+}
+
+input MyTasks {
+  status: MyTasksStatus!
+  sort: MyTasksSort!
+}
+
+type ProjectTaskMapping {
+  projectID: UUID!
+  taskID: UUID!
+}
+
+type MyTasksPayload {
+  tasks: [Task!]!
+  projects: [ProjectTaskMapping!]!
+}
+
 type TeamRole {
  teamID: UUID!
  roleCode: RoleCode!
@ -494,6 +528,7 @@ input NewTask {
  taskGroupID: UUID!
  name: String!
  position: Float!
+  assigned: [UUID!]
 }

 input AssignTaskInput {
@ -945,4 +980,3 @@ type DeleteUserAccountPayload {
  ok: Boolean!
  userAccount: UserAccount!
 }
-
--- a/internal/graph/schema.resolvers.go
+++ b/internal/graph/schema.resolvers.go
@ -314,6 +314,21 @@ func (r *mutationResolver) CreateTask(ctx context.Context, input NewTask) (*db.T
 		ActivityTypeID: 1,
 	})

+	if len(input.Assigned) != 0 {
+		assignedDate := time.Now().UTC()
+		for _, assigned := range input.Assigned {
+			assignedTask, err := r.Repository.CreateTaskAssigned(ctx, db.CreateTaskAssignedParams{TaskID: task.TaskID, UserID: assigned, AssignedDate: assignedDate})
+			logger.New(ctx).WithFields(log.Fields{
+				"assignedUserID": assignedTask.UserID,
+				"taskID":         assignedTask.TaskID,
+				"assignedTaskID": assignedTask.TaskAssignedID,
+			}).Info("assigned task")
+			if err != nil {
+				return &db.Task{}, err
+			}
+		}
+	}
+
 	if err != nil {
 		logger.New(ctx).WithError(err).Error("issue while creating task")
 		return &db.Task{}, err
@ -1391,6 +1406,38 @@ func (r *queryResolver) Teams(ctx context.Context) ([]db.Team, error) {
 	return foundTeams, nil
 }

+func (r *queryResolver) MyTasks(ctx context.Context, input MyTasks) (*MyTasksPayload, error) {
+	userID, _ := GetUserID(ctx)
+	projects := []ProjectTaskMapping{}
+	var tasks []db.Task
+	var err error
+	if input.Sort == MyTasksSortNone {
+		tasks, err = r.Repository.GetRecentlyAssignedTaskForUserID(ctx, userID)
+		if err != nil && err != sql.ErrNoRows {
+			return &MyTasksPayload{}, err
+		}
+	} else if input.Sort == MyTasksSortProject {
+		tasks, err = r.Repository.GetAssignedTasksProjectForUserID(ctx, userID)
+		if err != nil && err != sql.ErrNoRows {
+			return &MyTasksPayload{}, err
+		}
+	} else if input.Sort == MyTasksSortDueDate {
+		tasks, err = r.Repository.GetAssignedTasksDueDateForUserID(ctx, userID)
+		if err != nil && err != sql.ErrNoRows {
+			return &MyTasksPayload{}, err
+		}
+	}
+	taskIds := []uuid.UUID{}
+	for _, task := range tasks {
+		taskIds = append(taskIds, task.TaskID)
+	}
+	mappings, err := r.Repository.GetProjectIdMappings(ctx, taskIds)
+	for _, mapping := range mappings {
+		projects = append(projects, ProjectTaskMapping{ProjectID: mapping.ProjectID, TaskID: mapping.TaskID})
+	}
+	return &MyTasksPayload{Tasks: tasks, Projects: projects}, err
+}
+
 func (r *queryResolver) LabelColors(ctx context.Context) ([]db.LabelColor, error) {
 	return r.Repository.GetLabelColors(ctx)
 }
--- a/internal/graph/schema/_root.gql
+++ b/internal/graph/schema/_root.gql
@ -37,13 +37,47 @@ type Query {
  projects(input: ProjectsFilter): [Project!]!
  findTeam(input: FindTeam!): Team!
  teams: [Team!]!
+  myTasks(input: MyTasks!): MyTasksPayload!
  labelColors: [LabelColor!]!
  taskGroups: [TaskGroup!]!
  me: MePayload!
 }

+
 type Mutation

+enum MyTasksStatus {
+  ALL
+  INCOMPLETE
+  COMPLETE_ALL
+  COMPLETE_TODAY
+  COMPLETE_YESTERDAY
+  COMPLETE_ONE_WEEK
+  COMPLETE_TWO_WEEK
+  COMPLETE_THREE_WEEK
+}
+
+enum MyTasksSort {
+  NONE
+  PROJECT
+  DUE_DATE
+}
+
+input MyTasks {
+  status: MyTasksStatus!
+  sort: MyTasksSort!
+}
+
+type ProjectTaskMapping {
+  projectID: UUID!
+  taskID: UUID!
+}
+
+type MyTasksPayload {
+  tasks: [Task!]!
+  projects: [ProjectTaskMapping!]!
+}
+
 type TeamRole {
  teamID: UUID!
  roleCode: RoleCode!
--- a/internal/graph/schema/task.gql
+++ b/internal/graph/schema/task.gql
@ -25,6 +25,7 @@ input NewTask {
  taskGroupID: UUID!
  name: String!
  position: Float!
+  assigned: [UUID!]
 }

 input AssignTaskInput {