From f7969b67018bdf1f3b1652a377d7e31c7939aada Mon Sep 17 00:00:00 2001
From: katty barroso <kattybarroso1321@gmail.com>
Date: Wed, 23 Oct 2024 14:40:33 +0200
Subject: [PATCH] Add changes to asset detail page

---
 .../Charts/AssetPerformanceChart.tsx          | 183 ++++++++----------
 .../src/components/LayoutBase/BasePadding.tsx |   2 +-
 centrifuge-app/src/components/LoanList.tsx    |   4 +-
 centrifuge-app/src/components/PoolList.tsx    |   2 +-
 .../PoolOverview/TransactionHistory.tsx       |   4 +-
 .../src/pages/Loan/HoldingsValues.tsx         |   6 +-
 centrifuge-app/src/pages/Loan/KeyMetrics.tsx  |   6 +-
 .../src/pages/Loan/MetricsTable.tsx           |  12 +-
 .../src/pages/Loan/PricingValues.tsx          |  12 +-
 .../src/pages/Loan/TransactionTable.tsx       |  21 +-
 centrifuge-app/src/pages/Loan/index.tsx       | 125 ++++++------
 .../src/pages/Pool/Assets/index.tsx           |   5 +-
 centrifuge-js/src/modules/pools.ts            |   1 +
 fabric/src/components/Card/index.ts           |   6 +-
 fabric/src/theme/tokens/theme.ts              |   2 +-
 15 files changed, 182 insertions(+), 209 deletions(-)

diff --git a/centrifuge-app/src/components/Charts/AssetPerformanceChart.tsx b/centrifuge-app/src/components/Charts/AssetPerformanceChart.tsx
index 85cf10f542..6bc29f5e73 100644
--- a/centrifuge-app/src/components/Charts/AssetPerformanceChart.tsx
+++ b/centrifuge-app/src/components/Charts/AssetPerformanceChart.tsx
@@ -1,11 +1,11 @@
 import { CurrencyBalance, Pool } from '@centrifuge/centrifuge-js'
-import { AnchorButton, Box, Card, IconDownload, Shelf, Spinner, Stack, Text } from '@centrifuge/fabric'
+import { AnchorButton, Box, Card, IconDownload, Shelf, Spinner, Stack, Tabs, TabsItem, Text } from '@centrifuge/fabric'
 import * as React from 'react'
 import { CartesianGrid, Line, LineChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts'
-import styled, { useTheme } from 'styled-components'
+import { useTheme } from 'styled-components'
+import { getCSVDownloadUrl } from '../../../src/utils/getCSVDownloadUrl'
 import { formatDate } from '../../utils/date'
 import { formatBalance, formatBalanceAbbreviated } from '../../utils/formatting'
-import { getCSVDownloadUrl } from '../../utils/getCSVDownloadUrl'
 import { TinlakePool } from '../../utils/tinlake/useTinlakePools'
 import { useLoan } from '../../utils/useLoans'
 import { useAssetSnapshots } from '../../utils/usePools'
@@ -25,50 +25,13 @@ interface Props {
   loanId: string
 }
 
-const FilterButton = styled(Stack)`
-  &:hover {
-    cursor: pointer;
-  }
-`
-
-const filterOptions = [
-  { value: 'price', label: 'Price' },
-  { value: 'value', label: 'Asset value' },
-] as const
-
 function AssetPerformanceChart({ pool, poolId, loanId }: Props) {
   const theme = useTheme()
   const chartColor = theme.colors.accentPrimary
   const asset = useLoan(poolId, loanId)
   const assetSnapshots = useAssetSnapshots(poolId, loanId)
 
-  const [activeFilter, setActiveFilter] = React.useState<(typeof filterOptions)[number]>(filterOptions[0])
-
-  React.useEffect(() => {
-    if (assetSnapshots && assetSnapshots[0]?.currentPrice?.toString() === '0') {
-      setActiveFilter(filterOptions[1])
-    }
-  }, [assetSnapshots])
-
-  const dataUrl: any = React.useMemo(() => {
-    if (!assetSnapshots || !assetSnapshots?.length) {
-      return undefined
-    }
-
-    const formatted = assetSnapshots.map((assetObject: Record<string, any>) => {
-      const keys = Object.keys(assetObject)
-      const newObj: Record<string, any> = {}
-
-      keys.forEach((assetKey) => {
-        newObj[assetKey] =
-          assetObject[assetKey] instanceof CurrencyBalance ? assetObject[assetKey].toFloat() : assetObject[assetKey]
-      })
-
-      return newObj
-    })
-
-    return getCSVDownloadUrl(formatted as any)
-  }, [assetSnapshots])
+  const [selectedTabIndex, setSelectedTabIndex] = React.useState(0)
 
   const data: ChartData[] = React.useMemo(() => {
     if (!asset || !assetSnapshots) return []
@@ -157,58 +120,76 @@ function AssetPerformanceChart({ pool, poolId, loanId }: Props) {
     [data, assetSnapshots]
   )
 
+  const dataUrl: any = React.useMemo(() => {
+    if (!assetSnapshots || !assetSnapshots?.length) {
+      return undefined
+    }
+
+    const formatted = assetSnapshots.map((assetObject: Record<string, any>) => {
+      const keys = Object.keys(assetObject)
+      const newObj: Record<string, any> = {}
+
+      keys.forEach((assetKey) => {
+        newObj[assetKey] =
+          assetObject[assetKey] instanceof CurrencyBalance ? assetObject[assetKey].toFloat() : assetObject[assetKey]
+      })
+
+      return newObj
+    })
+
+    return getCSVDownloadUrl(formatted as any)
+  }, [assetSnapshots])
+
   if (!assetSnapshots) return <Spinner style={{ margin: 'auto', height: 350 }} />
 
   return (
-    <Card p={3} height={350}>
+    <Card p={3} height={320} variant="secondary">
       <Stack gap={2}>
-        <Shelf justifyContent="space-between">
-          <Text fontSize="18px" fontWeight="500">
-            {asset && 'valuationMethod' in asset.pricing && asset?.pricing.valuationMethod !== 'cash'
-              ? 'Asset performance'
-              : 'Cash balance'}
-          </Text>
-          {!isChartEmpty && (
-            <AnchorButton
-              href={dataUrl}
-              download={`asset-${loanId}-timeseries.csv`}
-              variant="inverted"
-              icon={IconDownload}
-              small
-            >
-              Download
-            </AnchorButton>
+        <Box display="flex" justifyContent="space-between" alignItems="center" mb={3}>
+          <Box display="flex">
+            <Text variant="heading4">
+              {asset && 'valuationMethod' in asset.pricing && asset?.pricing.valuationMethod !== 'cash'
+                ? 'Asset performance'
+                : 'Cash balance'}
+            </Text>
+            <Text variant="body2" style={{ marginLeft: 4 }}>
+              ({pool.currency.name ?? 'USD'})
+            </Text>
+          </Box>
+          {!(assetSnapshots && assetSnapshots[0]?.currentPrice?.toString() === '0') && (
+            <Stack>
+              <Shelf justifyContent="flex-end">
+                {data.length > 0 && (
+                  <Tabs selectedIndex={selectedTabIndex} onChange={(index) => setSelectedTabIndex(index)}>
+                    <TabsItem styleOverrides={{ padding: '8px' }} showBorder variant="secondary">
+                      Price
+                    </TabsItem>
+                    <TabsItem styleOverrides={{ padding: '8px' }} showBorder variant="secondary">
+                      Asset value
+                    </TabsItem>
+                  </Tabs>
+                )}
+              </Shelf>
+            </Stack>
           )}
-        </Shelf>
-
-        {isChartEmpty && <Text variant="label1">No data yet</Text>}
-
-        {!(assetSnapshots && assetSnapshots[0]?.currentPrice?.toString() === '0') && (
-          <Stack>
-            <Shelf justifyContent="flex-end">
-              {data.length > 0 &&
-                filterOptions.map((filter, index) => (
-                  <React.Fragment key={filter.label}>
-                    <FilterButton gap={1} onClick={() => setActiveFilter(filter)}>
-                      <Text variant="body3" whiteSpace="nowrap">
-                        <Text variant={filter.value === activeFilter.value && 'emphasized'}>{filter.label}</Text>
-                      </Text>
-                      <Box
-                        width="100%"
-                        backgroundColor={filter.value === activeFilter.value ? '#000000' : '#E0E0E0'}
-                        height="2px"
-                      />
-                    </FilterButton>
-                    {index !== filterOptions.length - 1 && (
-                      <Box width="24px" backgroundColor="#E0E0E0" height="2px" alignSelf="flex-end" />
-                    )}
-                  </React.Fragment>
-                ))}
-            </Shelf>
-          </Stack>
+          <AnchorButton
+            download={`pool-${poolId}-timeseries.csv`}
+            href={dataUrl}
+            variant="inverted"
+            icon={IconDownload}
+            small
+          >
+            Download
+          </AnchorButton>
+        </Box>
+
+        {isChartEmpty && (
+          <Text variant="body3" style={{ margin: '80px auto 0px' }}>
+            No data available
+          </Text>
         )}
 
-        <Shelf gap={4} width="100%" color="textSecondary">
+        <Shelf gap={4} width="100%">
           {data?.length ? (
             <ResponsiveContainer width="100%" height={200} minHeight={200} maxHeight={200}>
               <LineChart data={data} margin={{ left: -36 }}>
@@ -225,7 +206,7 @@ function AssetPerformanceChart({ pool, poolId, loanId }: Props) {
                   tickFormatter={(tick: number) => {
                     return new Date(tick).toLocaleString('en-US', { day: 'numeric', month: 'short' })
                   }}
-                  style={{ fontSize: 8, fill: theme.colors.textSecondary, letterSpacing: '-0.7px' }}
+                  style={{ fontSize: 8, fill: theme.colors.textPrimary, letterSpacing: '-0.7px' }}
                   dy={4}
                   interval={10}
                   angle={-40}
@@ -234,9 +215,9 @@ function AssetPerformanceChart({ pool, poolId, loanId }: Props) {
                 <YAxis
                   stroke="none"
                   tickLine={false}
-                  style={{ fontSize: '10px', fill: theme.colors.textSecondary }}
+                  style={{ fontSize: '10px', fill: theme.colors.textPrimary }}
                   tickFormatter={(tick: number) => formatBalanceAbbreviated(tick, '', 2)}
-                  domain={activeFilter.value === 'price' ? priceRange : [0, 'auto']}
+                  domain={selectedTabIndex === 0 ? priceRange : [0, 'auto']}
                   width={90}
                 />
                 <CartesianGrid stroke={theme.colors.borderPrimary} vertical={false} />
@@ -249,22 +230,22 @@ function AssetPerformanceChart({ pool, poolId, loanId }: Props) {
                           {payload.map(({ value }, index) => (
                             <>
                               <Shelf justifyContent="space-between" pl="4px" key={index}>
-                                <Text variant="label2">{'Value'}</Text>
-                                <Text variant="label2">
+                                <Text variant="body3">{'Value'}</Text>
+                                <Text variant="body3">
                                   {payload[0].payload.historicPV
-                                    ? formatBalance(payload[0].payload.historicPV, 'USD', 2)
+                                    ? formatBalance(payload[0].payload.historicPV, pool.currency.name, 2)
                                     : payload[0].payload.futurePV
-                                    ? `~${formatBalance(payload[0].payload.futurePV, 'USD', 2)}`
+                                    ? `~${formatBalance(payload[0].payload.futurePV, pool.currency.name, 2)}`
                                     : '-'}
                                 </Text>
                               </Shelf>
                               <Shelf justifyContent="space-between" pl="4px" key={index}>
-                                <Text variant="label2">{'Price'}</Text>
-                                <Text variant="label2">
+                                <Text variant="body3">Price</Text>
+                                <Text variant="body3">
                                   {payload[0].payload.historicPrice
-                                    ? formatBalance(payload[0].payload.historicPrice, 'USD', 6)
+                                    ? formatBalance(payload[0].payload.historicPrice, pool.currency.name, 6)
                                     : payload[0].payload.futurePrice
-                                    ? `~${formatBalance(payload[0].payload.futurePrice, 'USD', 6)}`
+                                    ? `~${formatBalance(payload[0].payload.futurePrice, pool.currency.name, 6)}`
                                     : '-'}
                                 </Text>
                               </Shelf>
@@ -277,7 +258,7 @@ function AssetPerformanceChart({ pool, poolId, loanId }: Props) {
                   }}
                 />
 
-                {activeFilter.value === 'price' && (
+                {selectedTabIndex === 0 && (
                   <Line
                     type="monotone"
                     dataKey="historicPrice"
@@ -286,7 +267,7 @@ function AssetPerformanceChart({ pool, poolId, loanId }: Props) {
                     dot={false}
                   />
                 )}
-                {activeFilter.value === 'price' && (
+                {selectedTabIndex === 0 && (
                   <Line
                     type="monotone"
                     dataKey="futurePrice"
@@ -297,7 +278,7 @@ function AssetPerformanceChart({ pool, poolId, loanId }: Props) {
                   />
                 )}
 
-                {activeFilter.value === 'value' && (
+                {selectedTabIndex === 1 && (
                   <Line
                     type="monotone"
                     dataKey="historicPV"
@@ -306,7 +287,7 @@ function AssetPerformanceChart({ pool, poolId, loanId }: Props) {
                     dot={false}
                   />
                 )}
-                {activeFilter.value === 'value' && (
+                {selectedTabIndex === 1 && (
                   <Line
                     type="monotone"
                     dataKey="futurePV"
diff --git a/centrifuge-app/src/components/LayoutBase/BasePadding.tsx b/centrifuge-app/src/components/LayoutBase/BasePadding.tsx
index 54e8662da8..6d9427b766 100644
--- a/centrifuge-app/src/components/LayoutBase/BasePadding.tsx
+++ b/centrifuge-app/src/components/LayoutBase/BasePadding.tsx
@@ -5,7 +5,7 @@ type BaseSectionProps = BoxProps & {
   children: React.ReactNode
 }
 
-export const BASE_PADDING = [2, 2, 3, 3, 5]
+export const BASE_PADDING = [3, 3, 3, 3, 3]
 
 export function BasePadding({ children, ...boxProps }: BaseSectionProps) {
   return (
diff --git a/centrifuge-app/src/components/LoanList.tsx b/centrifuge-app/src/components/LoanList.tsx
index 7bd5e07a19..9e384768d0 100644
--- a/centrifuge-app/src/components/LoanList.tsx
+++ b/centrifuge-app/src/components/LoanList.tsx
@@ -93,6 +93,7 @@ export function LoanList({ loans }: Props) {
       loan.status === 'Closed' || totalMarketValue === 0 ? 0 : (marketValue / totalMarketValue) * 100
 
     return {
+      ...snapshot,
       nftIdSortKey: loan.asset.nftId,
       idSortKey: parseInt(loan.id, 10),
       outstandingDebtSortKey: loan.status !== 'Closed' && loan?.outstandingDebt?.toDecimal().toNumber(),
@@ -106,7 +107,6 @@ export function LoanList({ loans }: Props) {
           : '',
       maturityDate: loan.pricing.maturityDate,
       portfolioPercentage,
-      ...snapshot,
       ...loan,
     }
   })
@@ -220,7 +220,7 @@ export function LoanList({ loans }: Props) {
     <PaginationContainer pagination={pagination}>
       <Stack gap={2}>
         <LoadBoundary>
-          <Box overflow="auto" width="100%" borderWidth="0 1px" borderStyle="solid" borderColor="borderPrimary">
+          <Box overflow="auto">
             <DataTable
               data={rows}
               columns={columns}
diff --git a/centrifuge-app/src/components/PoolList.tsx b/centrifuge-app/src/components/PoolList.tsx
index 337c667a2e..0571eec5c5 100644
--- a/centrifuge-app/src/components/PoolList.tsx
+++ b/centrifuge-app/src/components/PoolList.tsx
@@ -86,7 +86,7 @@ export function PoolList() {
               ? Array(6)
                   .fill(true)
                   .map((_, index) => (
-                    <Box as="li" key={index} width={isLarge ? '33%' : isMedium ? '48%' : '100%'}>
+                    <Box as="li" key={index}>
                       <PoolCard />
                     </Box>
                   ))
diff --git a/centrifuge-app/src/components/PoolOverview/TransactionHistory.tsx b/centrifuge-app/src/components/PoolOverview/TransactionHistory.tsx
index 85f45698de..610632ca31 100644
--- a/centrifuge-app/src/components/PoolOverview/TransactionHistory.tsx
+++ b/centrifuge-app/src/components/PoolOverview/TransactionHistory.tsx
@@ -286,9 +286,7 @@ export const TransactionHistoryTable = ({
   return (
     <Stack gap={2}>
       <Shelf justifyContent="space-between">
-        <Text fontSize="18px" fontWeight="500">
-          Transaction history
-        </Text>
+        <Text variant="heading4">Transaction history</Text>
         <Shelf>
           {transactions?.length! > 8 && preview && (
             <AnchorButton href={`#/pools/${poolId}/transactions`} small variant="inverted">
diff --git a/centrifuge-app/src/pages/Loan/HoldingsValues.tsx b/centrifuge-app/src/pages/Loan/HoldingsValues.tsx
index 8f9146f16a..d3ba229f84 100644
--- a/centrifuge-app/src/pages/Loan/HoldingsValues.tsx
+++ b/centrifuge-app/src/pages/Loan/HoldingsValues.tsx
@@ -74,11 +74,9 @@ export function HoldingsValues({ pool, transactions, currentFace, pricing }: Pro
   ]
 
   return (
-    <Card p={3}>
+    <Card p={3} variant="secondary">
       <Stack gap={2}>
-        <Text fontSize="18px" fontWeight="500">
-          Holdings
-        </Text>
+        <Text variant="heading4">Holdings</Text>
         <MetricsTable metrics={metrics} />
       </Stack>
     </Card>
diff --git a/centrifuge-app/src/pages/Loan/KeyMetrics.tsx b/centrifuge-app/src/pages/Loan/KeyMetrics.tsx
index 3d5bb53459..ef9838db29 100644
--- a/centrifuge-app/src/pages/Loan/KeyMetrics.tsx
+++ b/centrifuge-app/src/pages/Loan/KeyMetrics.tsx
@@ -155,11 +155,9 @@ export function KeyMetrics({ pool, loan }: Props) {
   ]
 
   return (
-    <Card p={3}>
+    <Card p={3} variant="secondary">
       <Stack gap={2}>
-        <Text fontSize="18px" fontWeight="500">
-          Key metrics
-        </Text>
+        <Text variant="heading4">Key metrics</Text>
         <MetricsTable metrics={metrics} />
       </Stack>
     </Card>
diff --git a/centrifuge-app/src/pages/Loan/MetricsTable.tsx b/centrifuge-app/src/pages/Loan/MetricsTable.tsx
index 431ebc3425..dedc335393 100644
--- a/centrifuge-app/src/pages/Loan/MetricsTable.tsx
+++ b/centrifuge-app/src/pages/Loan/MetricsTable.tsx
@@ -12,7 +12,7 @@ type Props = {
 
 export function MetricsTable({ metrics }: Props) {
   return (
-    <Box borderStyle="solid" borderWidth="1px" borderColor="borderPrimary">
+    <Box>
       {metrics.map(({ label, value }, index) => {
         const multirow = value && value.length > 20
         const asLink = value && /^(https?:\/\/[^\s]+)$/.test(value)
@@ -33,25 +33,21 @@ export function MetricsTable({ metrics }: Props) {
             }
           : {}
 
-        const combinedStyle: React.CSSProperties = { ...defaultStyle, ...multiRowStyle }
+        const combinedStyle: React.CSSProperties = { ...defaultStyle, ...multiRowStyle, textAlign: 'right' }
 
         return (
           <Grid
-            borderBottomStyle={index === metrics.length - 1 ? 'none' : 'solid'}
-            borderBottomWidth={index === metrics.length - 1 ? '0' : '1px'}
-            borderBottomColor={index === metrics.length - 1 ? 'none' : 'borderPrimary'}
             key={index}
-            px={1}
             gridTemplateColumns="1fr 1fr"
             width="100%"
             alignItems="center"
             gap={2}
             height={multirow ? 'auto' : 32}
           >
-            <Text variant="body3" textOverflow="ellipsis" whiteSpace="nowrap">
+            <Text color="textSecondary" variant="body2" textOverflow="ellipsis" whiteSpace="nowrap">
               {label}
             </Text>
-            <Text variant="body3" style={combinedStyle}>
+            <Text variant="heading4" style={combinedStyle}>
               {asLink ? <AnchorTextLink href={value}>{value}</AnchorTextLink> : value}
             </Text>
           </Grid>
diff --git a/centrifuge-app/src/pages/Loan/PricingValues.tsx b/centrifuge-app/src/pages/Loan/PricingValues.tsx
index 4d095fa314..9ac7e84218 100644
--- a/centrifuge-app/src/pages/Loan/PricingValues.tsx
+++ b/centrifuge-app/src/pages/Loan/PricingValues.tsx
@@ -59,11 +59,9 @@ export function PricingValues({ loan, pool }: Props) {
     const accruedPrice = 'currentPrice' in loan && loan.currentPrice
 
     return (
-      <Card p={3}>
+      <Card p={3} variant="secondary">
         <Stack gap={2}>
-          <Text fontSize="18px" fontWeight="500">
-            Pricing
-          </Text>
+          <Text variant="heading4">Pricing</Text>
           <MetricsTable
             metrics={[
               ...('isin' in pricing.priceId ? [{ label: 'ISIN', value: pricing.priceId.isin }] : []),
@@ -76,7 +74,7 @@ export function PricingValues({ loan, pool }: Props) {
                   : '-',
               },
               {
-                label: <Tooltips type="linearAccrual" />,
+                label: <Tooltips type="linearAccrual" size="med" />,
                 value: pricing.withLinearPricing ? 'Enabled' : 'Disabled',
               },
               ...(loan.status === 'Active' && loan.outstandingDebt.toDecimal().lte(0)
@@ -102,9 +100,7 @@ export function PricingValues({ loan, pool }: Props) {
   return (
     <Card p={3}>
       <Stack gap={2}>
-        <Text fontSize="18px" fontWeight="500">
-          Pricing
-        </Text>
+        <Text variant="heading4">Pricing</Text>
         <MetricsTable
           metrics={[
             ...('valuationMethod' in pricing && pricing.valuationMethod !== 'cash'
diff --git a/centrifuge-app/src/pages/Loan/TransactionTable.tsx b/centrifuge-app/src/pages/Loan/TransactionTable.tsx
index 3ce9bcda10..728654a726 100644
--- a/centrifuge-app/src/pages/Loan/TransactionTable.tsx
+++ b/centrifuge-app/src/pages/Loan/TransactionTable.tsx
@@ -19,6 +19,7 @@ type Props = {
   poolType?: string
   maturityDate?: Date
   originationDate: Date | undefined
+  isLoanClosed: boolean
 }
 
 type Row = {
@@ -31,6 +32,7 @@ type Row = {
   position: Decimal
   yieldToMaturity: Decimal | null
   realizedProfitFifo: CurrencyBalance | null
+  unrealizedProfitAtMarketPrice: CurrencyBalance | null
 }
 
 export const TransactionTable = ({
@@ -41,6 +43,7 @@ export const TransactionTable = ({
   pricing,
   poolType,
   maturityDate,
+  isLoanClosed,
 }: Props) => {
   const assetTransactions = useMemo(() => {
     const sortedTransactions = transactions?.sort((a, b) => {
@@ -77,6 +80,8 @@ export const TransactionTable = ({
                 .mul((pricing as ExternalPricingInfo).notional.toDecimal())
             : null
 
+        console.log(isLoanClosed, transaction)
+
         return {
           type: transaction.type,
           amount: transaction.amount,
@@ -97,7 +102,7 @@ export const TransactionTable = ({
           position: array.slice(0, index + 1).reduce((sum, trx) => {
             if (trx.type === 'BORROWED') {
               sum = sum.add(
-                trx.quantity
+                trx.quantity && (pricing as ExternalPricingInfo)?.notional
                   ? new CurrencyBalance(trx.quantity, 18)
                       .toDecimal()
                       .mul((pricing as ExternalPricingInfo).notional.toDecimal())
@@ -108,7 +113,7 @@ export const TransactionTable = ({
             }
             if (trx.type === 'REPAID') {
               sum = sum.sub(
-                trx.quantity
+                trx.quantity && (pricing as ExternalPricingInfo)?.notional
                   ? new CurrencyBalance(trx.quantity, 18)
                       .toDecimal()
                       .mul((pricing as ExternalPricingInfo).notional.toDecimal())
@@ -120,6 +125,7 @@ export const TransactionTable = ({
             return sum
           }, Dec(0)),
           realizedProfitFifo: transaction.realizedProfitFifo,
+          unrealizedProfitAtMarketPrice: transaction.unrealizedProfitAtMarketPrice,
         }
       })
   }, [transactions, maturityDate, pricing, decimals])
@@ -214,10 +220,15 @@ export const TransactionTable = ({
           },
           {
             align: 'left',
-            header: `Realized P&L`,
+            header: isLoanClosed ? 'Realized P&L' : 'Unrealized P&L',
             cell: (row: Row) =>
-              row.realizedProfitFifo
-                ? `${row.type !== 'REPAID' ? '-' : ''}${formatBalance(row.realizedProfitFifo, undefined, 2, 2)}`
+              row.realizedProfitFifo || row.unrealizedProfitAtMarketPrice
+                ? formatBalance(
+                    isLoanClosed ? row.unrealizedProfitAtMarketPrice ?? 0 : row.realizedProfitFifo ?? 0,
+                    undefined,
+                    2,
+                    2
+                  )
                 : '-',
           },
         ]),
diff --git a/centrifuge-app/src/pages/Loan/index.tsx b/centrifuge-app/src/pages/Loan/index.tsx
index 39454bb592..9ec2e0eb1a 100644
--- a/centrifuge-app/src/pages/Loan/index.tsx
+++ b/centrifuge-app/src/pages/Loan/index.tsx
@@ -14,9 +14,9 @@ import {
 } from '@centrifuge/fabric'
 import * as React from 'react'
 import { useParams } from 'react-router'
-import styled, { useTheme } from 'styled-components'
+import styled from 'styled-components'
+import { AssetSummary } from '../../../src/components/AssetSummary'
 import { LoanLabel } from '../../../src/components/LoanLabel'
-import { AssetSummary } from '../../components/AssetSummary'
 import AssetPerformanceChart from '../../components/Charts/AssetPerformanceChart'
 import { LabelValueStack } from '../../components/LabelValueStack'
 import { LayoutSection } from '../../components/LayoutBase/LayoutSection'
@@ -60,13 +60,14 @@ function isTinlakeLoan(loan: LoanType | TinlakeLoan): loan is TinlakeLoan {
 }
 
 function ActionButtons({ loan }: { loan: LoanType }) {
+  if (!loan) return
   const canBorrow = useCanBorrowAsset(loan.poolId, loan.id)
   const [financeShown, setFinanceShown] = React.useState(false)
   const [repayShown, setRepayShown] = React.useState(false)
   const [correctionShown, setCorrectionShown] = React.useState(false)
   if (!loan || !canBorrow || isTinlakeLoan(loan) || !canBorrow || loan.status === 'Closed') return null
   return (
-    <>
+    <Box marginLeft="auto">
       <Drawer isOpen={financeShown} onClose={() => setFinanceShown(false)} innerPaddingTop={2}>
         <LoadBoundary>
           <FinanceForm loan={loan} />
@@ -90,27 +91,26 @@ function ActionButtons({ loan }: { loan: LoanType }) {
       <Shelf gap={2}>
         {!(loan.pricing.maturityDate && new Date() > new Date(loan.pricing.maturityDate)) ||
         !loan.pricing.maturityDate ? (
-          <Button onClick={() => setFinanceShown(true)} small>
+          <Button onClick={() => setFinanceShown(true)} small variant="secondary">
             {isCashLoan(loan) ? 'Deposit' : isExternalLoan(loan) ? 'Purchase' : 'Finance'}
           </Button>
         ) : null}
         {loan.outstandingDebt.gtn(0) && (
-          <Button onClick={() => setRepayShown(true)} small>
+          <Button onClick={() => setRepayShown(true)} small variant="inverted">
             {isCashLoan(loan) ? 'Withdraw' : isExternalLoan(loan) ? 'Sell' : 'Repay'}
           </Button>
         )}
         {loan.outstandingDebt.gtn(0) && (
-          <Button onClick={() => setCorrectionShown(true)} small>
+          <Button onClick={() => setCorrectionShown(true)} small variant="inverted">
             Correction
           </Button>
         )}
       </Shelf>
-    </>
+    </Box>
   )
 }
 
 function Loan() {
-  const theme = useTheme()
   const { pid: poolId, aid: loanId } = useParams<{ pid: string; aid: string }>()
   if (!poolId || !loanId) throw new Error('Loan no found')
   const basePath = useBasePath()
@@ -122,6 +122,7 @@ function Loan() {
   const { data: nftMetadata, isLoading: nftMetadataIsLoading } = useMetadata(nft?.metadataUri, nftMetadataSchema)
   const metadataIsLoading = poolMetadataIsLoading || nftMetadataIsLoading
   const borrowerAssetTransactions = useBorrowerAssetTransactions(`${poolId}`, `${loanId}`)
+  const isOracle = loan && 'valuationMethod' in loan.pricing && loan.pricing.valuationMethod === 'oracle'
 
   const currentFace =
     loan?.pricing && 'outstandingQuantity' in loan.pricing
@@ -147,6 +148,13 @@ function Loan() {
 
   const originationDate = loan && 'originationDate' in loan ? new Date(loan?.originationDate).toISOString() : undefined
 
+  const getCurrentValue = () => {
+    if (loanId === '0') return pool.reserve.total
+    else return loan?.presentValue || 0
+  }
+
+  if (metadataIsLoading) return
+
   return (
     <FullHeightStack>
       <Box display="flex" alignItems="center" width="50%" justifyContent="space-between" mt={15} mb={24}>
@@ -159,33 +167,34 @@ function Loan() {
         </Box>
       </Box>
 
+      <AssetSummary
+        data={[
+          {
+            label: 'Current value',
+            value: `${formatBalance(getCurrentValue(), pool.currency.symbol, 2, 2)}`,
+          },
+        ]}
+      >
+        <ActionButtons loan={loan} />
+      </AssetSummary>
+
       {loanId === '0' && (
-        <>
-          <AssetSummary
-            data={[
-              {
-                label: 'Current value',
-                value: `${formatBalance(pool.reserve.total, pool.currency.symbol, 2, 2)}`,
-              },
-            ]}
+        <PageSection>
+          <TransactionHistoryTable
+            transactions={borrowerAssetTransactions ?? []}
+            poolId={poolId}
+            preview={false}
+            activeAssetId={loanId}
           />
-          <PageSection>
-            <TransactionHistoryTable
-              transactions={borrowerAssetTransactions ?? []}
-              poolId={poolId}
-              preview={false}
-              activeAssetId={loanId}
-            />
-          </PageSection>
-        </>
+        </PageSection>
       )}
       {loan && pool && (
-        <LayoutSection bg={theme.colors.backgroundSecondary} pt={2} pb={4} flex={1}>
-          <Grid height="fit-content" gridTemplateColumns={['1fr', '66fr 34fr']} gap={[2, 2]}>
+        <LayoutSection pt={2} pb={4} flex={1}>
+          <Grid height="fit-content" gridTemplateColumns={isOracle ? ['1fr', '66fr 34fr'] : ['1fr']} gap={[2, 2]}>
             <React.Suspense fallback={<Spinner />}>
               <AssetPerformanceChart pool={pool} poolId={poolId} loanId={loanId} />
             </React.Suspense>
-            {'valuationMethod' in loan.pricing && loan.pricing.valuationMethod === 'oracle' && (
+            {isOracle && (
               <React.Suspense fallback={<Spinner />}>
                 <KeyMetrics pool={pool} loan={loan} />
               </React.Suspense>
@@ -198,7 +207,7 @@ function Loan() {
             gridAutoRows="minContent"
             gap={[2, 2, 2]}
           >
-            {'valuationMethod' in loan.pricing && loan.pricing.valuationMethod === 'oracle' && (
+            {isOracle && (
               <React.Suspense fallback={<Spinner />}>
                 <HoldingsValues
                   pool={pool as Pool}
@@ -220,11 +229,9 @@ function Loan() {
               if (!isPublic) return null
               return (
                 <React.Suspense fallback={<Spinner />}>
-                  <Card p={3}>
+                  <Card p={3} variant="secondary">
                     <Stack gap={2}>
-                      <Text fontSize="18px" fontWeight="500">
-                        {section.name}
-                      </Text>
+                      <Text variant="heading4">{section.name}</Text>
                       <MetricsTable
                         metrics={section.attributes
                           .filter(
@@ -251,39 +258,29 @@ function Loan() {
           </Grid>
 
           {borrowerAssetTransactions?.length ? (
-            'valuationMethod' in loan.pricing && loan.pricing.valuationMethod === 'cash' ? (
-              <Card p={3}>
-                <TransactionHistoryTable
-                  transactions={borrowerAssetTransactions ?? []}
-                  poolId={poolId}
-                  preview={false}
-                  activeAssetId={loanId}
-                />
-              </Card>
+            'valuationMethod' in loan.pricing && loan.pricing.valuationMethod !== 'cash' ? (
+              <TransactionHistoryTable
+                transactions={borrowerAssetTransactions ?? []}
+                poolId={poolId}
+                preview={false}
+                activeAssetId={loanId}
+              />
             ) : (
               <Grid height="fit-content" gridTemplateColumns={['1fr']} gap={[2, 2, 3]}>
-                <Card p={3}>
-                  <Stack gap={2}>
-                    <Text fontSize="18px" fontWeight="500">
-                      Transaction history
-                    </Text>
-
-                    <TransactionTable
-                      transactions={borrowerAssetTransactions}
-                      currency={pool.currency.symbol}
-                      loanType={
-                        'valuationMethod' in loan.pricing && loan.pricing.valuationMethod === 'oracle'
-                          ? 'external'
-                          : 'internal'
-                      }
-                      poolType={poolMetadata?.pool?.asset.class}
-                      decimals={pool.currency.decimals}
-                      pricing={loan.pricing as PricingInfo}
-                      maturityDate={loan.pricing.maturityDate ? new Date(loan.pricing.maturityDate) : undefined}
-                      originationDate={originationDate ? new Date(originationDate) : undefined}
-                    />
-                  </Stack>
-                </Card>
+                <Stack gap={2}>
+                  <Text variant="heading4">Transaction history</Text>
+                  <TransactionTable
+                    transactions={borrowerAssetTransactions}
+                    currency={pool.currency.symbol}
+                    loanType={isOracle ? 'external' : 'internal'}
+                    poolType={poolMetadata?.pool?.asset.class}
+                    decimals={pool.currency.decimals}
+                    pricing={loan.pricing as PricingInfo}
+                    maturityDate={loan.pricing.maturityDate ? new Date(loan.pricing.maturityDate) : undefined}
+                    originationDate={originationDate ? new Date(originationDate) : undefined}
+                    isLoanClosed={loan.status === 'Closed'}
+                  />
+                </Stack>
               </Grid>
             )
           ) : null}
diff --git a/centrifuge-app/src/pages/Pool/Assets/index.tsx b/centrifuge-app/src/pages/Pool/Assets/index.tsx
index c5f08a57d6..deacc444f1 100644
--- a/centrifuge-app/src/pages/Pool/Assets/index.tsx
+++ b/centrifuge-app/src/pages/Pool/Assets/index.tsx
@@ -48,9 +48,6 @@ export function PoolDetailAssets() {
   const cashLoans = (loans ?? []).filter(
     (loan) => 'valuationMethod' in loan.pricing && loan.pricing.valuationMethod === 'cash'
   )
-  const nonCashLoans = (loans ?? []).filter(
-    (loan) => 'valuationMethod' in loan.pricing && loan.pricing.valuationMethod !== 'cash'
-  )
 
   if (!pool) return null
 
@@ -100,7 +97,7 @@ export function PoolDetailAssets() {
       ),
       heading: false,
     },
-    ...(!isTinlakePool
+    ...(!isTinlakePool && cashLoans.length
       ? [
           {
             label: <Tooltips type="offchainCash" />,
diff --git a/centrifuge-js/src/modules/pools.ts b/centrifuge-js/src/modules/pools.ts
index 0ed530b3a9..064e0fe4cb 100644
--- a/centrifuge-js/src/modules/pools.ts
+++ b/centrifuge-js/src/modules/pools.ts
@@ -849,6 +849,7 @@ export type AssetTransaction = {
   interestAmount: CurrencyBalance | undefined
   hash: string
   realizedProfitFifo: CurrencyBalance | undefined
+  unrealizedProfitAtMarketPrice: CurrencyBalance | undefined
   asset: {
     id: string
     metadata: string
diff --git a/fabric/src/components/Card/index.ts b/fabric/src/components/Card/index.ts
index 52f34e9528..79e5894cdf 100644
--- a/fabric/src/components/Card/index.ts
+++ b/fabric/src/components/Card/index.ts
@@ -3,7 +3,7 @@ import styled from 'styled-components'
 import { Box, BoxProps } from '../Box'
 
 type Props = {
-  variant?: 'default' | 'interactive' | 'overlay'
+  variant?: 'default' | 'interactive' | 'overlay' | 'secondary'
   backgroundColor?: string
 }
 
@@ -14,9 +14,9 @@ export const Card = styled(Box)<Props>(({ variant = 'default', backgroundColor }
   css({
     bg: backgroundColor ?? 'white',
     borderRadius: 'card',
-    borderWidth: variant === 'default' && !backgroundColor ? 1 : 0,
+    borderWidth: variant === 'default' || (variant === 'secondary' && !backgroundColor) ? 1 : 0,
     borderStyle: 'solid',
-    borderColor: 'borderPrimary',
+    borderColor: variant === 'secondary' ? 'borderSecondary' : 'borderPrimary',
     boxShadow: variant === 'interactive' ? 'cardInteractive' : variant === 'overlay' ? 'cardOverlay' : undefined,
     transition: 'box-shadow 100ms ease',
 
diff --git a/fabric/src/theme/tokens/theme.ts b/fabric/src/theme/tokens/theme.ts
index f98a440659..68381867ce 100644
--- a/fabric/src/theme/tokens/theme.ts
+++ b/fabric/src/theme/tokens/theme.ts
@@ -32,7 +32,7 @@ const colors = {
   backgroundInverted: grayScale[800],
 
   borderPrimary: grayScale[50],
-  borderSecondary: 'rgba(207, 207, 207, 0.50)',
+  borderSecondary: grayScale[100],
 
   statusDefault,
   statusInfo,