From 1c2cc8ab47aeea7167e69fd19d6490ee89a7f6b5 Mon Sep 17 00:00:00 2001
From: katty barroso <kattybarroso1321@gmail.com>
Date: Thu, 26 Sep 2024 10:42:01 +0200
Subject: [PATCH] Redesign filters on report

---
 .../src/components/Report/ReportFilter.tsx    | 34 +++++++++++++++++--
 fabric/src/icon-svg/IconBalanceSheet.svg      |  2 +-
 fabric/src/icon-svg/IconCashflow.svg          |  2 +-
 fabric/src/icon-svg/IconProfitAndLoss.svg     |  2 +-
 4 files changed, 34 insertions(+), 6 deletions(-)

diff --git a/centrifuge-app/src/components/Report/ReportFilter.tsx b/centrifuge-app/src/components/Report/ReportFilter.tsx
index 72193d630..e69cd1a08 100644
--- a/centrifuge-app/src/components/Report/ReportFilter.tsx
+++ b/centrifuge-app/src/components/Report/ReportFilter.tsx
@@ -1,6 +1,18 @@
 import { Loan, Pool } from '@centrifuge/centrifuge-js'
 import { useGetNetworkName } from '@centrifuge/centrifuge-react'
-import { AnchorButton, Box, DateInput, SearchInput, Select, Shelf } from '@centrifuge/fabric'
+import {
+  AnchorButton,
+  Box,
+  Button,
+  DateInput,
+  IconBalanceSheet,
+  IconCashflow,
+  IconDownload,
+  IconProfitAndLoss,
+  SearchInput,
+  Select,
+  Shelf,
+} from '@centrifuge/fabric'
 import * as React from 'react'
 import { useNavigate } from 'react-router'
 import { nftMetadataSchema } from '../../schemas'
@@ -336,9 +348,25 @@ export function ReportFilter({ pool }: ReportFilterProps) {
           />
         </>
       )}
+      <Button variant="secondary" icon={<IconBalanceSheet color="textInverted" />}>
+        Balance sheet
+      </Button>
+      <Button variant="secondary" icon={<IconProfitAndLoss />}>
+        Profit & loss
+      </Button>
+      <Button variant="secondary" icon={<IconCashflow />}>
+        Cash flow
+      </Button>
       <Box ml="auto">
-        <AnchorButton href={csvData?.dataUrl} download={csvData?.fileName} variant="primary" small disabled={!csvData}>
-          Export CSV
+        <AnchorButton
+          disabled={!csvData}
+          download={csvData?.fileName}
+          href={csvData?.dataUrl}
+          icon={<IconDownload />}
+          small
+          variant="inverted"
+        >
+          CSV
         </AnchorButton>
       </Box>
     </Shelf>
diff --git a/fabric/src/icon-svg/IconBalanceSheet.svg b/fabric/src/icon-svg/IconBalanceSheet.svg
index 89a2407fc..a6d8553c0 100644
--- a/fabric/src/icon-svg/IconBalanceSheet.svg
+++ b/fabric/src/icon-svg/IconBalanceSheet.svg
@@ -1,3 +1,3 @@
 <svg width="20" height="18" viewBox="0 0 20 18" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M2.08389 10.4704H7.08389M12.9172 10.4704H17.9172M10.0006 5.47038V17.137M10.0006 5.47038C11.1512 5.47038 12.0839 4.53764 12.0839 3.38704M10.0006 5.47038C8.84996 5.47038 7.91722 4.53764 7.91722 3.38704M3.33389 17.137L16.6672 17.137M3.33389 3.38705L7.91722 3.38704M7.91722 3.38704C7.91722 2.23645 8.84996 1.30371 10.0006 1.30371C11.1512 1.30371 12.0839 2.23645 12.0839 3.38704M12.0839 3.38704L16.6672 3.38704M7.40092 11.584C7.06701 12.8625 5.93231 13.8037 4.58389 13.8037C3.23547 13.8037 2.10077 12.8625 1.76686 11.584C1.73958 11.4795 1.72594 11.4273 1.72462 11.2186C1.72381 11.0907 1.77136 10.7957 1.81232 10.6745C1.87915 10.4767 1.95148 10.3651 2.09615 10.1419L4.58389 6.30371L7.07163 10.1419C7.2163 10.3651 7.28864 10.4767 7.35546 10.6745C7.39642 10.7957 7.44397 11.0907 7.44316 11.2186C7.44185 11.4273 7.42821 11.4795 7.40092 11.584ZM18.2343 11.584C17.9003 12.8625 16.7656 13.8037 15.4172 13.8037C14.0688 13.8037 12.9341 12.8625 12.6002 11.584C12.5729 11.4795 12.5593 11.4273 12.558 11.2186C12.5571 11.0907 12.6047 10.7957 12.6457 10.6745C12.7125 10.4767 12.7848 10.3651 12.9295 10.1419L15.4172 6.30371L17.905 10.1419C18.0496 10.3651 18.122 10.4767 18.1888 10.6745C18.2298 10.7957 18.2773 11.0907 18.2765 11.2186C18.2752 11.4273 18.2615 11.4795 18.2343 11.584Z" stroke="#91969B" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M2.08389 10.4704H7.08389M12.9172 10.4704H17.9172M10.0006 5.47038V17.137M10.0006 5.47038C11.1512 5.47038 12.0839 4.53764 12.0839 3.38704M10.0006 5.47038C8.84996 5.47038 7.91722 4.53764 7.91722 3.38704M3.33389 17.137L16.6672 17.137M3.33389 3.38705L7.91722 3.38704M7.91722 3.38704C7.91722 2.23645 8.84996 1.30371 10.0006 1.30371C11.1512 1.30371 12.0839 2.23645 12.0839 3.38704M12.0839 3.38704L16.6672 3.38704M7.40092 11.584C7.06701 12.8625 5.93231 13.8037 4.58389 13.8037C3.23547 13.8037 2.10077 12.8625 1.76686 11.584C1.73958 11.4795 1.72594 11.4273 1.72462 11.2186C1.72381 11.0907 1.77136 10.7957 1.81232 10.6745C1.87915 10.4767 1.95148 10.3651 2.09615 10.1419L4.58389 6.30371L7.07163 10.1419C7.2163 10.3651 7.28864 10.4767 7.35546 10.6745C7.39642 10.7957 7.44397 11.0907 7.44316 11.2186C7.44185 11.4273 7.42821 11.4795 7.40092 11.584ZM18.2343 11.584C17.9003 12.8625 16.7656 13.8037 15.4172 13.8037C14.0688 13.8037 12.9341 12.8625 12.6002 11.584C12.5729 11.4795 12.5593 11.4273 12.558 11.2186C12.5571 11.0907 12.6047 10.7957 12.6457 10.6745C12.7125 10.4767 12.7848 10.3651 12.9295 10.1419L15.4172 6.30371L17.905 10.1419C18.0496 10.3651 18.122 10.4767 18.1888 10.6745C18.2298 10.7957 18.2773 11.0907 18.2765 11.2186C18.2752 11.4273 18.2615 11.4795 18.2343 11.584Z" stroke="#252B34" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>
diff --git a/fabric/src/icon-svg/IconCashflow.svg b/fabric/src/icon-svg/IconCashflow.svg
index 798a162bc..4a8ff3024 100644
--- a/fabric/src/icon-svg/IconCashflow.svg
+++ b/fabric/src/icon-svg/IconCashflow.svg
@@ -1,3 +1,3 @@
 <svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M8 13.6367V17.6367M16 11.6367V17.6367M12 7.63672V17.6367M7.8 21.6367H16.2C17.8802 21.6367 18.7202 21.6367 19.362 21.3097C19.9265 21.0221 20.3854 20.5632 20.673 19.9987C21 19.357 21 18.5169 21 16.8367V8.43672C21 6.75656 21 5.91648 20.673 5.27475C20.3854 4.71026 19.9265 4.25132 19.362 3.9637C18.7202 3.63672 17.8802 3.63672 16.2 3.63672H7.8C6.11984 3.63672 5.27976 3.63672 4.63803 3.9637C4.07354 4.25132 3.6146 4.71026 3.32698 5.27475C3 5.91648 3 6.75656 3 8.43672V16.8367C3 18.5169 3 19.357 3.32698 19.9987C3.6146 20.5632 4.07354 21.0221 4.63803 21.3097C5.27976 21.6367 6.11984 21.6367 7.8 21.6367Z" stroke="#91969B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M8 13.6367V17.6367M16 11.6367V17.6367M12 7.63672V17.6367M7.8 21.6367H16.2C17.8802 21.6367 18.7202 21.6367 19.362 21.3097C19.9265 21.0221 20.3854 20.5632 20.673 19.9987C21 19.357 21 18.5169 21 16.8367V8.43672C21 6.75656 21 5.91648 20.673 5.27475C20.3854 4.71026 19.9265 4.25132 19.362 3.9637C18.7202 3.63672 17.8802 3.63672 16.2 3.63672H7.8C6.11984 3.63672 5.27976 3.63672 4.63803 3.9637C4.07354 4.25132 3.6146 4.71026 3.32698 5.27475C3 5.91648 3 6.75656 3 8.43672V16.8367C3 18.5169 3 19.357 3.32698 19.9987C3.6146 20.5632 4.07354 21.0221 4.63803 21.3097C5.27976 21.6367 6.11984 21.6367 7.8 21.6367Z" stroke="#252B34" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>
diff --git a/fabric/src/icon-svg/IconProfitAndLoss.svg b/fabric/src/icon-svg/IconProfitAndLoss.svg
index 5223d3810..601971402 100644
--- a/fabric/src/icon-svg/IconProfitAndLoss.svg
+++ b/fabric/src/icon-svg/IconProfitAndLoss.svg
@@ -1,3 +1,3 @@
 <svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M19 19.1367H2.6C2.03995 19.1367 1.75992 19.1367 1.54601 19.0277C1.35785 18.9319 1.20487 18.7789 1.10899 18.5907C1 18.3768 1 18.0968 1 17.5367V1.13672M19 5.13672L13.5657 10.571C13.3677 10.769 13.2687 10.868 13.1545 10.9051C13.0541 10.9378 12.9459 10.9378 12.8455 10.9051C12.7313 10.868 12.6323 10.769 12.4343 10.571L10.5657 8.7024C10.3677 8.5044 10.2687 8.40539 10.1545 8.3683C10.0541 8.33567 9.94591 8.33567 9.84549 8.3683C9.73133 8.40539 9.63232 8.5044 9.43431 8.7024L5 13.1367M19 5.13672H15M19 5.13672V9.13672" stroke="#91969B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M19 19.1367H2.6C2.03995 19.1367 1.75992 19.1367 1.54601 19.0277C1.35785 18.9319 1.20487 18.7789 1.10899 18.5907C1 18.3768 1 18.0968 1 17.5367V1.13672M19 5.13672L13.5657 10.571C13.3677 10.769 13.2687 10.868 13.1545 10.9051C13.0541 10.9378 12.9459 10.9378 12.8455 10.9051C12.7313 10.868 12.6323 10.769 12.4343 10.571L10.5657 8.7024C10.3677 8.5044 10.2687 8.40539 10.1545 8.3683C10.0541 8.33567 9.94591 8.33567 9.84549 8.3683C9.73133 8.40539 9.63232 8.5044 9.43431 8.7024L5 13.1367M19 5.13672H15M19 5.13672V9.13672" stroke="#252B34" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>