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/modules/activities/components/ActivityTargetChips.tsx

@@ -0,0 +1,43 @@
+import styled from '@emotion/styled';
+
+import { CompanyChip } from '@/companies/components/CompanyChip';
+import { PersonChip } from '@/people/components/PersonChip';
+import { GetCompaniesQuery, GetPeopleQuery } from '~/generated/graphql';
+import { getLogoUrlFromDomainName } from '~/utils';
+
+const StyledContainer = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  gap: ${({ theme }) => theme.spacing(1)};
+`;
+
+export function ActivityTargetChips({
+  targetCompanies,
+  targetPeople,
+}: {
+  targetCompanies?: GetCompaniesQuery;
+  targetPeople?: GetPeopleQuery;
+}) {
+  return (
+    <StyledContainer>
+      {targetCompanies?.companies &&
+        targetCompanies.companies.map((company) => (
+          <CompanyChip
+            key={company.id}
+            id={company.id}
+            name={company.name}
+            pictureUrl={getLogoUrlFromDomainName(company.domainName)}
+          />
+        ))}
+      {targetPeople?.people &&
+        targetPeople.people.map((person) => (
+          <PersonChip
+            key={person.id}
+            id={person.id}
+            name={person.displayName}
+            pictureUrl={person.avatarUrl ?? ''}
+          />
+        ))}
+    </StyledContainer>
+  );
+}

front/src/modules/activities/editable-fields/components/ActivityRelationEditableField.tsx

@@ -1,7 +1,4 @@
-import styled from '@emotion/styled';
-
-import { CompanyChip } from '@/companies/components/CompanyChip';
-import { PersonChip } from '@/people/components/PersonChip';
+import { ActivityTargetChips } from '@/activities/components/ActivityTargetChips';
 import { EditableField } from '@/ui/editable-field/components/EditableField';
 import { FieldContext } from '@/ui/editable-field/states/FieldContext';
 import { IconArrowUpRight } from '@/ui/icon';
@@ -13,16 +10,9 @@ import {
   useGetCompaniesQuery,
   useGetPeopleQuery,
 } from '~/generated/graphql';
-import { getLogoUrlFromDomainName } from '~/utils';
 
 import { ActivityRelationEditableFieldEditMode } from './ActivityRelationEditableFieldEditMode';
 
-const StyledDisplayModeContainer = styled.div`
-  display: flex;
-  flex-wrap: wrap;
-  gap: ${({ theme }) => theme.spacing(1)};
-`;
-
 type OwnProps = {
   activity?: Pick<Activity, 'id'> & {
     activityTargets?: Array<
@@ -74,26 +64,10 @@ export function ActivityRelationEditableField({ activity }: OwnProps) {
           }
           label="Relations"
           displayModeContent={
-            <StyledDisplayModeContainer>
-              {targetCompanies?.companies &&
-                targetCompanies.companies.map((company) => (
-                  <CompanyChip
-                    key={company.id}
-                    id={company.id}
-                    name={company.name}
-                    pictureUrl={getLogoUrlFromDomainName(company.domainName)}
-                  />
-                ))}
-              {targetPeople?.people &&
-                targetPeople.people.map((person) => (
-                  <PersonChip
-                    key={person.id}
-                    id={person.id}
-                    name={person.displayName}
-                    pictureUrl={person.avatarUrl ?? ''}
-                  />
-                ))}
-            </StyledDisplayModeContainer>
+            <ActivityTargetChips
+              targetCompanies={targetCompanies}
+              targetPeople={targetPeople}
+            />
           }
         />
       </RecoilScope>

front/src/modules/activities/queries/select.ts

@@ -52,6 +52,44 @@ export const GET_ACTIVITIES_BY_TARGETS = gql`
   }
 `;
 
+export const GET_ACTIVITIES = gql`
+  query GetActivities(
+    $where: ActivityWhereInput!
+    $orderBy: [ActivityOrderByWithRelationInput!]
+  ) {
+    findManyActivities(orderBy: $orderBy, where: $where) {
+      id
+      createdAt
+      title
+      body
+      type
+      completedAt
+      dueAt
+      assignee {
+        id
+        firstName
+        lastName
+        displayName
+        avatarUrl
+      }
+      author {
+        id
+        firstName
+        lastName
+        displayName
+      }
+      comments {
+        id
+      }
+      activityTargets {
+        id
+        commentableType
+        commentableId
+      }
+    }
+  }
+`;
+
 export const GET_ACTIVITY = gql`
   query GetActivity($activityId: String!) {
     findManyActivities(where: { id: { equals: $activityId } }) {