282 on opportunities page data pipeline + companies + people is fetched from be (#285)

* feature: get pipelines columns from backend

* feature: display item not found instead of crashing

* feature: add BoardCard component

* feature: display items from the backend

* refactor: extract useBoard in a hook

* refactor: export only loading and error from useBoard

* refactor: create var pipelineStage

* feature: implement support for Company boards

front/src/modules/opportunities/components/Board.tsx

@@ -22,6 +22,8 @@ import {
 import { BoardItem } from '../../ui/components/board/BoardItem';
 import { NewButton } from '../../ui/components/board/BoardNewButton';
 
+import { BoardCard } from './BoardCard';
+
 type BoardProps = {
   initialBoard: Column[];
   items: Items;
@@ -41,8 +43,8 @@ export const Board = ({ initialBoard, items }: BoardProps) => {
   );
 
   return (
-    <DragDropContext onDragEnd={onDragEnd}>
-      <StyledBoard>
+    <StyledBoard>
+      <DragDropContext onDragEnd={onDragEnd}>
         {board.map((column) => (
           <Droppable key={column.id} droppableId={column.id}>
             {(droppableProvided) => (
@@ -59,7 +61,9 @@ export const Board = ({ initialBoard, items }: BoardProps) => {
                     >
                       {(draggableProvided) => (
                         <BoardItem draggableProvided={draggableProvided}>
-                          <p>{items[itemKey].content}</p>
+                          <BoardCard>
+                            {items[itemKey]?.id || 'Item not found'}
+                          </BoardCard>
                         </BoardItem>
                       )}
                     </Draggable>
@@ -70,7 +74,7 @@ export const Board = ({ initialBoard, items }: BoardProps) => {
             )}
           </Droppable>
         ))}
-      </StyledBoard>
-    </DragDropContext>
+      </DragDropContext>
+    </StyledBoard>
   );
 };

front/src/modules/opportunities/components/BoardCard.tsx

@@ -0,0 +1,5 @@
+import styled from '@emotion/styled';
+
+export const BoardCard = styled.p`
+  color: ${(props) => props.theme.text80};
+`;