From b1fc5fb4bcf2bed634a90697d57d04eb66e62448 Mon Sep 17 00:00:00 2001
From: katty barroso <kattybarroso1321@gmail.com>
Date: Mon, 21 Oct 2024 12:27:47 +0200
Subject: [PATCH 1/4] Adjust filters with new design

---
 .../src/components/Report/DataFilter.tsx      | 348 ++++++++----------
 1 file changed, 163 insertions(+), 185 deletions(-)

diff --git a/centrifuge-app/src/components/Report/DataFilter.tsx b/centrifuge-app/src/components/Report/DataFilter.tsx
index 6b146626b..98eea2fa7 100644
--- a/centrifuge-app/src/components/Report/DataFilter.tsx
+++ b/centrifuge-app/src/components/Report/DataFilter.tsx
@@ -1,6 +1,6 @@
 import { Loan, Pool } from '@centrifuge/centrifuge-js'
 import { useGetNetworkName } from '@centrifuge/centrifuge-react'
-import { AnchorButton, Box, DateInput, IconDownload, SearchInput, Select, Shelf } from '@centrifuge/fabric'
+import { DateInput, Grid, SearchInput, Select } from '@centrifuge/fabric'
 import * as React from 'react'
 import { useNavigate } from 'react-router'
 import { useIsAboveBreakpoint } from '../../../src/utils/useIsAboveBreakpoint'
@@ -64,7 +64,7 @@ export function DataFilter({ poolId }: ReportFilterProps) {
   ]
 
   return (
-    <Shelf
+    <Grid
       flexWrap="wrap"
       padding={2}
       margin={2}
@@ -74,198 +74,162 @@ export function DataFilter({ poolId }: ReportFilterProps) {
       borderWidth={[0, 1]}
       bg="backgroundSecondary"
       alignItems="flex-start"
+      gridTemplateColumns="repeat(auto-fill, minmax(250px, 1fr))"
+      gap={2}
     >
-      <Box display="flex" justifyContent="space-between" width="100%" flexWrap="wrap" mb={2}>
-        <Box display="flex" maxWidth={isMedium ? '60%' : '100%'}>
-          <Box mr={1}>
-            <Select
-              name="data"
-              label="Data"
-              options={reportOptions}
-              value={report}
-              onChange={(event: React.ChangeEvent<HTMLSelectElement>) => {
-                const { value } = event.target
-                if (value) {
-                  navigate(`${basePath}/${pool.id}/data/${value}`)
-                }
-              }}
-            />
-          </Box>
+      <Select
+        name="data"
+        label="Data"
+        options={reportOptions}
+        value={report}
+        onChange={(event: React.ChangeEvent<HTMLSelectElement>) => {
+          const { value } = event.target
+          if (value) {
+            navigate(`${basePath}/${pool.id}/data/${value}`)
+          }
+        }}
+      />
 
-          {['pool-balance', 'token-price'].includes(report) && (
-            <Box mr={1}>
-              <Select
-                name="groupBy"
-                label="Group by"
-                options={[
-                  { label: 'Day', value: 'day' },
-                  { label: 'Month', value: 'month' },
-                ]}
-                value={groupBy}
-                onChange={(event) => {
-                  if (event.target.value) {
-                    setGroupBy(event.target.value as GroupBy)
-                  }
-                }}
-              />
-            </Box>
-          )}
-
-          {report === 'asset-list' && (
-            <Box mr={1}>
-              <Select
-                name="loanStatus"
-                label="Status"
-                options={[
-                  { label: 'All', value: 'all' },
-                  { label: 'Ongoing', value: 'ongoing' },
-                  { label: 'Repaid', value: 'repaid' },
-                  { label: 'Overdue', value: 'overdue' },
-                ]}
-                value={loanStatus}
-                onChange={(event) => setLoanStatus(event.target.value)}
-              />
-            </Box>
-          )}
-
-          {(report === 'investor-list' || report === 'investor-tx') && (
-            <Box mr={1}>
-              <Select
-                name="activeTranche"
-                label="Token"
-                options={[
-                  { label: 'All tokens', value: 'all' },
-                  ...pool.tranches.map((token) => ({
-                    label: token.currency.name,
-                    value: token.id,
-                  })),
-                ]}
-                value={activeTranche}
-                onChange={(event) => {
-                  if (event.target.value) {
-                    setActiveTranche(event.target.value)
-                  }
-                }}
-              />
-            </Box>
-          )}
-
-          {report === 'asset-tx' && (
-            <Box mr={1}>
-              <Select
-                name="loan"
-                label="Asset"
-                onChange={(event) => setLoan(event.target.value)}
-                value={loan}
-                options={[
-                  { label: 'All', value: 'all' },
-                  ...(loans?.map((l) => ({
-                    value: l.id,
-                    label: <LoanOption loan={l as Loan} key={l.id} />,
-                  })) ?? []),
-                ]}
-              />
-            </Box>
-          )}
+      {['pool-balance', 'token-price'].includes(report) && (
+        <Select
+          name="groupBy"
+          label="Group by"
+          options={[
+            { label: 'Day', value: 'day' },
+            { label: 'Month', value: 'month' },
+          ]}
+          value={groupBy}
+          onChange={(event) => {
+            if (event.target.value) {
+              setGroupBy(event.target.value as GroupBy)
+            }
+          }}
+        />
+      )}
 
-          {['investor-tx', 'asset-tx', 'fee-tx'].includes(report) && (
-            <Box mr={1}>
-              <Select
-                name="txType"
-                label="Transaction type"
-                options={
-                  report === 'investor-tx'
-                    ? [
-                        { label: 'All', value: 'all' },
-                        { label: 'Submitted orders', value: 'orders' },
-                        { label: 'Executed orders', value: 'executions' },
-                        { label: 'Transfers', value: 'transfers' },
-                      ]
-                    : report === 'asset-tx'
-                    ? [
-                        { label: 'All', value: 'all' },
-                        { label: 'Created', value: 'Created' },
-                        { label: 'Financed', value: 'Financed' },
-                        { label: 'Repaid', value: 'Repaid' },
-                        { label: 'Priced', value: 'Priced' },
-                        { label: 'Closed', value: 'Closed' },
-                      ]
-                    : [
-                        { label: 'All', value: 'all' },
-                        { label: formatPoolFeeTransactionType('CHARGED'), value: 'CHARGED' },
-                        { label: formatPoolFeeTransactionType('UNCHARGED'), value: 'UNCHARGED' },
-                        { label: formatPoolFeeTransactionType('ACCRUED'), value: 'ACCRUED' },
-                        { label: formatPoolFeeTransactionType('PAID'), value: 'PAID' },
-                      ]
-                }
-                value={txType}
-                onChange={(event) => {
-                  if (event.target.value) {
-                    setTxType(event.target.value)
-                  }
-                }}
-              />
-            </Box>
-          )}
+      {report === 'asset-list' && (
+        <Select
+          name="loanStatus"
+          label="Status"
+          options={[
+            { label: 'All', value: 'all' },
+            { label: 'Ongoing', value: 'ongoing' },
+            { label: 'Repaid', value: 'repaid' },
+            { label: 'Overdue', value: 'overdue' },
+          ]}
+          value={loanStatus}
+          onChange={(event) => setLoanStatus(event.target.value)}
+        />
+      )}
 
-          {['investor-tx', 'investor-list'].includes(report) && (
-            <>
-              <Box mr={1}>
-                <Select
-                  name="network"
-                  label="Network"
-                  options={[
-                    { label: 'All', value: 'all' },
-                    { label: 'Centrifuge', value: 'centrifuge' },
-                    ...(domains ?? []).map((domain) => ({
-                      label: getNetworkName(domain.chainId),
-                      value: String(domain.chainId),
-                    })),
-                  ]}
-                  value={network}
-                  onChange={(e) => {
-                    const { value } = e.target
-                    if (value) {
-                      setNetwork(isNaN(Number(value)) ? value : Number(value))
-                    }
-                  }}
-                />
-              </Box>
-            </>
-          )}
-        </Box>
+      {(report === 'investor-list' || report === 'investor-tx') && (
+        <Select
+          name="activeTranche"
+          label="Token"
+          options={[
+            { label: 'All tokens', value: 'all' },
+            ...pool.tranches.map((token) => ({
+              label: token.currency.name,
+              value: token.id,
+            })),
+          ]}
+          value={activeTranche}
+          onChange={(event) => {
+            if (event.target.value) {
+              setActiveTranche(event.target.value)
+            }
+          }}
+        />
+      )}
 
-        <Box display="flex" alignItems="center">
-          <Box mr={1}>
-            <DateInput label="From" value={startDate} max={endDate} onChange={(e) => setStartDate(e.target.value)} />
-          </Box>
-          <DateInput label="To" value={endDate} min={startDate} onChange={(e) => setEndDate(e.target.value)} />
+      {report === 'asset-tx' && (
+        <Select
+          name="loan"
+          label="Asset"
+          onChange={(event) => setLoan(event.target.value)}
+          value={loan}
+          options={[
+            { label: 'All', value: 'all' },
+            ...(loans?.map((l) => ({
+              value: l.id,
+              label: <LoanOption loan={l as Loan} key={l.id} />,
+            })) ?? []),
+          ]}
+        />
+      )}
 
-          <AnchorButton
-            disabled={!csvData}
-            download={csvData?.fileName}
-            href={csvData?.dataUrl}
-            icon={<IconDownload size={20} />}
-            small
-            variant="inverted"
-            style={{ marginLeft: '12px', marginTop: '22px' }}
-          >
-            Download
-          </AnchorButton>
-        </Box>
-      </Box>
+      {['investor-tx', 'asset-tx', 'fee-tx'].includes(report) && (
+        <Select
+          name="txType"
+          label="Transaction type"
+          options={
+            report === 'investor-tx'
+              ? [
+                  { label: 'All', value: 'all' },
+                  { label: 'Submitted orders', value: 'orders' },
+                  { label: 'Executed orders', value: 'executions' },
+                  { label: 'Transfers', value: 'transfers' },
+                ]
+              : report === 'asset-tx'
+              ? [
+                  { label: 'All', value: 'all' },
+                  { label: 'Created', value: 'Created' },
+                  { label: 'Financed', value: 'Financed' },
+                  { label: 'Repaid', value: 'Repaid' },
+                  { label: 'Priced', value: 'Priced' },
+                  { label: 'Closed', value: 'Closed' },
+                ]
+              : [
+                  { label: 'All', value: 'all' },
+                  { label: formatPoolFeeTransactionType('CHARGED'), value: 'CHARGED' },
+                  { label: formatPoolFeeTransactionType('UNCHARGED'), value: 'UNCHARGED' },
+                  { label: formatPoolFeeTransactionType('ACCRUED'), value: 'ACCRUED' },
+                  { label: formatPoolFeeTransactionType('PAID'), value: 'PAID' },
+                ]
+          }
+          value={txType}
+          onChange={(event) => {
+            if (event.target.value) {
+              setTxType(event.target.value)
+            }
+          }}
+        />
+      )}
 
       {['investor-tx', 'investor-list'].includes(report) && (
-        <Box width="30%" mb={2}>
-          <SearchInput
-            name="address"
-            placeholder="Filter by address..."
-            value={address}
-            onChange={(e) => setAddress(e.target.value)}
-          />
-        </Box>
+        <Select
+          name="network"
+          label="Network"
+          options={[
+            { label: 'All', value: 'all' },
+            { label: 'Centrifuge', value: 'centrifuge' },
+            ...(domains ?? []).map((domain) => ({
+              label: getNetworkName(domain.chainId),
+              value: String(domain.chainId),
+            })),
+          ]}
+          value={network}
+          onChange={(e) => {
+            const { value } = e.target
+            if (value) {
+              setNetwork(isNaN(Number(value)) ? value : Number(value))
+            }
+          }}
+        />
       )}
-    </Shelf>
+      {['investor-tx', 'investor-list'].includes(report) && (
+        <SearchInput
+          name="address"
+          label="Address"
+          placeholder="Filter by address..."
+          value={address}
+          onChange={(e) => setAddress(e.target.value)}
+        />
+      )}
+
+      <DateInput label="From" value={startDate} max={endDate} onChange={(e) => setStartDate(e.target.value)} />
+      <DateInput label="To" value={endDate} min={startDate} onChange={(e) => setEndDate(e.target.value)} />
+    </Grid>
   )
 }
 
@@ -278,3 +242,17 @@ function LoanOption({ loan }: { loan: Loan }) {
     </option>
   )
 }
+
+{
+  /* <AnchorButton
+disabled={!csvData}
+download={csvData?.fileName}
+href={csvData?.dataUrl}
+icon={<IconDownload size={20} />}
+small
+variant="inverted"
+style={{ marginLeft: '12px', marginTop: '22px' }}
+>
+Download
+</AnchorButton> */
+}

From 314ea69fce90a2bb2d3248156b82f8141c2bd65d Mon Sep 17 00:00:00 2001
From: katty barroso <kattybarroso1321@gmail.com>
Date: Mon, 21 Oct 2024 13:03:02 +0200
Subject: [PATCH 2/4] Add formatted date

---
 .../src/components/Report/DataFilter.tsx      | 352 +++++++++---------
 1 file changed, 180 insertions(+), 172 deletions(-)

diff --git a/centrifuge-app/src/components/Report/DataFilter.tsx b/centrifuge-app/src/components/Report/DataFilter.tsx
index 98eea2fa7..e85fdf5d4 100644
--- a/centrifuge-app/src/components/Report/DataFilter.tsx
+++ b/centrifuge-app/src/components/Report/DataFilter.tsx
@@ -1,9 +1,9 @@
 import { Loan, Pool } from '@centrifuge/centrifuge-js'
 import { useGetNetworkName } from '@centrifuge/centrifuge-react'
-import { DateInput, Grid, SearchInput, Select } from '@centrifuge/fabric'
+import { AnchorButton, Box, DateInput, Grid, IconDownload, SearchInput, Select, Stack, Text } from '@centrifuge/fabric'
 import * as React from 'react'
 import { useNavigate } from 'react-router'
-import { useIsAboveBreakpoint } from '../../../src/utils/useIsAboveBreakpoint'
+import { formatDate } from '../../../src/utils/date'
 import { usePool } from '../../../src/utils/usePools'
 import { nftMetadataSchema } from '../../schemas'
 import { useBasePath } from '../../utils/useBasePath'
@@ -45,7 +45,6 @@ export function DataFilter({ poolId }: ReportFilterProps) {
   const navigate = useNavigate()
   const basePath = useBasePath()
   const pool = usePool(poolId) as Pool
-  const isMedium = useIsAboveBreakpoint('M')
 
   const { data: domains } = useActiveDomains(pool.id)
   const getNetworkName = useGetNetworkName()
@@ -64,172 +63,195 @@ export function DataFilter({ poolId }: ReportFilterProps) {
   ]
 
   return (
-    <Grid
-      flexWrap="wrap"
-      padding={2}
-      margin={2}
-      borderRadius={6}
-      borderStyle="solid"
-      borderColor="borderPrimary"
-      borderWidth={[0, 1]}
-      bg="backgroundSecondary"
-      alignItems="flex-start"
-      gridTemplateColumns="repeat(auto-fill, minmax(250px, 1fr))"
-      gap={2}
-    >
-      <Select
-        name="data"
-        label="Data"
-        options={reportOptions}
-        value={report}
-        onChange={(event: React.ChangeEvent<HTMLSelectElement>) => {
-          const { value } = event.target
-          if (value) {
-            navigate(`${basePath}/${pool.id}/data/${value}`)
-          }
-        }}
-      />
-
-      {['pool-balance', 'token-price'].includes(report) && (
+    <Stack>
+      <Grid
+        flexWrap="wrap"
+        padding={2}
+        marginX={2}
+        borderRadius={6}
+        borderStyle="solid"
+        borderColor="borderPrimary"
+        borderWidth={[0, 1]}
+        bg="backgroundSecondary"
+        alignItems="flex-start"
+        gridTemplateColumns="repeat(auto-fill, minmax(250px, 1fr))"
+        gap={2}
+      >
         <Select
-          name="groupBy"
-          label="Group by"
-          options={[
-            { label: 'Day', value: 'day' },
-            { label: 'Month', value: 'month' },
-          ]}
-          value={groupBy}
-          onChange={(event) => {
-            if (event.target.value) {
-              setGroupBy(event.target.value as GroupBy)
+          name="data"
+          label="Data"
+          options={reportOptions}
+          value={report}
+          onChange={(event: React.ChangeEvent<HTMLSelectElement>) => {
+            const { value } = event.target
+            if (value) {
+              navigate(`${basePath}/${pool.id}/data/${value}`)
             }
           }}
         />
-      )}
 
-      {report === 'asset-list' && (
-        <Select
-          name="loanStatus"
-          label="Status"
-          options={[
-            { label: 'All', value: 'all' },
-            { label: 'Ongoing', value: 'ongoing' },
-            { label: 'Repaid', value: 'repaid' },
-            { label: 'Overdue', value: 'overdue' },
-          ]}
-          value={loanStatus}
-          onChange={(event) => setLoanStatus(event.target.value)}
-        />
-      )}
+        {['pool-balance', 'token-price'].includes(report) && (
+          <Select
+            name="groupBy"
+            label="Group by"
+            options={[
+              { label: 'Day', value: 'day' },
+              { label: 'Month', value: 'month' },
+            ]}
+            value={groupBy}
+            onChange={(event) => {
+              if (event.target.value) {
+                setGroupBy(event.target.value as GroupBy)
+              }
+            }}
+          />
+        )}
 
-      {(report === 'investor-list' || report === 'investor-tx') && (
-        <Select
-          name="activeTranche"
-          label="Token"
-          options={[
-            { label: 'All tokens', value: 'all' },
-            ...pool.tranches.map((token) => ({
-              label: token.currency.name,
-              value: token.id,
-            })),
-          ]}
-          value={activeTranche}
-          onChange={(event) => {
-            if (event.target.value) {
-              setActiveTranche(event.target.value)
-            }
-          }}
-        />
-      )}
+        {report === 'asset-list' && (
+          <Select
+            name="loanStatus"
+            label="Status"
+            options={[
+              { label: 'All', value: 'all' },
+              { label: 'Ongoing', value: 'ongoing' },
+              { label: 'Repaid', value: 'repaid' },
+              { label: 'Overdue', value: 'overdue' },
+            ]}
+            value={loanStatus}
+            onChange={(event) => setLoanStatus(event.target.value)}
+          />
+        )}
 
-      {report === 'asset-tx' && (
-        <Select
-          name="loan"
-          label="Asset"
-          onChange={(event) => setLoan(event.target.value)}
-          value={loan}
-          options={[
-            { label: 'All', value: 'all' },
-            ...(loans?.map((l) => ({
-              value: l.id,
-              label: <LoanOption loan={l as Loan} key={l.id} />,
-            })) ?? []),
-          ]}
-        />
-      )}
+        {(report === 'investor-list' || report === 'investor-tx') && (
+          <Select
+            name="activeTranche"
+            label="Token"
+            options={[
+              { label: 'All tokens', value: 'all' },
+              ...pool.tranches.map((token) => ({
+                label: token.currency.name,
+                value: token.id,
+              })),
+            ]}
+            value={activeTranche}
+            onChange={(event) => {
+              if (event.target.value) {
+                setActiveTranche(event.target.value)
+              }
+            }}
+          />
+        )}
 
-      {['investor-tx', 'asset-tx', 'fee-tx'].includes(report) && (
-        <Select
-          name="txType"
-          label="Transaction type"
-          options={
-            report === 'investor-tx'
-              ? [
-                  { label: 'All', value: 'all' },
-                  { label: 'Submitted orders', value: 'orders' },
-                  { label: 'Executed orders', value: 'executions' },
-                  { label: 'Transfers', value: 'transfers' },
-                ]
-              : report === 'asset-tx'
-              ? [
-                  { label: 'All', value: 'all' },
-                  { label: 'Created', value: 'Created' },
-                  { label: 'Financed', value: 'Financed' },
-                  { label: 'Repaid', value: 'Repaid' },
-                  { label: 'Priced', value: 'Priced' },
-                  { label: 'Closed', value: 'Closed' },
-                ]
-              : [
-                  { label: 'All', value: 'all' },
-                  { label: formatPoolFeeTransactionType('CHARGED'), value: 'CHARGED' },
-                  { label: formatPoolFeeTransactionType('UNCHARGED'), value: 'UNCHARGED' },
-                  { label: formatPoolFeeTransactionType('ACCRUED'), value: 'ACCRUED' },
-                  { label: formatPoolFeeTransactionType('PAID'), value: 'PAID' },
-                ]
-          }
-          value={txType}
-          onChange={(event) => {
-            if (event.target.value) {
-              setTxType(event.target.value)
-            }
-          }}
-        />
-      )}
+        {report === 'asset-tx' && (
+          <Select
+            name="loan"
+            label="Asset"
+            onChange={(event) => setLoan(event.target.value)}
+            value={loan}
+            options={[
+              { label: 'All', value: 'all' },
+              ...(loans?.map((l) => ({
+                value: l.id,
+                label: <LoanOption loan={l as Loan} key={l.id} />,
+              })) ?? []),
+            ]}
+          />
+        )}
 
-      {['investor-tx', 'investor-list'].includes(report) && (
-        <Select
-          name="network"
-          label="Network"
-          options={[
-            { label: 'All', value: 'all' },
-            { label: 'Centrifuge', value: 'centrifuge' },
-            ...(domains ?? []).map((domain) => ({
-              label: getNetworkName(domain.chainId),
-              value: String(domain.chainId),
-            })),
-          ]}
-          value={network}
-          onChange={(e) => {
-            const { value } = e.target
-            if (value) {
-              setNetwork(isNaN(Number(value)) ? value : Number(value))
+        {['investor-tx', 'asset-tx', 'fee-tx'].includes(report) && (
+          <Select
+            name="txType"
+            label="Transaction type"
+            options={
+              report === 'investor-tx'
+                ? [
+                    { label: 'All', value: 'all' },
+                    { label: 'Submitted orders', value: 'orders' },
+                    { label: 'Executed orders', value: 'executions' },
+                    { label: 'Transfers', value: 'transfers' },
+                  ]
+                : report === 'asset-tx'
+                ? [
+                    { label: 'All', value: 'all' },
+                    { label: 'Created', value: 'Created' },
+                    { label: 'Financed', value: 'Financed' },
+                    { label: 'Repaid', value: 'Repaid' },
+                    { label: 'Priced', value: 'Priced' },
+                    { label: 'Closed', value: 'Closed' },
+                  ]
+                : [
+                    { label: 'All', value: 'all' },
+                    { label: formatPoolFeeTransactionType('CHARGED'), value: 'CHARGED' },
+                    { label: formatPoolFeeTransactionType('UNCHARGED'), value: 'UNCHARGED' },
+                    { label: formatPoolFeeTransactionType('ACCRUED'), value: 'ACCRUED' },
+                    { label: formatPoolFeeTransactionType('PAID'), value: 'PAID' },
+                  ]
             }
-          }}
-        />
-      )}
-      {['investor-tx', 'investor-list'].includes(report) && (
-        <SearchInput
-          name="address"
-          label="Address"
-          placeholder="Filter by address..."
-          value={address}
-          onChange={(e) => setAddress(e.target.value)}
-        />
-      )}
+            value={txType}
+            onChange={(event) => {
+              if (event.target.value) {
+                setTxType(event.target.value)
+              }
+            }}
+          />
+        )}
+
+        {['investor-tx', 'investor-list'].includes(report) && (
+          <Select
+            name="network"
+            label="Network"
+            options={[
+              { label: 'All', value: 'all' },
+              { label: 'Centrifuge', value: 'centrifuge' },
+              ...(domains ?? []).map((domain) => ({
+                label: getNetworkName(domain.chainId),
+                value: String(domain.chainId),
+              })),
+            ]}
+            value={network}
+            onChange={(e) => {
+              const { value } = e.target
+              if (value) {
+                setNetwork(isNaN(Number(value)) ? value : Number(value))
+              }
+            }}
+          />
+        )}
+        {['investor-tx', 'investor-list'].includes(report) && (
+          <SearchInput
+            name="address"
+            label="Address"
+            placeholder="Filter by address..."
+            value={address}
+            onChange={(e) => setAddress(e.target.value)}
+          />
+        )}
 
-      <DateInput label="From" value={startDate} max={endDate} onChange={(e) => setStartDate(e.target.value)} />
-      <DateInput label="To" value={endDate} min={startDate} onChange={(e) => setEndDate(e.target.value)} />
-    </Grid>
+        <DateInput label="From" value={startDate} max={endDate} onChange={(e) => setStartDate(e.target.value)} />
+        <DateInput label="To" value={endDate} min={startDate} onChange={(e) => setEndDate(e.target.value)} />
+      </Grid>
+      <Box display="flex" alignItems="center" justifyContent="space-between" margin={2}>
+        <Box display="flex" alignItems="center">
+          <Text variant="body3" style={{ marginRight: 4, fontWeight: 600 }}>
+            {formatDate(startDate)}
+          </Text>
+          <Text variant="body3">-</Text>
+          <Text variant="body3" style={{ marginLeft: 4, fontWeight: 600 }}>
+            {formatDate(endDate)}
+          </Text>
+        </Box>
+        <AnchorButton
+          disabled={!csvData}
+          download={csvData?.fileName}
+          href={csvData?.dataUrl}
+          icon={<IconDownload size={20} />}
+          small
+          variant="inverted"
+        >
+          Download
+        </AnchorButton>
+      </Box>
+    </Stack>
   )
 }
 
@@ -242,17 +264,3 @@ function LoanOption({ loan }: { loan: Loan }) {
     </option>
   )
 }
-
-{
-  /* <AnchorButton
-disabled={!csvData}
-download={csvData?.fileName}
-href={csvData?.dataUrl}
-icon={<IconDownload size={20} />}
-small
-variant="inverted"
-style={{ marginLeft: '12px', marginTop: '22px' }}
->
-Download
-</AnchorButton> */
-}

From af7353a19988dc88e6b9e06e6c1cf2dead9ab528 Mon Sep 17 00:00:00 2001
From: katty barroso <kattybarroso1321@gmail.com>
Date: Mon, 21 Oct 2024 13:32:08 +0200
Subject: [PATCH 3/4] Add changes to data reports table

---
 centrifuge-app/src/components/DataTable.tsx   |  6 +++++
 .../src/components/Report/AssetList.tsx       | 25 ++++++++++---------
 .../components/Report/AssetTransactions.tsx   | 13 ++++++----
 .../src/components/Report/FeeTransactions.tsx |  2 +-
 .../src/components/Report/InvestorList.tsx    |  8 +++---
 .../Report/InvestorTransactions.tsx           | 12 +++++----
 .../src/components/Report/TokenPrice.tsx      |  2 +-
 centrifuge-app/src/components/TextLink.tsx    |  3 ---
 8 files changed, 40 insertions(+), 31 deletions(-)

diff --git a/centrifuge-app/src/components/DataTable.tsx b/centrifuge-app/src/components/DataTable.tsx
index 73fc0ac58..284d6d45c 100644
--- a/centrifuge-app/src/components/DataTable.tsx
+++ b/centrifuge-app/src/components/DataTable.tsx
@@ -241,6 +241,12 @@ export const DataRow = styled(Row)<any>`
       borderBottomStyle: 'solid',
       borderBottomWidth: '1px',
       borderBottomColor: 'borderPrimary',
+      borderLeftStyle: 'solid',
+      borderLeftWidth: '1px',
+      borderLeftColor: 'borderPrimary',
+      borderRightStyle: 'solid',
+      borderRightWidth: '1px',
+      borderRightColor: 'borderPrimary',
       backgroundColor: 'transparent',
       // using a&:hover caused the background sometimes not to update when switching themes
       '&:hover':
diff --git a/centrifuge-app/src/components/Report/AssetList.tsx b/centrifuge-app/src/components/Report/AssetList.tsx
index 0166310ce..6db290375 100644
--- a/centrifuge-app/src/components/Report/AssetList.tsx
+++ b/centrifuge-app/src/components/Report/AssetList.tsx
@@ -27,42 +27,42 @@ function getColumnConfig(isPrivate: boolean, symbol: string) {
       { header: 'Name', align: 'left', csvOnly: false, formatter: noop },
       {
         header: 'Value',
-        align: 'right',
+        align: 'left',
         csvOnly: false,
         sortable: true,
         formatter: (v: any) => (v ? formatBalance(v, symbol, 2) : '-'),
       },
       {
         header: 'Principal outstanding',
-        align: 'right',
+        align: 'left',
         csvOnly: false,
         sortable: true,
         formatter: (v: any) => (v ? formatBalance(v, symbol, 2) : '-'),
       },
       {
         header: 'Interest outstanding',
-        align: 'right',
+        align: 'left',
         csvOnly: false,
         sortable: true,
         formatter: (v: any) => (v ? formatBalance(v, symbol, 2) : '-'),
       },
       {
         header: 'Principal repaid',
-        align: 'right',
+        align: 'left',
         csvOnly: false,
         sortable: true,
         formatter: (v: any) => (v ? formatBalance(v, symbol, 2) : '-'),
       },
       {
         header: 'Interest repaid',
-        align: 'right',
+        align: 'left',
         csvOnly: false,
         sortable: true,
         formatter: (v: any) => (v ? formatBalance(v, symbol, 2) : '-'),
       },
       {
         header: 'Additional repaid',
-        align: 'right',
+        align: 'left',
         csvOnly: false,
         sortable: true,
         formatter: (v: any) => (v ? formatBalance(v, symbol, 2) : '-'),
@@ -124,28 +124,28 @@ function getColumnConfig(isPrivate: boolean, symbol: string) {
       { header: 'Name', align: 'left', csvOnly: false, formatter: noop },
       {
         header: 'Market value',
-        align: 'right',
+        align: 'left',
         csvOnly: false,
         sortable: true,
         formatter: (v: any) => (v ? formatBalance(v, symbol, 2) : '-'),
       },
       {
         header: 'Face value',
-        align: 'right',
+        align: 'left',
         csvOnly: false,
         sortable: true,
         formatter: (v: any) => (v ? formatBalance(v, symbol, 2) : '-'),
       },
       {
         header: 'Quantity',
-        align: 'right',
+        align: 'left',
         csvOnly: false,
         sortable: true,
         formatter: (v: any) => (v ? formatBalance(v, undefined, 2) : '-'),
       },
       {
         header: 'Market price',
-        align: 'right',
+        align: 'left',
         csvOnly: false,
         sortable: true,
         formatter: (v: any) => (v ? formatBalance(v, symbol, 2) : '-'),
@@ -159,14 +159,14 @@ function getColumnConfig(isPrivate: boolean, symbol: string) {
       },
       {
         header: 'Unrealized profit',
-        align: 'right',
+        align: 'left',
         csvOnly: false,
         sortable: true,
         formatter: (v: any) => (v ? formatBalance(v, symbol, 2) : '-'),
       },
       {
         header: 'Realized profit',
-        align: 'right',
+        align: 'left',
         csvOnly: false,
         sortable: true,
         formatter: (v: any) => (v ? formatBalance(v, symbol, 2) : '-'),
@@ -192,6 +192,7 @@ export function AssetList({ pool }: { pool: Pool }) {
           align: col.align,
           header: col.sortable ? <SortableTableHeader label={col.header} /> : col.header,
           sortKey: col.sortable ? `value[${index}]` : undefined,
+          width: '177px',
           cell: (row: TableDataRow & { id: string }) => {
             const assetId = row?.id?.split('-')[1]
             return col.header === 'Name' ? (
diff --git a/centrifuge-app/src/components/Report/AssetTransactions.tsx b/centrifuge-app/src/components/Report/AssetTransactions.tsx
index 633f5f139..86209f59e 100644
--- a/centrifuge-app/src/components/Report/AssetTransactions.tsx
+++ b/centrifuge-app/src/components/Report/AssetTransactions.tsx
@@ -22,9 +22,10 @@ export function AssetTransactions({ pool }: { pool: Pool }) {
   const columnConfig = [
     {
       header: 'Asset ID',
-      align: 'left',
+      align: 'center',
       csvOnly: false,
       formatter: noop,
+      width: '80px',
     },
     {
       header: 'Asset name',
@@ -34,7 +35,7 @@ export function AssetTransactions({ pool }: { pool: Pool }) {
     },
     {
       header: 'Epoch',
-      align: 'right',
+      align: 'center',
       csvOnly: false,
       formatter: noop,
     },
@@ -46,7 +47,7 @@ export function AssetTransactions({ pool }: { pool: Pool }) {
     },
     {
       header: 'Transaction type',
-      align: 'right',
+      align: 'left',
       csvOnly: false,
       formatter: noop,
     },
@@ -58,14 +59,15 @@ export function AssetTransactions({ pool }: { pool: Pool }) {
     },
     {
       header: 'Currency',
-      align: 'right',
+      align: 'left',
       csvOnly: true,
       formatter: noop,
     },
     {
       header: 'Transaction',
-      align: 'right',
+      align: 'center',
       csvOnly: false,
+      width: '80px',
       formatter: (v: any) => (
         <IconAnchor
           href={explorer.tx(v)}
@@ -113,6 +115,7 @@ export function AssetTransactions({ pool }: { pool: Pool }) {
       header: col.header,
       cell: (row: TableDataRow) => <Text variant="body3">{col.formatter((row.value as any)[index])}</Text>,
       csvOnly: col.csvOnly,
+      width: col.width ?? '252px',
     }))
     .filter((col) => !col.csvOnly)
 
diff --git a/centrifuge-app/src/components/Report/FeeTransactions.tsx b/centrifuge-app/src/components/Report/FeeTransactions.tsx
index 34a72162a..e5e98d86a 100644
--- a/centrifuge-app/src/components/Report/FeeTransactions.tsx
+++ b/centrifuge-app/src/components/Report/FeeTransactions.tsx
@@ -40,7 +40,7 @@ export function FeeTransactions({ pool }: { pool: Pool }) {
     },
     {
       header: 'Currency amount',
-      align: 'right',
+      align: 'left',
       csvOnly: false,
       formatter: (v: any) => (typeof v === 'number' ? formatBalance(v, pool.currency.symbol, 2) : '-'),
     },
diff --git a/centrifuge-app/src/components/Report/InvestorList.tsx b/centrifuge-app/src/components/Report/InvestorList.tsx
index 2d5e4cda5..73f143308 100644
--- a/centrifuge-app/src/components/Report/InvestorList.tsx
+++ b/centrifuge-app/src/components/Report/InvestorList.tsx
@@ -38,13 +38,13 @@ export function InvestorList({ pool }: { pool: Pool }) {
     },
     {
       header: 'Position',
-      align: 'right',
+      align: 'left',
       csvOnly: false,
       formatter: (v: any, row: any) => (typeof v === 'number' ? formatBalance(v, row.token.currency.symbol, 2) : '-'),
     },
     {
       header: 'Pool %',
-      align: 'right',
+      align: 'left',
       sortable: true,
       csvOnly: false,
       formatter: (v: any, row: any) => (typeof v === 'number' ? formatPercentage(v * 100, true, {}, 2) : '-'),
@@ -57,7 +57,7 @@ export function InvestorList({ pool }: { pool: Pool }) {
     },
     {
       header: 'Pending invest order',
-      align: 'right',
+      align: 'left',
       csvOnly: false,
       formatter: (v: any) => (typeof v === 'number' ? formatBalance(v, pool.currency.symbol, 2) : '-'),
     },
@@ -69,7 +69,7 @@ export function InvestorList({ pool }: { pool: Pool }) {
     },
     {
       header: 'Pending redeem order',
-      align: 'right',
+      align: 'left',
       csvOnly: false,
       formatter: (v: any, row: any) => (typeof v === 'number' ? formatBalance(v, row.token.currency.symbol, 2) : '-'),
     },
diff --git a/centrifuge-app/src/components/Report/InvestorTransactions.tsx b/centrifuge-app/src/components/Report/InvestorTransactions.tsx
index 95dea6d84..f76542569 100644
--- a/centrifuge-app/src/components/Report/InvestorTransactions.tsx
+++ b/centrifuge-app/src/components/Report/InvestorTransactions.tsx
@@ -47,7 +47,7 @@ export function InvestorTransactions({ pool }: { pool: Pool }) {
     },
     {
       header: 'Epoch',
-      align: 'left',
+      align: 'center',
       sortable: false,
       csvOnly: false,
       formatter: noop,
@@ -68,7 +68,7 @@ export function InvestorTransactions({ pool }: { pool: Pool }) {
     },
     {
       header: 'Currency amount',
-      align: 'right',
+      align: 'left',
       sortable: true,
       csvOnly: false,
       formatter: (v: any) => (typeof v === 'number' ? formatBalance(v, pool.currency.symbol, 2) : '-'),
@@ -82,7 +82,7 @@ export function InvestorTransactions({ pool }: { pool: Pool }) {
     },
     {
       header: 'Token amount',
-      align: 'right',
+      align: 'left',
       sortable: true,
       csvOnly: false,
       formatter: (v: any, row: any) => (typeof v === 'number' ? formatBalance(v, row[9], 2) : '-'),
@@ -96,7 +96,7 @@ export function InvestorTransactions({ pool }: { pool: Pool }) {
     },
     {
       header: 'Price',
-      align: 'right',
+      align: 'left',
       sortable: true,
       csvOnly: false,
       formatter: (v: any) => (typeof v === 'number' ? formatBalance(v, pool.currency.symbol, 6) : '-'),
@@ -110,9 +110,10 @@ export function InvestorTransactions({ pool }: { pool: Pool }) {
     },
     {
       header: 'Transaction',
-      align: 'left',
+      align: 'center',
       sortable: false,
       csvOnly: false,
+      width: '100px',
       formatter: (v: any) => (
         <IconAnchor
           href={explorer.tx(v)}
@@ -139,6 +140,7 @@ export function InvestorTransactions({ pool }: { pool: Pool }) {
       align: col.align,
       header: col.sortable ? <SortableTableHeader label={col.header} /> : col.header,
       cell: (row: TableDataRow) => <Text variant="body3">{col.formatter((row.value as any)[index], row.value)}</Text>,
+      width: col.width ?? '200px',
       sortKey: col.sortable ? `value[${index}]` : undefined,
       csvOnly: col.csvOnly,
     }))
diff --git a/centrifuge-app/src/components/Report/TokenPrice.tsx b/centrifuge-app/src/components/Report/TokenPrice.tsx
index 7e1f2a992..4976d0f9e 100644
--- a/centrifuge-app/src/components/Report/TokenPrice.tsx
+++ b/centrifuge-app/src/components/Report/TokenPrice.tsx
@@ -39,7 +39,7 @@ export function TokenPrice({ pool }: { pool: Pool }) {
     return [
       {
         align: 'left',
-        header: '',
+        header: 'Type',
         cell: (row: TableDataRow) => <Text variant={row.heading ? 'heading4' : 'body3'}>{row.name}</Text>,
         width: '200px',
       },
diff --git a/centrifuge-app/src/components/TextLink.tsx b/centrifuge-app/src/components/TextLink.tsx
index 820df816f..0858a6aa4 100644
--- a/centrifuge-app/src/components/TextLink.tsx
+++ b/centrifuge-app/src/components/TextLink.tsx
@@ -10,9 +10,6 @@ export const TextLink = styled.span`
   border: none;
   background: transparent;
   cursor: pointer;
-  &:hover {
-    text-decoration: none;
-  }
   &:visited,
   &:active {
     color: inherit;

From 79caac453983bb2509fbc5aa8b45502f12983bc4 Mon Sep 17 00:00:00 2001
From: katty barroso <kattybarroso1321@gmail.com>
Date: Mon, 21 Oct 2024 13:37:00 +0200
Subject: [PATCH 4/4] Make column sticky

---
 centrifuge-app/src/components/DataTable.tsx | 21 +++++++++++++++++++--
 1 file changed, 19 insertions(+), 2 deletions(-)

diff --git a/centrifuge-app/src/components/DataTable.tsx b/centrifuge-app/src/components/DataTable.tsx
index 284d6d45c..bf28c0b8a 100644
--- a/centrifuge-app/src/components/DataTable.tsx
+++ b/centrifuge-app/src/components/DataTable.tsx
@@ -129,7 +129,7 @@ export const DataTable = <T extends Record<string, any>>({
       {showHeader && (
         <HeaderRow styles={headerStyles} scrollable={scrollable}>
           {columns.map((col, i) => (
-            <HeaderCol key={i} align={col?.align}>
+            <HeaderCol key={i} align={col?.align} isLabel={col.isLabel}>
               <Text variant="body3">
                 {col?.header && typeof col.header !== 'string' && col?.sortKey && React.isValidElement(col.header)
                   ? React.cloneElement(col.header as React.ReactElement<any>, {
@@ -142,6 +142,7 @@ export const DataTable = <T extends Record<string, any>>({
           ))}
         </HeaderRow>
       )}
+
       {pinnedData?.map((row, i) => (
         <DataRow
           hoverable={hoverable}
@@ -281,6 +282,13 @@ export const DataCol = styled(Text)<{ align: Column['align']; isLabel?: boolean
   min-width: 0;
   overflow: hidden;
   white-space: nowrap;
+  ${({ isLabel }) =>
+    isLabel &&
+    css({
+      position: 'sticky',
+      left: 0,
+      zIndex: 1,
+    })}
 
   ${({ align }) => {
     switch (align) {
@@ -302,10 +310,19 @@ export const DataCol = styled(Text)<{ align: Column['align']; isLabel?: boolean
   }}
 `
 
-const HeaderCol = styled(DataCol)`
+const HeaderCol = styled(DataCol)<{ isLabel?: boolean }>`
   height: 32px;
   align-items: center;
 
+  ${({ isLabel }) =>
+    isLabel &&
+    css({
+      position: 'sticky',
+      left: 0,
+      zIndex: 2,
+      backgroundColor: 'backgroundSecondary',
+    })}
+
   &:has(:focus-visible) {
     box-shadow: inset 0 0 0 3px var(--fabric-focus);
   }