Feature/filter and sort board (#725)

* Get pipeline progress from stage IDs

* Rename hooks file

* Addd first amount filter

* Add remaining filters

* Design fixes

* Add filtering on creation date or amount

* Fix card updates and creations with the new state management

* Keep ordering when dropping a card

* Add remainint sorts

* Make board header more generic

* Move available filters and sorts to board options

* Fix decorators for test

* Add pipeline stage ids to mock data

* Adapt mock data

* Linter

front/src/pages/opportunities/Opportunities.tsx

@@ -1,26 +1,54 @@
+import { useCallback, useState } from 'react';
 import { useTheme } from '@emotion/react';
 
-import { companyBoardOptions } from '@/companies/components/companyBoardOptions';
-import { HookCompanyBoard } from '@/companies/components/HookCompanyBoard';
+import { HooksCompanyBoard } from '@/companies/components/HooksCompanyBoard';
 import { CompanyBoardContext } from '@/companies/states/CompanyBoardContext';
 import { BoardActionBarButtonDeletePipelineProgress } from '@/pipeline/components/BoardActionBarButtonDeletePipelineProgress';
 import { EntityBoard } from '@/pipeline/components/EntityBoard';
 import { EntityBoardActionBar } from '@/pipeline/components/EntityBoardActionBar';
+import {
+  defaultPipelineProgressOrderBy,
+  PipelineProgressesSelectedSortType,
+} from '@/pipeline/queries';
+import { reduceSortsToOrderBy } from '@/ui/filter-n-sort/helpers';
 import { IconTargetArrow } from '@/ui/icon/index';
 import { WithTopBarContainer } from '@/ui/layout/components/WithTopBarContainer';
 import { RecoilScope } from '@/ui/recoil-scope/components/RecoilScope';
+import { PipelineProgressOrderByWithRelationInput } from '~/generated/graphql';
+import { opportunitiesBoardOptions } from '~/pages/opportunities/opportunitiesBoardOptions';
 
 export function Opportunities() {
   const theme = useTheme();
 
+  const [orderBy, setOrderBy] = useState<
+    PipelineProgressOrderByWithRelationInput[]
+  >(defaultPipelineProgressOrderBy);
+
+  const updateSorts = useCallback(
+    (sorts: Array<PipelineProgressesSelectedSortType>) => {
+      setOrderBy(
+        sorts.length
+          ? reduceSortsToOrderBy(sorts)
+          : defaultPipelineProgressOrderBy,
+      );
+    },
+    [],
+  );
+
   return (
     <WithTopBarContainer
       title="Opportunities"
       icon={<IconTargetArrow size={theme.icon.size.md} />}
     >
-      <HookCompanyBoard />
       <RecoilScope SpecificContext={CompanyBoardContext}>
-        <EntityBoard boardOptions={companyBoardOptions} />
+        <HooksCompanyBoard
+          availableFilters={opportunitiesBoardOptions.filters}
+          orderBy={orderBy}
+        />
+        <EntityBoard
+          boardOptions={opportunitiesBoardOptions}
+          updateSorts={updateSorts}
+        />
         <EntityBoardActionBar>
           <BoardActionBarButtonDeletePipelineProgress />
         </EntityBoardActionBar>