From f98f483ecd0a82edab45c9226a170da7f67802c4 Mon Sep 17 00:00:00 2001 From: katty barroso Date: Thu, 26 Sep 2024 10:42:01 +0200 Subject: [PATCH 1/8] Redesign filters on report --- .../src/components/IssuerSection.tsx | 8 +- .../src/components/Report/DataFilter.tsx | 385 +++++++++++++++++ .../src/components/Report/ReportFilter.tsx | 409 ++++-------------- fabric/src/components/InputUnit/index.tsx | 29 +- fabric/src/components/TextInput/index.tsx | 11 +- fabric/src/icon-svg/IconBalanceSheet.svg | 2 +- fabric/src/icon-svg/IconCashflow.svg | 2 +- fabric/src/icon-svg/IconProfitAndLoss.svg | 2 +- fabric/src/theme/tokens/theme.ts | 30 +- 9 files changed, 535 insertions(+), 343 deletions(-) create mode 100644 centrifuge-app/src/components/Report/DataFilter.tsx diff --git a/centrifuge-app/src/components/IssuerSection.tsx b/centrifuge-app/src/components/IssuerSection.tsx index 1388461e0..b5238987d 100644 --- a/centrifuge-app/src/components/IssuerSection.tsx +++ b/centrifuge-app/src/components/IssuerSection.tsx @@ -28,9 +28,9 @@ type IssuerSectionProps = { } const reportLinks = [ - { label: 'Balance sheet', href: '/balance-sheet', icon: }, - { label: 'Profit & loss', href: '/profit-and-loss', icon: }, - { label: 'Cashflow statement', href: '/cash-flow-statement', icon: }, + { label: 'Balance sheet', href: '/balance-sheet', icon: }, + { label: 'Profit & loss', href: '/profit-and-loss', icon: }, + { label: 'Cashflow statement', href: '/cash-flow-statement', icon: }, ] const StyledRouterTextLink = styled(RouterTextLink)` @@ -78,7 +78,7 @@ export function ReportDetails({ metadata }: IssuerSectionProps) { {link.label} - + ))} diff --git a/centrifuge-app/src/components/Report/DataFilter.tsx b/centrifuge-app/src/components/Report/DataFilter.tsx new file mode 100644 index 000000000..c856ad847 --- /dev/null +++ b/centrifuge-app/src/components/Report/DataFilter.tsx @@ -0,0 +1,385 @@ +import { Loan, Pool } from '@centrifuge/centrifuge-js' +import { useGetNetworkName } from '@centrifuge/centrifuge-react' +import { + AnchorButton, + Box, + Button, + DateInput, + IconBalanceSheet, + IconCashflow, + IconDownload, + IconProfitAndLoss, + SearchInput, + Select, + Shelf, +} from '@centrifuge/fabric' +import * as React from 'react' +import { useNavigate } from 'react-router' +import { nftMetadataSchema } from '../../schemas' +import { useBasePath } from '../../utils/useBasePath' +import { useActiveDomains } from '../../utils/useLiquidityPools' +import { useLoans } from '../../utils/useLoans' +import { useMetadata } from '../../utils/useMetadata' +import { useCentNFT } from '../../utils/useNFTs' +import { useDebugFlags } from '../DebugFlags' +import { GroupBy, Report, ReportContext } from './ReportContext' +import { formatPoolFeeTransactionType } from './utils' + +type ReportFilterProps = { + pool: Pool +} + +export function ReportFilter({ pool }: ReportFilterProps) { + const { + csvData, + setStartDate, + startDate, + endDate, + setEndDate, + report, + loanStatus, + setLoanStatus, + txType, + setTxType, + groupBy, + setGroupBy, + activeTranche, + setActiveTranche, + address, + setAddress, + network, + setNetwork, + loan, + setLoan, + } = React.useContext(ReportContext) + const navigate = useNavigate() + const basePath = useBasePath() + + const { data: domains } = useActiveDomains(pool.id) + const getNetworkName = useGetNetworkName() + const loans = useLoans(pool.id) as Loan[] | undefined + + const { showOracleTx } = useDebugFlags() + + const reportOptions: { label: string; value: Report }[] = [ + { label: 'Balance sheet', value: 'balance-sheet' }, + { label: 'Profit & loss', value: 'profit-and-loss' }, + { label: 'Cash flow statement', value: 'cash-flow-statement' }, + { label: 'Investor transactions', value: 'investor-tx' }, + { label: 'Asset transactions', value: 'asset-tx' }, + { label: 'Fee transactions', value: 'fee-tx' }, + ...(showOracleTx === true ? [{ label: 'Oracle transactions', value: 'oracle-tx' as Report }] : []), + // { label: 'Pool balance', value: 'pool-balance' }, + { label: 'Token price', value: 'token-price' }, + { label: 'Asset list', value: 'asset-list' }, + { label: 'Investor list', value: 'investor-list' }, + ] + + return ( + + + + + + {!['investor-list', 'asset-list', 'balance-sheet', 'cash-flow-statement', 'profit-and-loss'].includes(report) && ( + <> + setStartDate(e.target.value)} /> + setEndDate(e.target.value)} /> + + )} + + {['pool-balance', 'token-price'].includes(report) && ( + { + setLoanStatus(event.target.value) + }} + /> + setStartDate(e.target.value)} /> + + )} + + {(report === 'investor-list' || report === 'investor-tx') && ( + { + setLoan(event.target.value) + }} + value={loan} + options={[ + { label: 'All', value: 'all' }, + ...(loans?.map((l) => ({ value: l.id, label: })) ?? []), + ]} + /> + )} + + {['balance-sheet', 'cash-flow-statement', 'profit-and-loss'].includes(report) && ( + <> + { + if (event.target.value) { + setTxType(event.target.value) + } + }} + /> + )} + {['investor-tx', 'investor-list'].includes(report) && ( + <> + { - if (event.target.value) { - navigate(`${basePath}/${pool.id}/reporting/${event.target.value}`) - } - }} - /> - - {!['investor-list', 'asset-list', 'balance-sheet', 'cash-flow-statement', 'profit-and-loss'].includes(report) && ( - <> - setStartDate(e.target.value)} /> - setEndDate(e.target.value)} /> - - )} - - {['pool-balance', 'token-price'].includes(report) && ( - { - setLoanStatus(event.target.value) - }} - /> - setStartDate(e.target.value)} /> - - )} - - {(report === 'investor-list' || report === 'investor-tx') && ( - { - setLoan(event.target.value) - }} - value={loan} - options={[ - { label: 'All', value: 'all' }, - ...(loans?.map((l) => ({ value: l.id, label: })) ?? []), - ]} - /> - )} + + } + onClick={() => navigate(`${basePath}/${pool.id}/reporting/balance-sheet`)} + > + Balance sheet + + } + onClick={() => navigate(`${basePath}/${pool.id}/reporting/profit-and-loss`)} + > + Profit & loss + + } + onClick={() => navigate(`${basePath}/${pool.id}/reporting/cash-flow-statement`)} + > + Cash flow + + - {['balance-sheet', 'cash-flow-statement', 'profit-and-loss'].includes(report) && ( - <> + + { - if (event.target.value) { - setTxType(event.target.value) - } - }} - /> - )} - {['investor-tx', 'investor-list'].includes(report) && ( - <> - { - setGroupBy(event.target.value as GroupBy) - }} - value={groupBy} - options={[ - { label: 'Day', value: 'day' }, - { label: 'Daily', value: 'daily' }, - { label: 'Monthly', value: 'month' }, - { label: 'Quarterly', value: 'quarter' }, - { label: 'Yearly', value: 'year' }, - ]} - hideBorder - /> - - - {groupBy === 'day' && ( - setStartDate(e.target.value)} /> - )} + + + } + onClick={() => navigate(`${basePath}/${pool.id}/reporting/balance-sheet`)} + > + Balance sheet + + } + onClick={() => navigate(`${basePath}/${pool.id}/reporting/profit-and-loss`)} + > + Profit & loss + + } + onClick={() => navigate(`${basePath}/${pool.id}/reporting/cash-flow-statement`)} + > + Cash flow + - {groupBy === 'month' || groupBy === 'daily' ? ( - <> - - setStartDate(e.target.value)} - /> - - setEndDate(e.target.value)} /> - - ) : null} - - - } - small - variant="inverted" - > - CSV - + + + } + icon={} small variant="inverted" > CSV - + diff --git a/fabric/src/components/Button/WalletButton.tsx b/fabric/src/components/Button/WalletButton.tsx index e89aab653..47a32bd63 100644 --- a/fabric/src/components/Button/WalletButton.tsx +++ b/fabric/src/components/Button/WalletButton.tsx @@ -30,6 +30,12 @@ const StyledButton = styled.button` outline: 0; border-radius: 40px; white-space: nowrap; + & > span { + border-color: ${({ theme }) => theme.colors.backgroundPrimary}; + :hover { + border-color: ${({ theme }) => theme.colors.backgroundPrimary}; + } + } ` const IdenticonWrapper = styled(Flex)({ From c883b2fafb455ee31785766f6149582cf722cb37 Mon Sep 17 00:00:00 2001 From: katty barroso Date: Tue, 1 Oct 2024 11:37:57 +0200 Subject: [PATCH 6/8] Updates to table --- centrifuge-app/src/components/DataTable.tsx | 54 ++++++++++--------- .../src/components/Report/BalanceSheet.tsx | 5 ++ .../src/components/Report/ProfitAndLoss.tsx | 3 ++ .../src/components/Report/index.tsx | 12 +---- 4 files changed, 39 insertions(+), 35 deletions(-) diff --git a/centrifuge-app/src/components/DataTable.tsx b/centrifuge-app/src/components/DataTable.tsx index 0ae6b99f0..15af130ab 100644 --- a/centrifuge-app/src/components/DataTable.tsx +++ b/centrifuge-app/src/components/DataTable.tsx @@ -60,6 +60,7 @@ export type Column = { align?: string sortKey?: string width?: string + isLabel?: boolean } const sorter = >(data: Array, order: OrderBy, sortKey?: string) => { if (!sortKey) return data @@ -105,6 +106,8 @@ export const DataTable = >({ const [currentSortKey, setCurrentSortKey] = React.useState(defaultSortKey || '') + console.log(columns) + const updateSortOrder = (sortKey: Column['sortKey']) => { if (!sortKey) return const updatedOrderBy = orderBy[sortKey] === 'desc' ? 'asc' : 'desc' @@ -149,33 +152,36 @@ export const DataTable = >({ tabIndex={onRowClicked ? 0 : undefined} > {columns.map((col, index) => ( - - {col.cell(row, i)} - - ))} - - ))} - {sortedAndPaginatedData?.map((row, i) => ( - - {columns.map((col, index) => ( - + {col.cell(row, i)} ))} ))} + {sortedAndPaginatedData?.map((row, i) => { + return ( + + {columns.map((col, index) => ( + + {col.cell(row, i)} + + ))} + + ) + })} {/* summary row is not included in sorting */} {summary && ( @@ -241,8 +247,8 @@ export const DataRow = styled(Row)` })} ` -export const DataCol = styled(Text)<{ align: Column['align'] }>` - background: initial; +export const DataCol = styled(Text)<{ align: Column['align']; isLabel?: boolean }>` + background: ${({ isLabel, theme }) => (isLabel ? theme.colors.backgroundSecondary : 'initial')}; border: none; padding: 8px 16px; display: flex; diff --git a/centrifuge-app/src/components/Report/BalanceSheet.tsx b/centrifuge-app/src/components/Report/BalanceSheet.tsx index 4d1a1498e..52dfb9a2d 100644 --- a/centrifuge-app/src/components/Report/BalanceSheet.tsx +++ b/centrifuge-app/src/components/Report/BalanceSheet.tsx @@ -3,6 +3,7 @@ import { Pool } from '@centrifuge/centrifuge-js/dist/modules/pools' import { formatBalance } from '@centrifuge/centrifuge-react' import { Text } from '@centrifuge/fabric' import * as React from 'react' +import { useTheme } from 'styled-components' import { Dec } from '../../utils/Decimal' import { formatDate } from '../../utils/date' import { getCSVDownloadUrl } from '../../utils/getCSVDownloadUrl' @@ -20,6 +21,7 @@ type Row = TableDataRow & { } export function BalanceSheet({ pool }: { pool: Pool }) { + const theme = useTheme() const { startDate, endDate, groupBy, setCsvData, setReportData } = React.useContext(ReportContext) const [adjustedStartDate, adjustedEndDate] = React.useMemo(() => { @@ -71,6 +73,7 @@ export function BalanceSheet({ pool }: { pool: Pool }) { {row.name} ), width: '200px', + isLabel: true, }, ] .concat( @@ -88,6 +91,7 @@ export function BalanceSheet({ pool }: { pool: Pool }) { ), width: '170px', + isLabel: false, })) ) .concat({ @@ -95,6 +99,7 @@ export function BalanceSheet({ pool }: { pool: Pool }) { header: '', cell: () => , width: '1fr', + isLabel: false, }) }, [poolStates]) diff --git a/centrifuge-app/src/components/Report/ProfitAndLoss.tsx b/centrifuge-app/src/components/Report/ProfitAndLoss.tsx index 33ba1b195..590326326 100644 --- a/centrifuge-app/src/components/Report/ProfitAndLoss.tsx +++ b/centrifuge-app/src/components/Report/ProfitAndLoss.tsx @@ -89,6 +89,7 @@ export function ProfitAndLoss({ pool }: { pool: Pool }) { {row.name} ), width: '240px', + isLabel: true, }, ] .concat( @@ -102,6 +103,7 @@ export function ProfitAndLoss({ pool }: { pool: Pool }) { ), width: '170px', + isLabel: false, })) ) .concat({ @@ -109,6 +111,7 @@ export function ProfitAndLoss({ pool }: { pool: Pool }) { header: '', cell: () => , width: '1fr', + isLabel: false, }) }, [poolStates, groupBy]) diff --git a/centrifuge-app/src/components/Report/index.tsx b/centrifuge-app/src/components/Report/index.tsx index 3836463b0..8c4a73e11 100644 --- a/centrifuge-app/src/components/Report/index.tsx +++ b/centrifuge-app/src/components/Report/index.tsx @@ -2,7 +2,6 @@ import { Pool } from '@centrifuge/centrifuge-js/dist/modules/pools' import { Box, Shelf, Text } from '@centrifuge/fabric' import Decimal from 'decimal.js-light' import * as React from 'react' -import { formatDate } from '../../utils/date' import { AssetList } from './AssetList' import { AssetTransactions } from './AssetTransactions' import { BalanceSheet } from './BalanceSheet' @@ -27,16 +26,7 @@ export function ReportComponent({ pool }: { pool: Pool }) { return ( - - - {!['investor-list', 'asset-list'].includes(report) && ( - <> - {startDate ? formatDate(startDate) : 'The beginning of time'} - {' - '} - {endDate ? formatDate(endDate) : 'now'} - - )} - + {['pool-balance', 'asset-list'].includes(report) && pool && ( All amounts are in {pool.currency.symbol} From 978e08f85018462ddbcc439e9378038e5dea82c5 Mon Sep 17 00:00:00 2001 From: katty barroso Date: Tue, 1 Oct 2024 13:55:48 +0200 Subject: [PATCH 7/8] Add new data tab --- centrifuge-app/src/components/DataTable.tsx | 2 - .../src/components/Report/DataFilter.tsx | 51 +++++-------------- .../src/components/Report/PoolReportPage.tsx | 10 ++-- .../src/components/Report/index.tsx | 2 +- .../src/pages/IssuerPool/Header.tsx | 3 +- centrifuge-app/src/pages/IssuerPool/index.tsx | 2 + centrifuge-app/src/pages/Pool/Header.tsx | 3 +- centrifuge-app/src/pages/Pool/index.tsx | 2 + 8 files changed, 29 insertions(+), 46 deletions(-) diff --git a/centrifuge-app/src/components/DataTable.tsx b/centrifuge-app/src/components/DataTable.tsx index 15af130ab..c852234dd 100644 --- a/centrifuge-app/src/components/DataTable.tsx +++ b/centrifuge-app/src/components/DataTable.tsx @@ -106,8 +106,6 @@ export const DataTable = >({ const [currentSortKey, setCurrentSortKey] = React.useState(defaultSortKey || '') - console.log(columns) - const updateSortOrder = (sortKey: Column['sortKey']) => { if (!sortKey) return const updatedOrderBy = orderBy[sortKey] === 'desc' ? 'asc' : 'desc' diff --git a/centrifuge-app/src/components/Report/DataFilter.tsx b/centrifuge-app/src/components/Report/DataFilter.tsx index c856ad847..199a1ca28 100644 --- a/centrifuge-app/src/components/Report/DataFilter.tsx +++ b/centrifuge-app/src/components/Report/DataFilter.tsx @@ -1,18 +1,6 @@ import { Loan, Pool } from '@centrifuge/centrifuge-js' import { useGetNetworkName } from '@centrifuge/centrifuge-react' -import { - AnchorButton, - Box, - Button, - DateInput, - IconBalanceSheet, - IconCashflow, - IconDownload, - IconProfitAndLoss, - SearchInput, - Select, - Shelf, -} from '@centrifuge/fabric' +import { AnchorButton, Box, DateInput, IconDownload, SearchInput, Select, Shelf } from '@centrifuge/fabric' import * as React from 'react' import { useNavigate } from 'react-router' import { nftMetadataSchema } from '../../schemas' @@ -29,7 +17,7 @@ type ReportFilterProps = { pool: Pool } -export function ReportFilter({ pool }: ReportFilterProps) { +export function DataFilter({ pool }: ReportFilterProps) { const { csvData, setStartDate, @@ -62,9 +50,6 @@ export function ReportFilter({ pool }: ReportFilterProps) { const { showOracleTx } = useDebugFlags() const reportOptions: { label: string; value: Report }[] = [ - { label: 'Balance sheet', value: 'balance-sheet' }, - { label: 'Profit & loss', value: 'profit-and-loss' }, - { label: 'Cash flow statement', value: 'cash-flow-statement' }, { label: 'Investor transactions', value: 'investor-tx' }, { label: 'Asset transactions', value: 'asset-tx' }, { label: 'Fee transactions', value: 'fee-tx' }, @@ -86,27 +71,17 @@ export function ReportFilter({ pool }: ReportFilterProps) { borderStyle="solid" borderColor="borderPrimary" > - - - +