Add tasks page (#1015)

* Refactor top bar component

* Add task page with tabs

* Add tasks

* Add logic for task status

* Fix isoweek definition

* Enable click on task

* Deduplicate component

* Lint

---------

Co-authored-by: Charles Bochet <charlesBochet@users.noreply.github.com>

front/src/pages/tasks/Tasks.tsx

@@ -0,0 +1,51 @@
+import { useTheme } from '@emotion/react';
+import styled from '@emotion/styled';
+
+import { TaskGroups } from '@/tasks/components/TaskGroups';
+import { TasksContext } from '@/tasks/states/TasksContext';
+import { IconArchive, IconCheck, IconCheckbox } from '@/ui/icon/index';
+import { WithTopBarContainer } from '@/ui/layout/components/WithTopBarContainer';
+import { TabList } from '@/ui/tab/components/TabList';
+import { TopBar } from '@/ui/top-bar/TopBar';
+import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';
+
+const StyledTasksContainer = styled.div`
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  height: 100%;
+  overflow: auto;
+`;
+
+export function Tasks() {
+  const theme = useTheme();
+
+  const TASK_TABS = [
+    {
+      id: 'to-do',
+      title: 'To do',
+      icon: <IconCheck size={theme.icon.size.md} />,
+    },
+    {
+      id: 'done',
+      title: 'Done',
+      icon: <IconArchive size={theme.icon.size.md} />,
+    },
+  ];
+
+  return (
+    <WithTopBarContainer
+      title="Tasks"
+      icon={<IconCheckbox size={theme.icon.size.md} />}
+    >
+      <StyledTasksContainer>
+        <RecoilScope SpecificContext={TasksContext}>
+          <TopBar
+            leftComponent={<TabList context={TasksContext} tabs={TASK_TABS} />}
+          />
+          <TaskGroups />
+        </RecoilScope>
+      </StyledTasksContainer>
+    </WithTopBarContainer>
+  );
+}