Redesign reports

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

@@ -162,7 +162,7 @@
           isToday: false,
         }
       }) || [],
     [isSingleTranche, truncatedPoolStates, todayAssetValue, todayPrice, pool, range]
   )
 
   const todayData = data.find((day) => day.isToday)
@@ -200,7 +200,7 @@
     })
 
     return getCSVDownloadUrl(filteredData as any)
   }, [chartData, selectedTabIndex])
 
   if (truncatedPoolStates && truncatedPoolStates?.length < 1 && poolAge > 0)
     return <Text variant="body2">No data available</Text>
@@ -221,7 +221,6 @@
 
     return result
   }
-
   return (
     <Stack gap={2} padding={20}>
       <Stack flexDirection="row" justifyContent="space-between" alignItems="center" mb={12}>
@@ -471,7 +470,7 @@
     <Box display="flex" justifyContent="space-between" alignItems="center">
       <Box display="flex" justifyContent="space-evenly">
         {graphData.map((item: GraphDataItem, index: number) => {
           if (!item.show) return
 
           const hasType = (item: GraphDataItem): item is GraphDataItemWithType => {
             return (item as GraphDataItemWithType).type !== undefined
@@ -501,8 +500,9 @@
   )
 }
 
-const CustomTick = ({ x, y, payload }: any) => {
+export const CustomTick = ({ x, y, payload }: any) => {
   const theme = useTheme()
+
   return (
     <g transform={`translate(${x},${y})`}>
       <text

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

@@ -0,0 +1,101 @@
+import { CurrencyBalance, CurrencyMetadata } from '@centrifuge/centrifuge-js'
+import { Shelf, Text } from '@centrifuge/fabric'
+import { Bar, BarChart, CartesianGrid, ReferenceLine, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts'
+import { useTheme } from 'styled-components'
+import { formatDate } from '../../../src/utils/date'
+import { formatBalance, formatBalanceAbbreviated } from '../../../src/utils/formatting'
+import { LoadBoundary } from '../LoadBoundary'
+import { CustomTick } from './PoolPerformanceChart'
+import { TooltipContainer, TooltipTitle } from './Tooltip'
+
+type SimpleBarChartProps = {
+  currency?: CurrencyMetadata
+  data: { name: string; yAxis: number }[]
+}
+
+export const SimpleBarChart = ({ currency, data }: SimpleBarChartProps) => {
+  const theme = useTheme()
+
+  const getOneDayPerMonth = () => {
+    const seenMonths = new Set<string>()
+    const result: string[] = []
+
+    data.forEach((item) => {
+      const date = new Date(item.name)
+      const month = date.getMonth() + 1
+      const year = date.getFullYear()
+      const monthYear = `${year}-${month}`
+
+      if (!seenMonths.has(monthYear)) {
+        seenMonths.add(monthYear)
+        result.push(item.name)
+      }
+    })
+
+    return result
+  }
+
+  if (!data.length)
+    return (
+      <Shelf justifyContent="center">
+        <Text>No data available</Text>
+      </Shelf>
+    )
+
+  return (
+    <LoadBoundary>
+      <ResponsiveContainer width="100%" height={200}>
+        <BarChart width={500} height={300} data={data} barSize={10} barGap={10}>
+          <CartesianGrid stroke={theme.colors.borderPrimary} vertical={false} />
+          <XAxis
+            dy={4}
+            interval={0}
+            tickLine={false}
+            axisLine={false}
+            tickMargin={10}
+            type="category"
+            dataKey="name"
+            ticks={getOneDayPerMonth()}
+            tick={<CustomTick />}
+            angle={45}
+          />
+          <YAxis
+            tickFormatter={(tick: number) => {
+              const balance = new CurrencyBalance(tick, currency?.decimals || 0)
+              return formatBalanceAbbreviated(balance, '', 0)
+            }}
+            tick={{ fontSize: 10, color: theme.colors.textPrimary }}
+            tickLine={false}
+            axisLine={false}
+            dataKey="yAxis"
+          />
+          <ReferenceLine y={0} stroke={theme.colors.textSecondary} />
+
+          <Tooltip
+            cursor={false}
+            content={({ payload }) => {
+              if (payload && payload?.length > 0) {
+                return (
+                  <TooltipContainer>
+                    <TooltipTitle>{formatDate(payload[0].payload.name)}</TooltipTitle>
+                    {payload.map((item) => (
+                      <Text variant="body3">{formatBalance(item.value as number, currency)}</Text>
+                    ))}
+                  </TooltipContainer>
+                )
+              }
+            }}
+          />
+          <Bar
+            dataKey="yAxis"
+            name="yAxis"
+            fill={theme.colors.backgroundTertiary}
+            strokeWidth={0}
+            fillOpacity={1}
+            maxBarSize={20}
+          />
+        </BarChart>
+      </ResponsiveContainer>
+    </LoadBoundary>
+  )
+}

centrifuge-app/src/components/DataTable.tsx

@@ -60,6 +60,7 @@ export type Column = {
   align?: string
   sortKey?: string
   width?: string
+  isLabel?: boolean
 }
 const sorter = <T extends Record<string, any>>(data: Array<T>, order: OrderBy, sortKey?: string) => {
   if (!sortKey) return data
@@ -149,33 +150,36 @@ export const DataTable = <T extends Record<string, any>>({
           tabIndex={onRowClicked ? 0 : undefined}
         >
           {columns.map((col, index) => (
-            <DataCol variant="body2" align={col?.align} key={index}>
-              {col.cell(row, i)}
-            </DataCol>
-          ))}
-        </DataRow>
-      ))}
-      {sortedAndPaginatedData?.map((row, i) => (
-        <DataRow
-          data-testId={`data-table-row-${i}-${groupIndex ?? 0}`}
-          hoverable={hoverable}
-          as={onRowClicked ? Link : 'div'}
-          to={onRowClicked ? onRowClicked(row) : undefined}
-          key={keyField ? row[keyField] : i}
-          tabIndex={onRowClicked ? 0 : undefined}
-        >
-          {columns.map((col, index) => (
-            <DataCol
-              data-testId={`data-table-col-${i}-${groupIndex ?? 0}-${col.header}`}
-              variant="body2"
-              align={col?.align}
-              key={index}
-            >
+            <DataCol variant="body2" align={col?.align} key={index} isLabel={col.isLabel}>
               {col.cell(row, i)}
             </DataCol>
           ))}
         </DataRow>
       ))}
+      {sortedAndPaginatedData?.map((row, i) => {
+        return (
+          <DataRow
+            data-testId={`data-table-row-${i}-${groupIndex ?? 0}`}
+            hoverable={hoverable}
+            as={onRowClicked ? Link : 'div'}
+            to={onRowClicked ? onRowClicked(row) : undefined}
+            key={keyField ? row[keyField] : i}
+            tabIndex={onRowClicked ? 0 : undefined}
+          >
+            {columns.map((col, index) => (
+              <DataCol
+                data-testId={`data-table-col-${i}-${groupIndex ?? 0}-${col.header}`}
+                variant="body2"
+                align={col?.align}
+                key={index}
+                isLabel={col.isLabel}
+              >
+                {col.cell(row, i)}
+              </DataCol>
+            ))}
+          </DataRow>
+        )
+      })}
       {/* summary row is not included in sorting */}
       {summary && (
         <DataRow data-testId={`row-summary-${groupIndex ?? 0}`}>
@@ -241,8 +245,8 @@ export const DataRow = styled(Row)<any>`
     })}
 `
 
-export const DataCol = styled(Text)<{ align: Column['align'] }>`
-  background: initial;
+export const DataCol = styled(Text)<{ align: Column['align']; isLabel?: boolean }>`
+  background: ${({ isLabel, theme }) => (isLabel ? theme.colors.backgroundSecondary : 'initial')};
   border: none;
   padding: 8px 16px;
   display: flex;

centrifuge-app/src/components/IssuerSection.tsx

@@ -28,9 +28,9 @@ type IssuerSectionProps = {
 }
 
 const reportLinks = [
-  { label: 'Balance sheet', href: '/balance-sheet', icon: <IconBalanceSheet /> },
-  { label: 'Profit & loss', href: '/profit-and-loss', icon: <IconProfitAndLoss /> },
-  { label: 'Cashflow statement', href: '/cash-flow-statement', icon: <IconCashflow /> },
+  { label: 'Balance sheet', href: '/balance-sheet', icon: <IconBalanceSheet color="backgroundPrimary" /> },
+  { label: 'Profit & loss', href: '/profit-and-loss', icon: <IconProfitAndLoss color="backgroundPrimary" /> },
+  { label: 'Cashflow statement', href: '/cash-flow-statement', icon: <IconCashflow color="backgroundPrimary" /> },
 ]
 
 const StyledRouterTextLink = styled(RouterTextLink)`
@@ -78,7 +78,7 @@ export function ReportDetails({ metadata }: IssuerSectionProps) {
                 {link.label}
               </StyledRouterTextLink>
             </Box>
-            <IconChevronRight color="white" />
+            <IconChevronRight color="backgroundPrimary" />
           </Box>
         ))}
       </Box>

centrifuge-app/src/components/LayoutBase/index.tsx

@@ -12,6 +12,7 @@ import {
   FooterContainer,
   Inner,
   LogoContainer,
+  MobileBar,
   Root,
   ToolbarContainer,
   WalletContainer,
@@ -30,19 +31,30 @@ export function LayoutBase(): JSX.Element {
           </WalletInner>
         </WalletPositioner>
       </WalletContainer>
-      <Inner>
-        <LogoContainer>
-          <LogoLink />
-        </LogoContainer>
-        <ToolbarContainer as="aside">
-          <Menu />
-        </ToolbarContainer>
-        {isMedium && (
+      {isMedium ? (
+        <Inner>
+          <LogoContainer>
+            <LogoLink />
+          </LogoContainer>
+          <ToolbarContainer as="aside">
+            <Menu />
+          </ToolbarContainer>
           <FooterContainer>
             <Footer />
           </FooterContainer>
-        )}
-      </Inner>
+        </Inner>
+      ) : (
+        <>
+          <LogoContainer>
+            <LogoLink />
+          </LogoContainer>
+          <MobileBar>
+            <ToolbarContainer as="aside">
+              <Menu />
+            </ToolbarContainer>
+          </MobileBar>
+        </>
+      )}
       <ContentWrapper>
         <Outlet />
       </ContentWrapper>

centrifuge-app/src/components/LayoutBase/styles.tsx

@@ -26,34 +26,51 @@ export const Root = styled(Box)`
     }
   }
 `
-
 export const Inner = styled(Grid)`
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   background-color: transparent;
-  height: 100vh;
-  width: 100vw;
-  position: fixed;
+  position: absolute;
   top: 0;
   left: 0;
-  overflow-y: auto;
   z-index: 2;
   padding-bottom: 1rem;
+  width: 100vw;
+  bottom: 0;
+  overflow-y: auto;
+
   @media (min-width: ${({ theme }) => theme.breakpoints['M']}) and (max-width: ${({ theme }) =>
       theme.breakpoints['L']}) {
     width: 6vw;
     background-color: ${({ theme }) => theme.colors.backgroundInverted};
     overflow: visible;
+    height: 100vh;
   }
 
   @media (min-width: ${({ theme }) => theme.breakpoints['L']}) {
     width: 15vw;
     background-color: ${({ theme }) => theme.colors.backgroundInverted};
     padding-left: 16px;
+    height: 100vh;
   }
 `
 
+export const MobileBar = styled(Box)`
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  z-index: 3;
+  background-color: ${({ theme }) => theme.colors.backgroundInverted};
+  padding: 1rem;
+  border-top: ${({ theme }) => `1px solid ${theme.colors.borderPrimary}`};
+
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+`
+
 export const HeaderBackground = styled(Box)`
   z-index: ${({ theme }) => theme.zIndices.header};
   position: sticky;
@@ -75,8 +92,10 @@ export const HeaderBackground = styled(Box)`
 export const LogoContainer = styled(Stack)`
   background-color: ${({ theme }) => theme.colors.backgroundInverted};
   z-index: ${({ theme }) => theme.zIndices.header};
-  position: sticky;
+  position: absolute;
   top: 0;
+  width: 100%;
+  z-index: 0;
 
   height: ${HEADER_HEIGHT}px;
   justify-content: center;
@@ -96,7 +115,7 @@ export const LogoContainer = styled(Stack)`
 `
 
 export const WalletContainer = styled(Stack)`
-  position: fixed;
+  position: absolute;
   top: 0;
   right: 0;
   z-index: ${({ theme }) => theme.zIndices.header};
@@ -106,6 +125,9 @@ export const WalletContainer = styled(Stack)`
 
   @media (min-width: ${({ theme }) => theme.breakpoints[BREAK_POINT_COLUMNS]}) {
     margin-right: 20px;
+    position: fixed;
+    top: 0;
+    right: 0;
   }
 `
 
@@ -120,11 +142,11 @@ export const WalletInner = styled(Stack)`
   justify-content: center;
   pointer-events: auto;
   width: 250px;
-  margin-right: 40px;
 
   @media (min-width: ${({ theme }) => theme.breakpoints[BREAK_POINT_COLUMNS]}) {
     justify-content: flex-end;
     height: 50px;
+    margin-right: 40px;
   }
 `