diff --git a/front/src/modules/pipeline-progress/components/Board.tsx b/front/src/modules/pipeline-progress/components/Board.tsx index 5e0b53a10..8cd7c575d 100644 --- a/front/src/modules/pipeline-progress/components/Board.tsx +++ b/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) => ( {(droppableProvided) => ( - + diff --git a/front/src/modules/ui/board/components/BoardColumn.tsx b/front/src/modules/ui/board/components/BoardColumn.tsx index 63ce17e9d..5fb24faa0 100644 --- a/front/src/modules/ui/board/components/BoardColumn.tsx +++ b/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 ( - • {title} + + • {title} + {!!amount && ${amount}} + {children} );