Add total deal amount on top of pipeline column (#622)

Add total on top of pipeline column

front/src/modules/pipeline-progress/components/Board.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import styled from '@emotion/styled';
 import {
   DragDropContext,
@@ -98,6 +98,28 @@ export function Board({
     isInitialBoardLoaded,
   ]);
 
+  const calculateColumnTotals = (
+    columns: Column[],
+    items: {
+      [key: string]: CompanyProgress;
+    },
+  ): { [key: string]: number } => {
+    return columns.reduce<{ [key: string]: number }>((acc, column) => {
+      acc[column.id] = column.itemKeys.reduce(
+        (total: number, itemKey: string) => {
+          return total + (items[itemKey]?.pipelineProgress?.amount || 0);
+        },
+        0,
+      );
+      return acc;
+    }, {});
+  };
+
+  const columnTotals = useMemo(
+    () => calculateColumnTotals(board, boardItems),
+    [board, boardItems],
+  );
+
   const onDragEnd: OnDragEndResponder = useCallback(
     async (result) => {
       const newBoard = getOptimisticlyUpdatedBoard(board, result);
@@ -133,7 +155,11 @@ export function Board({
         {columns.map((column, columnIndex) => (
           <Droppable key={column.id} droppableId={column.id}>
             {(droppableProvided) => (
-              <BoardColumn title={column.title} colorCode={column.colorCode}>
+              <BoardColumn
+                title={`${column.title}  `}
+                amount={columnTotals[column.id]}
+                colorCode={column.colorCode}
+              >
                 <BoardColumnCardsContainer
                   droppableProvided={droppableProvided}
                 >

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

@@ -9,9 +9,15 @@ export const StyledColumn = styled.div`
   padding: ${({ theme }) => theme.spacing(2)};
 `;
 
+const StyledHeader = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  width: 100%;
+`;
+
 export const StyledColumnTitle = styled.h3`
   color: ${({ color }) => color};
-  font-family: 'Inter';
   font-size: ${({ theme }) => theme.font.size.md};
   font-style: normal;
   font-weight: ${({ theme }) => theme.font.weight.medium};
@@ -20,16 +26,24 @@ export const StyledColumnTitle = styled.h3`
   margin-bottom: ${({ theme }) => theme.spacing(2)};
 `;
 
+export const StyledAmount = styled.div`
+  color: ${({ theme }) => theme.font.color.light};
+`;
+
 type OwnProps = {
   colorCode?: string;
   title: string;
+  amount: number;
   children: React.ReactNode;
 };
 
-export function BoardColumn({ colorCode, title, children }: OwnProps) {
+export function BoardColumn({ colorCode, title, amount, children }: OwnProps) {
   return (
     <StyledColumn>
-      <StyledColumnTitle color={colorCode}>• {title}</StyledColumnTitle>
+      <StyledHeader>
+        <StyledColumnTitle color={colorCode}>• {title}</StyledColumnTitle>
+        {!!amount && <StyledAmount>${amount}</StyledAmount>}
+      </StyledHeader>
       {children}
     </StyledColumn>
   );