Fix types

centrifuge-app/src/components/Charts/SimpleBarChart.tsx

@@ -1,5 +1,5 @@
 import { CurrencyBalance, CurrencyMetadata } from '@centrifuge/centrifuge-js'
-import { Text } from '@centrifuge/fabric'
+import { Shelf, Text } from '@centrifuge/fabric'
 import { Bar, BarChart, CartesianGrid, ReferenceLine, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts'
 import { useTheme } from 'styled-components'
 import { formatDate } from '../../../src/utils/date'
@@ -35,7 +35,12 @@ export const SimpleBarChart = ({ currency, data }: SimpleBarChartProps) => {
     return result
   }
 
-  if (!data || !data.length) return
+  if (!data.length)
+    return (
+      <Shelf justifyContent="center">
+        <Text>No data available</Text>
+      </Shelf>
+    )
 
   return (
     <LoadBoundary>

centrifuge-app/src/components/Report/BalanceSheet.tsx

@@ -3,7 +3,6 @@ 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'
@@ -21,7 +20,6 @@ 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(() => {
@@ -245,7 +243,9 @@ export function BalanceSheet({ pool }: { pool: Pool }) {
   }, [assetValuationRecords, trancheRecords])
 
   React.useEffect(() => {
-    setReportData(poolStates)
+    if (poolStates?.length) {
+      setReportData(poolStates)
+    }
   }, [poolStates])
 
   if (!poolStates) {

centrifuge-app/src/components/Report/CashflowStatement.tsx

@@ -1,5 +1,5 @@
 import { CurrencyBalance } from '@centrifuge/centrifuge-js'
-import { Pool } from '@centrifuge/centrifuge-js/dist/modules/pools'
+import { DailyPoolState, Pool } from '@centrifuge/centrifuge-js/dist/modules/pools'
 import { formatBalance } from '@centrifuge/centrifuge-react'
 import { Text, Tooltip } from '@centrifuge/fabric'
 import * as React from 'react'
@@ -324,7 +324,15 @@ export function CashflowStatement({ pool }: { pool: Pool }) {
   }, [grossCashflowRecords, netCashflowRecords])
 
   React.useEffect(() => {
-    setReportData(poolStates)
+    if (poolStates && Object.keys(poolStates).length > 0) {
+      const fullPoolStates: DailyPoolState[] = Object.values(poolStates).map((partialState) => {
+        return {
+          ...partialState,
+        } as DailyPoolState
+      })
+
+      setReportData(fullPoolStates)
+    }
   }, [poolStates])
 
   if (!poolStates) {

centrifuge-app/src/components/Report/DataFilter.tsx

@@ -3,6 +3,7 @@ import { useGetNetworkName } from '@centrifuge/centrifuge-react'
 import { AnchorButton, Box, DateInput, IconDownload, SearchInput, Select, Shelf } from '@centrifuge/fabric'
 import * as React from 'react'
 import { useNavigate } from 'react-router'
+import { usePool } from '../../../src/utils/usePools'
 import { nftMetadataSchema } from '../../schemas'
 import { useBasePath } from '../../utils/useBasePath'
 import { useActiveDomains } from '../../utils/useLiquidityPools'
@@ -14,10 +15,10 @@ import { GroupBy, Report, ReportContext } from './ReportContext'
 import { formatPoolFeeTransactionType } from './utils'
 
 type ReportFilterProps = {
-  pool: Pool
+  poolId: string
 }
 
-export function DataFilter({ pool }: ReportFilterProps) {
+export function DataFilter({ poolId }: ReportFilterProps) {
   const {
     csvData,
     setStartDate,
@@ -42,6 +43,7 @@ export function DataFilter({ pool }: ReportFilterProps) {
   } = React.useContext(ReportContext)
   const navigate = useNavigate()
   const basePath = useBasePath()
+  const pool = usePool(poolId) as Pool
 
   const { data: domains } = useActiveDomains(pool.id)
   const getNetworkName = useGetNetworkName()
@@ -54,7 +56,6 @@ export function DataFilter({ pool }: ReportFilterProps) {
     { 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' },

centrifuge-app/src/components/Report/PoolReportPage.tsx

@@ -2,7 +2,7 @@ import { Pool } from '@centrifuge/centrifuge-js'
 import * as React from 'react'
 import { useLocation, useParams } from 'react-router'
 import { ReportComponent } from '.'
-import { usePool } from '../../utils/usePools'
+import { usePool } from '../../../src/utils/usePools'
 import { LoadBoundary } from '../LoadBoundary'
 import { Spinner } from '../Spinner'
 import { DataFilter } from './DataFilter'
@@ -16,23 +16,22 @@ export function PoolReportPage({ header }: { header: React.ReactNode }) {
 
   if (!poolId) throw new Error('Pool not found')
 
-  const pool = usePool(poolId) as Pool
-
   return (
     <ReportContextProvider>
       {header}
 
-      {pool && location.pathname.includes('reporting') ? <ReportFilter pool={pool} /> : <DataFilter pool={pool} />}
+      {location.pathname.includes('reporting') ? <ReportFilter poolId={poolId} /> : <DataFilter poolId={poolId} />}
 
       <LoadBoundary>
-        <PoolDetailReporting pool={pool} />
+        <PoolDetailReporting poolId={poolId} />
       </LoadBoundary>
     </ReportContextProvider>
   )
 }
 
-function PoolDetailReporting({ pool }: { pool: Pool }) {
-  if (!pool) {
+function PoolDetailReporting({ poolId }: { poolId: string }) {
+  const pool = usePool(poolId) as Pool
+  if (!poolId || !pool) {
     return <Spinner mt={2} />
   }
 

centrifuge-app/src/components/Report/ProfitAndLoss.tsx

@@ -1,5 +1,5 @@
 import { CurrencyBalance } from '@centrifuge/centrifuge-js'
-import { Pool } from '@centrifuge/centrifuge-js/dist/modules/pools'
+import { DailyPoolState, Pool } from '@centrifuge/centrifuge-js/dist/modules/pools'
 import { formatBalance } from '@centrifuge/centrifuge-react'
 import { Text, Tooltip } from '@centrifuge/fabric'
 import * as React from 'react'
@@ -338,7 +338,15 @@ export function ProfitAndLoss({ pool }: { pool: Pool }) {
   }, [profitAndLossRecords, feesRecords, totalProfitRecords])
 
   React.useEffect(() => {
-    setReportData(poolStates)
+    if (poolStates && Object.keys(poolStates).length > 0) {
+      const fullPoolStates: DailyPoolState[] = Object.values(poolStates).map((partialState) => {
+        return {
+          ...partialState,
+        } as DailyPoolState
+      })
+
+      setReportData(fullPoolStates)
+    }
   }, [poolStates])
 
   if (!poolStates) {

centrifuge-app/src/components/Report/ReportContext.tsx

@@ -1,3 +1,4 @@
+import { DailyPoolState } from '@centrifuge/centrifuge-js'
 import * as React from 'react'
 import { useParams } from 'react-router'
 import { useSearchParams } from 'react-router-dom'
@@ -50,8 +51,8 @@ export type ReportContextType = {
   loan: string
   setLoan: (type: string) => void
 
-  reportData: any
-  setReportData: (type: any) => void
+  reportData: DailyPoolState[]
+  setReportData: (type: DailyPoolState[]) => void
 }
 
 export type CsvDataProps = {
@@ -81,7 +82,7 @@ export function ReportContextProvider({ children }: { children: React.ReactNode
   const [address, setAddress] = React.useState(searchParams.get('address') || '')
   const [network, setNetwork] = React.useState<string | number>(searchParams.get('network') || 'all')
   const [loan, setLoan] = React.useState(searchParams.get('loan') || '')
-  const [reportData, setReportData] = React.useState([])
+  const [reportData, setReportData] = React.useState<DailyPoolState[]>([])
 
   React.useEffect(() => {
     const startDate = searchParams.get('from')

centrifuge-app/src/components/Report/ReportFilter.tsx

@@ -1,4 +1,4 @@
-import { CurrencyBalance, Pool } from '@centrifuge/centrifuge-js'
+import { CurrencyBalance, DailyPoolState, Pool } from '@centrifuge/centrifuge-js'
 import {
   AnchorButton,
   Box,
@@ -14,7 +14,7 @@ import {
 import * as React from 'react'
 import { useNavigate } from 'react-router'
 import styled from 'styled-components'
-import { usePoolMetadata } from '../../../src/utils/usePools'
+import { usePool, usePoolMetadata } from '../../../src/utils/usePools'
 import { useBasePath } from '../../utils/useBasePath'
 import { SimpleBarChart } from '../Charts/SimpleBarChart'
 import { GroupBy, ReportContext } from './ReportContext'
@@ -39,25 +39,26 @@ const StyledButton = styled(Button)<StyledButtonProps>`
 `
 
 type ReportFilterProps = {
-  pool: Pool
+  poolId: string
 }
 
-export function ReportFilter({ pool }: ReportFilterProps) {
+export function ReportFilter({ poolId }: ReportFilterProps) {
   const { csvData, setStartDate, startDate, endDate, setEndDate, groupBy, setGroupBy, report, reportData } =
     React.useContext(ReportContext)
   const navigate = useNavigate()
   const basePath = useBasePath()
+  const pool = usePool(poolId) as Pool
   const metadata = usePoolMetadata(pool as Pool)
 
   const transformDataChart = React.useMemo(() => {
     if (!reportData.length) return
     if (report === 'balance-sheet') {
-      return reportData.map((data: any) => ({
+      return reportData.map((data: DailyPoolState) => ({
         name: data.timestamp,
-        yAxis: new CurrencyBalance(data.netAssetValue, pool.currency.decimals).toNumber(),
+        yAxis: new CurrencyBalance(data.poolState.netAssetValue, pool.currency.decimals).toNumber(),
       }))
     } else if (report === 'profit-and-loss') {
-      return reportData.map((data: any) => {
+      return reportData.map((data: DailyPoolState) => {
         return {
           name: data.timestamp,
           yAxis: (metadata?.data?.pool?.asset.class === 'Private credit'
@@ -75,7 +76,7 @@ export function ReportFilter({ pool }: ReportFilterProps) {
         }
       })
     } else {
-      return reportData.map((data: any) => {
+      return reportData.map((data: DailyPoolState) => {
         return {
           name: data.timestamp,
           yAxis: data.poolState.sumPrincipalRepaidAmountByPeriod
@@ -186,9 +187,11 @@ export function ReportFilter({ pool }: ReportFilterProps) {
           </AnchorButton>
         </Shelf>
       </Shelf>
-      <Box mt={4} width="100%" height={200} marginLeft="-50px">
-        <SimpleBarChart data={transformDataChart} currency={pool.currency} />
-      </Box>
+      {transformDataChart?.length && (
+        <Box mt={4} width="100%" height={200} marginLeft="-50px">
+          <SimpleBarChart data={transformDataChart} currency={pool.currency} />
+        </Box>
+      )}
     </Shelf>
   )
 }