Sammy/t 392 aau i can drag and drop opportunities (#257)

* refactor: extract data from Board component

* feature: display board on opportunities page

* test: add strict mode in storybook

* chore: replace dnd to make it work with React 18 and strict mode

Atlassion has not fixed this issue in a year so we use the fork @hello-pangea/dnd
https://github.com/atlassian/react-beautiful-dnd/issues/2350

* refactor: move mocked-data in a file

* chore: use real column names in mock data

* feature: design columns

* feature: add New button at bottum of columns

* bugfix: move header out of dragable so the cards does not flicker on drop

* lint: remove useless imports

* refactor: rename board item key

front/src/modules/ui/components/board/Board.tsx

@@ -1,12 +1,14 @@
 import { useCallback, useState } from 'react';
+import styled from '@emotion/styled';
 import {
   DragDropContext,
   Draggable,
   Droppable,
   OnDragEndResponder,
-} from 'react-beautiful-dnd';
-import styled from '@emotion/styled';
+} from '@hello-pangea/dnd';
 
+// Atlassian dnd does not support StrictMode from RN 18, so we use a fork @hello-pangea/dnd
+// https://github.com/atlassian/react-beautiful-dnd/issues/2350
 import { BoardCard } from './BoardCard';
 import { BoardColumn } from './BoardColumn';
 
@@ -16,43 +18,27 @@ const StyledBoard = styled.div`
   height: 100%;
 `;
 
-type ItemKey = `item-${number}`;
-interface Item {
+export type BoardItemKey = `item-${number}`;
+export interface Item {
   id: string;
   content: string;
 }
-interface Items {
+export interface Items {
   [key: string]: Item;
 }
-interface Column {
+export interface Column {
   id: string;
   title: string;
-  itemKeys: ItemKey[];
+  colorCode?: string;
+  itemKeys: BoardItemKey[];
 }
 
-const items: Items = {
-  'item-1': { id: 'item-1', content: 'Item 1' },
-  'item-2': { id: 'item-2', content: 'Item 2' },
-  'item-3': { id: 'item-3', content: 'Item 3' },
-  'item-4': { id: 'item-4', content: 'Item 4' },
-  'item-5': { id: 'item-5', content: 'Item 5' },
-  'item-6': { id: 'item-6', content: 'Item 6' },
-} satisfies Record<ItemKey, { id: ItemKey; content: string }>;
+type BoardProps = {
+  initialBoard: Column[];
+  items: Items;
+};
 
-const initialBoard = [
-  {
-    id: 'column-1',
-    title: 'Column 1',
-    itemKeys: ['item-1', 'item-2', 'item-3', 'item-4'],
-  },
-  {
-    id: 'column-2',
-    title: 'Column 2',
-    itemKeys: ['item-5', 'item-6'],
-  },
-] satisfies Column[];
-
-export const Board = () => {
+export const Board = ({ initialBoard, items }: BoardProps) => {
   const [board, setBoard] = useState<Column[]>(initialBoard);
 
   const onDragEnd: OnDragEndResponder = useCallback(
@@ -99,7 +85,11 @@ export const Board = () => {
           <Droppable key={column.id} droppableId={column.id}>
             {(provided) =>
               provided && (
-                <BoardColumn title={column.title} droppableProvided={provided}>
+                <BoardColumn
+                  title={column.title}
+                  colorCode={column.colorCode}
+                  droppableProvided={provided}
+                >
                   {column.itemKeys.map((itemKey, index) => (
                     <Draggable
                       key={itemKey}