Add new data tab

centrifuge · Oct 1, 2024 · eff41c1 · eff41c1
1 parent da28ff7
commit eff41c1
Show file tree

Hide file tree

Showing 8 changed files with 19 additions and 43 deletions.
diff --git a/centrifuge-app/src/components/DataTable.tsx b/centrifuge-app/src/components/DataTable.tsx
@@ -106,8 +106,6 @@ export const DataTable = <T extends Record<string, any>>({
 
   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
@@ -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,
@@ -86,28 +74,6 @@ export function ReportFilter({ pool }: ReportFilterProps) {
       borderStyle="solid"
       borderColor="borderPrimary"
     >
-      <Button
-        variant="secondary"
-        icon={<IconBalanceSheet />}
-        onClick={() => navigate(`${basePath}/${pool.id}/reporting/balance-sheet`)}
-      >
-        Balance sheet
-      </Button>
-      <Button
-        variant="secondary"
-        icon={<IconProfitAndLoss />}
-        onClick={() => navigate(`${basePath}/${pool.id}/reporting/profit-and-loss`)}
-      >
-        Profit & loss
-      </Button>
-      <Button
-        variant="secondary"
-        icon={<IconCashflow />}
-        onClick={() => navigate(`${basePath}/${pool.id}/reporting/cash-flow-statement`)}
-      >
-        Cash flow
-      </Button>
-
       {!['investor-list', 'asset-list', 'balance-sheet', 'cash-flow-statement', 'profit-and-loss'].includes(report) && (
         <>
           <DateInput label="From" value={startDate} max={endDate} onChange={(e) => setStartDate(e.target.value)} />

diff --git a/centrifuge-app/src/components/Report/PoolReportPage.tsx b/centrifuge-app/src/components/Report/PoolReportPage.tsx
@@ -5,11 +5,15 @@ import { ReportComponent } from '.'
 import { usePool } from '../../utils/usePools'
 import { LoadBoundary } from '../LoadBoundary'
 import { Spinner } from '../Spinner'
+import { DataFilter } from './DataFilter'
 import { ReportContextProvider } from './ReportContext'
 import { ReportFilter } from './ReportFilter'
 
 export function PoolReportPage({ header }: { header: React.ReactNode }) {
-  const { pid: poolId } = useParams<{ pid: string }>()
+  const params = useParams<{ pid: string; report: string }>()
+  const { pid: poolId, report } = params
+  const isReport = report === 'balance-sheet' || report === 'profit-and-loss' || report === 'cash-flow-statement'
+
   if (!poolId) throw new Error('Pool not found')
 
   const pool = usePool(poolId) as Pool
@@ -18,7 +22,7 @@ export function PoolReportPage({ header }: { header: React.ReactNode }) {
     <ReportContextProvider>
       {header}
 
-      {pool && <ReportFilter pool={pool} />}
+      {pool && isReport ? <ReportFilter pool={pool} /> : <DataFilter pool={pool} />}
 
       <LoadBoundary>
         <PoolDetailReporting pool={pool} />

diff --git a/centrifuge-app/src/components/Report/index.tsx b/centrifuge-app/src/components/Report/index.tsx
@@ -22,7 +22,7 @@ export type TableDataRow = {
 }
 
 export function ReportComponent({ pool }: { pool: Pool }) {
-  const { report, startDate, endDate } = React.useContext(ReportContext)
+  const { report } = React.useContext(ReportContext)
 
   return (
     <Box pb={6}>

diff --git a/centrifuge-app/src/pages/IssuerPool/Header.tsx b/centrifuge-app/src/pages/IssuerPool/Header.tsx
@@ -77,7 +77,10 @@ export function IssuerPoolHeader({ actions }: Props) {
         <NavigationTabsItem to={`${basePath}/${pid}`}>Overview</NavigationTabsItem>
         <NavigationTabsItem to={`${basePath}/${pid}/assets`}>Assets</NavigationTabsItem>
         <NavigationTabsItem to={`${basePath}/${pid}/liquidity`}>Liquidity</NavigationTabsItem>
-        {!isTinlakePool && <NavigationTabsItem to={`${basePath}/${pid}/reporting`}>Reporting</NavigationTabsItem>}
+        {!isTinlakePool && (
+          <NavigationTabsItem to={`${basePath}/${pid}/reporting/balance-sheet`}>Reports</NavigationTabsItem>
+        )}
+        {!isTinlakePool && <NavigationTabsItem to={`${basePath}/${pid}/data/investor-tx`}>Data</NavigationTabsItem>}
         <NavigationTabsItem to={`${basePath}/${pid}/investors`}>Investors</NavigationTabsItem>
         <NavigationTabsItem to={`${basePath}/${pid}/configuration`}>Configuration</NavigationTabsItem>
         <NavigationTabsItem to={`${basePath}/${pid}/access`}>Access</NavigationTabsItem>

diff --git a/centrifuge-app/src/pages/IssuerPool/index.tsx b/centrifuge-app/src/pages/IssuerPool/index.tsx
@@ -32,6 +32,7 @@ export default function IssuerPoolPage() {
         <Route path="liquidity" element={<IssuerPoolLiquidityPage />} />
         <Route path="reporting" element={<IssuerPoolReportingPage />} />
         <Route path="reporting/:report" element={<IssuerPoolReportingPage />} />
+        <Route path="data/:report" element={<IssuerPoolReportingPage />} />
         <Route path="pricing" element={<IssuerPoolPricingPage />} />
         <Route path="fees" element={<IssuerPoolFeesPage />} />
       </Routes>

diff --git a/centrifuge-app/src/pages/Pool/Header.tsx b/centrifuge-app/src/pages/Pool/Header.tsx
@@ -63,7 +63,10 @@ export function PoolDetailHeader({ actions }: Props) {
           <NavigationTabsItem to={`${basePath}/${pid}`}>Overview</NavigationTabsItem>
           <NavigationTabsItem to={`${basePath}/${pid}/assets`}>Assets</NavigationTabsItem>
           <NavigationTabsItem to={`${basePath}/${pid}/liquidity`}>Liquidity</NavigationTabsItem>
-          {!isTinlakePool && <NavigationTabsItem to={`${basePath}/${pid}/reporting`}>Reporting</NavigationTabsItem>}
+          {!isTinlakePool && (
+            <NavigationTabsItem to={`${basePath}/${pid}/reporting/balance-sheet`}>Reports</NavigationTabsItem>
+          )}
+          {!isTinlakePool && <NavigationTabsItem to={`${basePath}/${pid}/data/investor-tx`}>Data</NavigationTabsItem>}
           {!isTinlakePool && <NavigationTabsItem to={`${basePath}/${pid}/fees`}>Fees</NavigationTabsItem>}
         </NavigationTabs>
       </Shelf>

diff --git a/centrifuge-app/src/pages/Pool/index.tsx b/centrifuge-app/src/pages/Pool/index.tsx
@@ -10,6 +10,7 @@ export default function PoolDetailPage() {
     <Routes>
       <Route path="/" element={<PoolDetailOverviewTab />} />
       <Route path="reporting/:report" element={<PoolDetailReportingTab />} />
+      <Route path="data/:report" element={<PoolDetailReportingTab />} />
       <Route path="reporting" element={<PoolDetailReportingTab />} />
       <Route path="liquidity" element={<PoolDetailLiquidityTab />} />
       <Route path="assets" element={<PoolDetailAssetsTab />} />