From 52a1cbc49383b1233988e830c5409325a36c3b5c Mon Sep 17 00:00:00 2001
From: katty barroso <kattybarroso1321@gmail.com>
Date: Mon, 21 Oct 2024 15:42:54 +0200
Subject: [PATCH] Add new header to assets page

---
 centrifuge-app/src/components/PageSummary.tsx | 26 ++++---
 .../src/components/Report/BalanceSheet.tsx    |  2 +-
 .../src/pages/Pool/Assets/index.tsx           | 67 ++++++-------------
 3 files changed, 37 insertions(+), 58 deletions(-)

diff --git a/centrifuge-app/src/components/PageSummary.tsx b/centrifuge-app/src/components/PageSummary.tsx
index 17d1dac6b4..edf769f8f7 100644
--- a/centrifuge-app/src/components/PageSummary.tsx
+++ b/centrifuge-app/src/components/PageSummary.tsx
@@ -1,4 +1,4 @@
-import { Shelf, Stack, Text } from '@centrifuge/fabric'
+import { Box, Shelf, Stack, Text } from '@centrifuge/fabric'
 import * as React from 'react'
 import { useTheme } from 'styled-components'
 
@@ -6,6 +6,7 @@ type Props = {
   data?: {
     label: React.ReactNode
     value: React.ReactNode
+    heading?: boolean
   }[]
   children?: React.ReactNode
 }
@@ -14,21 +15,24 @@ export function PageSummary({ data, children }: Props) {
   const theme = useTheme()
   return (
     <Shelf
-      bg={theme.colors.backgroundPrimary}
-      gap="6"
-      pl={[2, 6]}
-      py="3"
-      style={{
-        boxShadow: `0 1px 0 ${theme.colors.borderPrimary}`,
-      }}
+      bg={theme.colors.backgroundSecondary}
+      gap={4}
+      margin={3}
+      padding={2}
+      border={`1px solid ${theme.colors.borderSecondary}`}
+      borderRadius={10}
+      justifyContent="space-between"
+      flexWrap="wrap"
     >
-      {data?.map(({ label, value }, index) => (
+      {data?.map(({ label, value, heading }, index) => (
         <Stack gap="4px" key={`${value}-${label}-${index}`}>
           <Text variant="body3">{label}</Text>
-          <Text variant="heading3">{value}</Text>
+          <Text as="h2" variant={heading ? 'heading' : 'heading2'}>
+            {value}
+          </Text>
         </Stack>
       ))}
-      {children}
+      <Box marginLeft="auto">{children}</Box>
     </Shelf>
   )
 }
diff --git a/centrifuge-app/src/components/Report/BalanceSheet.tsx b/centrifuge-app/src/components/Report/BalanceSheet.tsx
index 7f1169276f..ff93e44356 100644
--- a/centrifuge-app/src/components/Report/BalanceSheet.tsx
+++ b/centrifuge-app/src/components/Report/BalanceSheet.tsx
@@ -76,7 +76,7 @@ export function BalanceSheet({ pool }: { pool: Pool }) {
     ]
       .concat(
         poolStates.map((state, index) => ({
-          align: 'right',
+          align: 'left',
           timestamp: state.timestamp,
           header: new Date(state.timestamp).toLocaleDateString('en-US', {
             day: 'numeric',
diff --git a/centrifuge-app/src/pages/Pool/Assets/index.tsx b/centrifuge-app/src/pages/Pool/Assets/index.tsx
index e7345950b7..11651dc44e 100644
--- a/centrifuge-app/src/pages/Pool/Assets/index.tsx
+++ b/centrifuge-app/src/pages/Pool/Assets/index.tsx
@@ -1,10 +1,7 @@
-import { ActiveLoan, Loan } from '@centrifuge/centrifuge-js'
-import { Box, Shelf, Text } from '@centrifuge/fabric'
+import { CurrencyBalance, Loan } from '@centrifuge/centrifuge-js'
+import { Box, IconPlus, Shelf, Text } from '@centrifuge/fabric'
 import * as React from 'react'
 import { useParams } from 'react-router'
-import currencyDollar from '../../../assets/images/currency-dollar.svg'
-import daiLogo from '../../../assets/images/dai-logo.svg'
-import usdcLogo from '../../../assets/images/usdc-logo.svg'
 import { LoadBoundary } from '../../../components/LoadBoundary'
 import { LoanList } from '../../../components/LoanList'
 import { PageSummary } from '../../../components/PageSummary'
@@ -48,19 +45,10 @@ export function PoolDetailAssets() {
     )
   }
 
-  function hasValuationMethod(pricing: any): pricing is { valuationMethod: string } {
+  function hasValuationMethod(pricing: any): pricing is { valuationMethod: string; presentValue: CurrencyBalance } {
     return pricing && typeof pricing.valuationMethod === 'string'
   }
 
-  const ongoingAssets = (loans &&
-    [...loans].filter(
-      (loan) =>
-        loan.status === 'Active' &&
-        hasValuationMethod(loan.pricing) &&
-        loan.pricing.valuationMethod !== 'cash' &&
-        !loan.outstandingDebt.isZero()
-    )) as ActiveLoan[]
-
   const offchainAssets = !isTinlakePool
     ? loans.filter(
         (loan) => hasValuationMethod((loan as Loan).pricing) && (loan as Loan).pricing.valuationMethod === 'cash'
@@ -71,48 +59,35 @@ export function PoolDetailAssets() {
     Dec(0)
   )
 
-  const overdueAssets = loans.filter(
-    (loan) =>
-      loan.status === 'Active' &&
-      loan.outstandingDebt.gtn(0) &&
-      loan.pricing.maturityDate &&
-      new Date(loan.pricing.maturityDate).getTime() < Date.now()
-  )
+  const totalPresentValue = loans.reduce((sum, loan) => {
+    if (hasValuationMethod(loan.pricing) && loan.pricing.valuationMethod !== 'cash') {
+      return sum.add(loan.pricing.presentValue?.toDecimal() || Dec(0))
+    }
+    return sum
+  }, Dec(0))
 
-  const pageSummaryData: { label: React.ReactNode; value: React.ReactNode }[] = [
+  const pageSummaryData: { label: React.ReactNode; value: React.ReactNode; heading?: boolean }[] = [
     {
-      label: <Tooltips type="totalNav" />,
+      label: 'Total NAV',
       value: formatBalance(pool.nav.total.toDecimal(), pool.currency.symbol),
+      heading: true,
     },
     {
-      label: (
-        <Shelf alignItems="center" gap="2px">
-          <Box as="img" src={isTinlakePool ? daiLogo : usdcLogo} alt="" height={13} width={13} />
-          <Tooltips type="onchainReserve" />
-        </Shelf>
-      ),
+      label: <Tooltips type="onchainReserve" />,
       value: formatBalance(pool.reserve.total || 0, pool.currency.symbol),
+      heading: false,
     },
     ...(!isTinlakePool
       ? [
           {
-            label: (
-              <Shelf alignItems="center" gap="2px">
-                <Box as="img" src={currencyDollar} alt="" height={13} width={13} />
-                <Tooltips type="offchainCash" />
-              </Shelf>
-            ),
-            value: formatBalance(offchainReserve, 'USD'),
+            label: <Tooltips type="offchainCash" />,
+            value: formatBalance(offchainReserve, pool.currency.symbol),
+            heading: false,
           },
           {
             label: 'Total assets',
-            value: loans.filter((loan) => hasValuationMethod(loan.pricing) && loan.pricing.valuationMethod !== 'cash')
-              .length,
-          },
-          { label: <Tooltips type="ongoingAssets" />, value: ongoingAssets.length || 0 },
-          {
-            label: 'Overdue assets',
-            value: <Text color={overdueAssets.length > 0 ? 'statusCritical' : 'inherit'}>{overdueAssets.length}</Text>,
+            value: formatBalance(totalPresentValue, pool.currency.symbol),
+            heading: false,
           },
         ]
       : []),
@@ -134,8 +109,8 @@ function CreateAssetButton({ poolId }: { poolId: string }) {
   const canCreateAssets = useSuitableAccounts({ poolId, poolRole: ['Borrower'], proxyType: ['Borrow'] }).length > 0
 
   return canCreateAssets ? (
-    <RouterLinkButton to={`/issuer/${poolId}/assets/create`} small>
-      Create asset
+    <RouterLinkButton to={`/issuer/${poolId}/assets/create`} small icon={<IconPlus />}>
+      Create assets
     </RouterLinkButton>
   ) : null
 }