From d25bcdf9dcbd7bac51de93b8e5ee8375a5e32f42 Mon Sep 17 00:00:00 2001 From: Wojciech Boman Date: Tue, 23 Apr 2024 15:56:12 +0200 Subject: [PATCH 01/18] Add template of SearchTableHeader --- src/languages/en.ts | 3 ++ src/languages/es.ts | 1 + src/libs/ReportUtils.ts | 5 ++++ src/pages/Search/SearchPage.tsx | 27 +++++++++++++++-- src/pages/Search/SearchTableHeader.tsx | 41 ++++++++++++++++++++++++++ 5 files changed, 74 insertions(+), 3 deletions(-) create mode 100644 src/pages/Search/SearchTableHeader.tsx diff --git a/src/languages/en.ts b/src/languages/en.ts index fcb683472215..af77628415c3 100755 --- a/src/languages/en.ts +++ b/src/languages/en.ts @@ -125,6 +125,7 @@ export default { buttonConfirm: 'Got it', name: 'Name', attachment: 'Attachment', + from: 'From', to: 'To', optional: 'Optional', new: 'New', @@ -324,6 +325,8 @@ export default { subtitleText3: 'button below.', }, businessName: 'Business name', + type: 'Type', + action: 'Action', }, location: { useCurrent: 'Use current location', diff --git a/src/languages/es.ts b/src/languages/es.ts index 57de4057e775..fcfd7ffa431a 100644 --- a/src/languages/es.ts +++ b/src/languages/es.ts @@ -115,6 +115,7 @@ export default { buttonConfirm: 'Ok, entendido', name: 'Nombre', attachment: 'Archivo adjunto', + from: 'De', to: 'A', optional: 'Opcional', new: 'Nuevo', diff --git a/src/libs/ReportUtils.ts b/src/libs/ReportUtils.ts index a1e63bc5f48f..d3fc83e5553b 100644 --- a/src/libs/ReportUtils.ts +++ b/src/libs/ReportUtils.ts @@ -6147,6 +6147,10 @@ function canReportBeMentionedWithinPolicy(report: OnyxEntry, policyID: s return isChatRoom(report) && !isThread(report); } +function shouldShowMerchantColumn(transactions: Transaction[]) { + return transactions.some((transaction) => isExpenseReport(allReports?.[transaction.reportID] ?? {})); +} + export { addDomainToShortMention, areAllRequestsBeingSmartScanned, @@ -6388,6 +6392,7 @@ export { updateOptimisticParentReportAction, updateReportPreview, temporary_getMoneyRequestOptions, + shouldShowMerchantColumn, }; export type { diff --git a/src/pages/Search/SearchPage.tsx b/src/pages/Search/SearchPage.tsx index 3f69371841ce..cdf92344d945 100644 --- a/src/pages/Search/SearchPage.tsx +++ b/src/pages/Search/SearchPage.tsx @@ -1,9 +1,17 @@ import type {StackScreenProps} from '@react-navigation/stack'; -import React from 'react'; +import React, {useEffect, useState} from 'react'; +import {ValueOf} from 'type-fest'; +import HeaderWithBackButton from '@components/HeaderWithBackButton'; +import * as Illustrations from '@components/Icon/Illustrations'; import ScreenWrapper from '@components/ScreenWrapper'; +import SelectionList from '@components/SelectionList'; +import UserListItem from '@components/SelectionList/UserListItem'; +import * as DeviceCapabilities from '@libs/DeviceCapabilities'; +import Navigation from '@libs/Navigation/Navigation'; import type {CentralPaneNavigatorParamList} from '@libs/Navigation/types'; +import CONST from '@src/CONST'; import type SCREENS from '@src/SCREENS'; -import SearchResults from './SearchResults'; +import SearchTableHeader from './SearchTableHeader'; import useCustomBackHandler from './useCustomBackHandler'; type SearchPageProps = StackScreenProps; @@ -13,7 +21,20 @@ function SearchPage({route}: SearchPageProps) { return ( - + + } + ListItem={UserListItem} + onSelectRow={() => {}} + sections={[]} + onCheckboxPress={() => {}} + shouldPreventDefaultFocusOnSelectRow={!DeviceCapabilities.canUseTouchScreen()} + /> ); } diff --git a/src/pages/Search/SearchTableHeader.tsx b/src/pages/Search/SearchTableHeader.tsx new file mode 100644 index 000000000000..77fd5300d6aa --- /dev/null +++ b/src/pages/Search/SearchTableHeader.tsx @@ -0,0 +1,41 @@ +import React from 'react'; +import {View} from 'react-native'; +import Text from '@components/Text'; +import useLocalize from '@hooks/useLocalize'; +import useThemeStyles from '@hooks/useThemeStyles'; +import useWindowDimensions from '@hooks/useWindowDimensions'; +import * as ReportUtils from '@libs/ReportUtils'; +import type {Transaction} from '@src/types/onyx'; + +type SearchTableHeaderProps = { + data?: Transaction[]; + onSelectAll?: () => void; +}; + +function SearchTableHeader({data, onSelectAll}: SearchTableHeaderProps) { + const {translate} = useLocalize(); + const styles = useThemeStyles(); + const {isSmallScreenWidth} = useWindowDimensions(); + + // const showMerchantColumn = ReportUtils.shouldShowMerchantColumn(data); + const showMerchantColumn = isSmallScreenWidth && true; + + return ( + + {translate('common.receipt')} + {translate('common.date')} + {showMerchantColumn && {translate('common.merchant')}} + {translate('common.description')} + {translate('common.from')} + {translate('common.to')} + {translate('common.category')} + {translate('common.total')} + {translate('common.type')} + {translate('common.action')} + + ); +} + +SearchTableHeader.displayName = 'SearchTableHeader'; + +export default SearchTableHeader; From c423cb8b0aa248c9f792cf997d76d3ead84aa276 Mon Sep 17 00:00:00 2001 From: Wojciech Boman Date: Wed, 24 Apr 2024 16:31:37 +0200 Subject: [PATCH 02/18] Add template of ExpenseListItem --- .../SelectionList/ExpenseListItem.tsx | 218 ++++++++++++++++++ src/components/SelectionList/types.ts | 6 +- src/pages/Search/SearchPage.tsx | 43 +++- 3 files changed, 257 insertions(+), 10 deletions(-) create mode 100644 src/components/SelectionList/ExpenseListItem.tsx diff --git a/src/components/SelectionList/ExpenseListItem.tsx b/src/components/SelectionList/ExpenseListItem.tsx new file mode 100644 index 000000000000..a460bd3b3d01 --- /dev/null +++ b/src/components/SelectionList/ExpenseListItem.tsx @@ -0,0 +1,218 @@ +import {format} from 'date-fns'; +import React, {useCallback} from 'react'; +import {View} from 'react-native'; +import Icon from '@components/Icon'; +import * as Expensicons from '@components/Icon/Expensicons'; +import MultipleAvatars from '@components/MultipleAvatars'; +import PressableWithFeedback from '@components/Pressable/PressableWithFeedback'; +import TextWithTooltip from '@components/TextWithTooltip'; +import useStyleUtils from '@hooks/useStyleUtils'; +import useTheme from '@hooks/useTheme'; +import useThemeStyles from '@hooks/useThemeStyles'; +import CONST from '@src/CONST'; +import BaseListItem from './BaseListItem'; +import type {ExpenseListItemProps, ListItem} from './types'; + +function ExpenseListItem({ + item, + isFocused, + showTooltip, + isDisabled, + canSelectMultiple, + onSelectRow, + onCheckboxPress, + onDismissError, + shouldPreventDefaultFocusOnSelectRow, + rightHandSideComponent, + onFocus, + shouldSyncFocus, +}: ExpenseListItemProps) { + const styles = useThemeStyles(); + const theme = useTheme(); + const StyleUtils = useStyleUtils(); + const focusedBackgroundColor = styles.sidebarLinkActive.backgroundColor; + const hoveredBackgroundColor = styles.sidebarLinkHover?.backgroundColor ? styles.sidebarLinkHover.backgroundColor : theme.sidebar; + + const handleCheckboxPress = useCallback(() => { + if (onCheckboxPress) { + onCheckboxPress(item); + } else { + onSelectRow(item); + } + }, [item, onCheckboxPress, onSelectRow]); + + return ( + + {(hovered) => ( + <> + {canSelectMultiple && ( + + + {item.isSelected && ( + + )} + + + )} + {!!item.icons && ( + + )} + + + + + + + + + + + + + + + + + + + + + + {/* + + + + */} + {!!item.rightElement && item.rightElement} + + )} + + ); +} + +ExpenseListItem.displayName = 'ExpenseListItem'; + +export default ExpenseListItem; diff --git a/src/components/SelectionList/types.ts b/src/components/SelectionList/types.ts index 50929095dc91..f7c3697b2814 100644 --- a/src/components/SelectionList/types.ts +++ b/src/components/SelectionList/types.ts @@ -7,6 +7,7 @@ import type {Errors, Icon, PendingAction} from '@src/types/onyx/OnyxCommon'; import type {ReceiptErrors} from '@src/types/onyx/Transaction'; import type ChildrenProps from '@src/types/utils/ChildrenProps'; import type IconAsset from '@src/types/utils/IconAsset'; +import type ExpenseListItem from './ExpenseListItem'; import type InviteMemberListItem from './InviteMemberListItem'; import type RadioListItem from './RadioListItem'; import type TableListItem from './TableListItem'; @@ -180,7 +181,9 @@ type RadioListItemProps = ListItemProps; type TableListItemProps = ListItemProps; -type ValidListItem = typeof RadioListItem | typeof UserListItem | typeof TableListItem | typeof InviteMemberListItem; +type ExpenseListItemProps = ListItemProps; + +type ValidListItem = typeof RadioListItem | typeof UserListItem | typeof TableListItem | typeof InviteMemberListItem | typeof ExpenseListItem; type Section = { /** Title of the section */ @@ -373,6 +376,7 @@ export type { RadioListItemProps, TableListItemProps, InviteMemberListItemProps, + ExpenseListItemProps, ListItem, ListItemProps, FlattenedSectionsReturn, diff --git a/src/pages/Search/SearchPage.tsx b/src/pages/Search/SearchPage.tsx index cdf92344d945..4dd33b25bb15 100644 --- a/src/pages/Search/SearchPage.tsx +++ b/src/pages/Search/SearchPage.tsx @@ -1,24 +1,47 @@ import type {StackScreenProps} from '@react-navigation/stack'; -import React, {useEffect, useState} from 'react'; -import {ValueOf} from 'type-fest'; +import React from 'react'; +import {View} from 'react-native'; import HeaderWithBackButton from '@components/HeaderWithBackButton'; import * as Illustrations from '@components/Icon/Illustrations'; import ScreenWrapper from '@components/ScreenWrapper'; import SelectionList from '@components/SelectionList'; -import UserListItem from '@components/SelectionList/UserListItem'; +import ExpenseListItem from '@components/SelectionList/ExpenseListItem'; +import Text from '@components/Text'; +import useLocalize from '@hooks/useLocalize'; +import useThemeStyles from '@hooks/useThemeStyles'; +import useWindowDimensions from '@hooks/useWindowDimensions'; import * as DeviceCapabilities from '@libs/DeviceCapabilities'; -import Navigation from '@libs/Navigation/Navigation'; import type {CentralPaneNavigatorParamList} from '@libs/Navigation/types'; -import CONST from '@src/CONST'; import type SCREENS from '@src/SCREENS'; -import SearchTableHeader from './SearchTableHeader'; import useCustomBackHandler from './useCustomBackHandler'; type SearchPageProps = StackScreenProps; function SearchPage({route}: SearchPageProps) { + const {translate} = useLocalize(); + const styles = useThemeStyles(); + const {isSmallScreenWidth} = useWindowDimensions(); useCustomBackHandler(); + const getListHeader = () => { + // const showMerchantColumn = ReportUtils.shouldShowMerchantColumn(data); + const showMerchantColumn = isSmallScreenWidth && true; + + return ( + + {/* {translate('common.receipt')} */} + {translate('common.date')} + {showMerchantColumn && {translate('common.merchant')}} + {translate('common.description')} + {translate('common.from')} + {translate('common.to')} + {translate('common.category')} + {translate('common.tag')} + {translate('common.total')} + + ); + }; + return ( } - ListItem={UserListItem} + customListHeader={getListHeader()} + ListItem={ExpenseListItem} onSelectRow={() => {}} - sections={[]} + onSelectAll={() => {}} + sections={[{data: [], isDisabled: false}]} onCheckboxPress={() => {}} shouldPreventDefaultFocusOnSelectRow={!DeviceCapabilities.canUseTouchScreen()} + listHeaderWrapperStyle={[styles.ph9, styles.pv3, styles.pb5]} /> ); From ff30cb544dbfd8b9c044a2b3e09ea43c0d7f117f Mon Sep 17 00:00:00 2001 From: Wojciech Boman Date: Fri, 26 Apr 2024 07:44:52 +0200 Subject: [PATCH 03/18] Add test data to SearchPage --- src/pages/Search/SearchPage.tsx | 49 ++++++++++++++++++++++++++++++++- 1 file changed, 48 insertions(+), 1 deletion(-) diff --git a/src/pages/Search/SearchPage.tsx b/src/pages/Search/SearchPage.tsx index a48192bdd68d..2ddea460de10 100644 --- a/src/pages/Search/SearchPage.tsx +++ b/src/pages/Search/SearchPage.tsx @@ -19,6 +19,53 @@ import useCustomBackHandler from './useCustomBackHandler'; type SearchPageProps = StackScreenProps; +const data = [ + { + receipt: {source: 'http...'}, + hasEReceipt: false, + created: '2024-04-11 00:00:00', + amount: 12500, + type: 'cash', + reportID: '1', + transactionThreadReportID: '2', + transactionID: '1234', + modifiedCreated: '2024-05-06 00:00:00', + description: 'description description description description', + from: { + displayName: 'TestUser1', + avatarUrl: '', + }, + to: { + displayName: 'TestUser2', + avatarUrl: '', + }, + category: 'Bananas', + tag: 'Green', + }, + { + receipt: {source: 'http...'}, + hasEReceipt: false, + created: '2024-04-11 00:00:00', + amount: 12500, + type: 'cash', // not present in live data (data outside of snapshot_) + reportID: '1', + transactionThreadReportID: '2', + transactionID: '5555', + modifiedCreated: '2024-05-06 00:00:00', + description: 'description', + from: { + displayName: 'TestUser1', + avatarUrl: '', + }, + to: { + displayName: 'TestUser2', + avatarUrl: '', + }, + category: 'Bananas', + tag: 'Green', + }, +]; + function SearchPage({route}: SearchPageProps) { const {translate} = useLocalize(); const styles = useThemeStyles(); @@ -57,7 +104,7 @@ function SearchPage({route}: SearchPageProps) { ListItem={ExpenseListItem} onSelectRow={() => {}} onSelectAll={() => {}} - sections={[{data: [], isDisabled: false}]} + sections={[{data, isDisabled: false}]} onCheckboxPress={() => {}} shouldPreventDefaultFocusOnSelectRow={!DeviceCapabilities.canUseTouchScreen()} listHeaderWrapperStyle={[styles.ph9, styles.pv3, styles.pb5]} From 13273b626c35105006d9c4c3d2cd26451111417f Mon Sep 17 00:00:00 2001 From: Wojciech Boman Date: Fri, 26 Apr 2024 14:11:09 +0200 Subject: [PATCH 04/18] Rename ExpenseListItem to TransactionListItem --- .../SelectionList/TemporaryExpenseListItem.tsx | 4 ++-- .../{ExpenseListItem.tsx => TransactionListItem.tsx} | 10 +++++----- src/components/SelectionList/types.ts | 8 ++++---- src/libs/SearchUtils.ts | 7 ++++--- src/pages/Search/SearchPage.tsx | 4 ++-- 5 files changed, 17 insertions(+), 16 deletions(-) rename src/components/SelectionList/{ExpenseListItem.tsx => TransactionListItem.tsx} (97%) diff --git a/src/components/SelectionList/TemporaryExpenseListItem.tsx b/src/components/SelectionList/TemporaryExpenseListItem.tsx index 011a6d73ac4f..49544c4f5557 100644 --- a/src/components/SelectionList/TemporaryExpenseListItem.tsx +++ b/src/components/SelectionList/TemporaryExpenseListItem.tsx @@ -6,7 +6,7 @@ import type {SearchTransaction} from '@src/types/onyx/SearchResults'; // NOTE: This is a completely temporary mock item so that something can be displayed in SearchWidget // This should be removed and implement properly in: https://github.com/Expensify/App/issues/39877 -function ExpenseListItem({item}: {item: SearchTransaction}) { +function TransactionListItem({item}: {item: SearchTransaction}) { const styles = useThemeStyles(); return ( @@ -15,4 +15,4 @@ function ExpenseListItem({item}: {item: SearchTransaction}) { ); } -export default ExpenseListItem; +export default TransactionListItem; diff --git a/src/components/SelectionList/ExpenseListItem.tsx b/src/components/SelectionList/TransactionListItem.tsx similarity index 97% rename from src/components/SelectionList/ExpenseListItem.tsx rename to src/components/SelectionList/TransactionListItem.tsx index a460bd3b3d01..00d80c6ce11b 100644 --- a/src/components/SelectionList/ExpenseListItem.tsx +++ b/src/components/SelectionList/TransactionListItem.tsx @@ -11,9 +11,9 @@ import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; import CONST from '@src/CONST'; import BaseListItem from './BaseListItem'; -import type {ExpenseListItemProps, ListItem} from './types'; +import type {TransactionListItemProps, ListItem} from './types'; -function ExpenseListItem({ +function TransactionListItem({ item, isFocused, showTooltip, @@ -26,7 +26,7 @@ function ExpenseListItem({ rightHandSideComponent, onFocus, shouldSyncFocus, -}: ExpenseListItemProps) { +}: TransactionListItemProps) { const styles = useThemeStyles(); const theme = useTheme(); const StyleUtils = useStyleUtils(); @@ -213,6 +213,6 @@ function ExpenseListItem({ ); } -ExpenseListItem.displayName = 'ExpenseListItem'; +TransactionListItem.displayName = 'TransactionListItem'; -export default ExpenseListItem; +export default TransactionListItem; diff --git a/src/components/SelectionList/types.ts b/src/components/SelectionList/types.ts index f7c3697b2814..b72bba02ee19 100644 --- a/src/components/SelectionList/types.ts +++ b/src/components/SelectionList/types.ts @@ -7,7 +7,7 @@ import type {Errors, Icon, PendingAction} from '@src/types/onyx/OnyxCommon'; import type {ReceiptErrors} from '@src/types/onyx/Transaction'; import type ChildrenProps from '@src/types/utils/ChildrenProps'; import type IconAsset from '@src/types/utils/IconAsset'; -import type ExpenseListItem from './ExpenseListItem'; +import type TransactionListItem from './TransactionListItem'; import type InviteMemberListItem from './InviteMemberListItem'; import type RadioListItem from './RadioListItem'; import type TableListItem from './TableListItem'; @@ -181,9 +181,9 @@ type RadioListItemProps = ListItemProps; type TableListItemProps = ListItemProps; -type ExpenseListItemProps = ListItemProps; +type TransactionListItemProps = ListItemProps; -type ValidListItem = typeof RadioListItem | typeof UserListItem | typeof TableListItem | typeof InviteMemberListItem | typeof ExpenseListItem; +type ValidListItem = typeof RadioListItem | typeof UserListItem | typeof TableListItem | typeof InviteMemberListItem | typeof TransactionListItem; type Section = { /** Title of the section */ @@ -376,7 +376,7 @@ export type { RadioListItemProps, TableListItemProps, InviteMemberListItemProps, - ExpenseListItemProps, + TransactionListItemProps, ListItem, ListItemProps, FlattenedSectionsReturn, diff --git a/src/libs/SearchUtils.ts b/src/libs/SearchUtils.ts index ccced12a0bc4..c78a7a48c297 100644 --- a/src/libs/SearchUtils.ts +++ b/src/libs/SearchUtils.ts @@ -1,10 +1,11 @@ -import ExpenseListItem from '@components/SelectionList/TemporaryExpenseListItem'; + +import TransactionListItem from '@components/SelectionList/TransactionListItem'; import type * as OnyxTypes from '@src/types/onyx'; import type {SearchTransaction} from '@src/types/onyx/SearchResults'; const searchTypeToItemMap = { transaction: { - listItem: ExpenseListItem, + listItem: TransactionListItem, }, }; @@ -17,7 +18,7 @@ const getTransactionsSections = (data: OnyxTypes.SearchResults['data']): SearchT * TODO: in future make this function generic and return specific item component based on type * For now only 1 search item type exists in the app so this function is simplified */ -function getListItem(): typeof ExpenseListItem { +function getListItem(): typeof TransactionListItem { return searchTypeToItemMap.transaction.listItem; } diff --git a/src/pages/Search/SearchPage.tsx b/src/pages/Search/SearchPage.tsx index 2ddea460de10..22482e33ab4e 100644 --- a/src/pages/Search/SearchPage.tsx +++ b/src/pages/Search/SearchPage.tsx @@ -6,7 +6,7 @@ import * as Illustrations from '@components/Icon/Illustrations'; import ScreenWrapper from '@components/ScreenWrapper'; import Search from '@components/Search'; import SelectionList from '@components/SelectionList'; -import ExpenseListItem from '@components/SelectionList/ExpenseListItem'; +import TransactionListItem from '@components/SelectionList/TransactionListItem'; import Text from '@components/Text'; import useLocalize from '@hooks/useLocalize'; import useThemeStyles from '@hooks/useThemeStyles'; @@ -101,7 +101,7 @@ function SearchPage({route}: SearchPageProps) { {}} onSelectAll={() => {}} sections={[{data, isDisabled: false}]} From 0ec7b8a4ddea409a375c01d19dbbb02e1de80f09 Mon Sep 17 00:00:00 2001 From: Wojciech Boman Date: Fri, 26 Apr 2024 17:16:55 +0200 Subject: [PATCH 05/18] Modify TransactionListItem --- .../TemporaryExpenseListItem.tsx | 18 -- .../SelectionList/TransactionListItem.tsx | 203 ++++++++---------- src/pages/Search/SearchPage.tsx | 28 +-- src/styles/index.ts | 5 + 4 files changed, 110 insertions(+), 144 deletions(-) delete mode 100644 src/components/SelectionList/TemporaryExpenseListItem.tsx diff --git a/src/components/SelectionList/TemporaryExpenseListItem.tsx b/src/components/SelectionList/TemporaryExpenseListItem.tsx deleted file mode 100644 index 49544c4f5557..000000000000 --- a/src/components/SelectionList/TemporaryExpenseListItem.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import React from 'react'; -import {View} from 'react-native'; -import Text from '@components/Text'; -import useThemeStyles from '@hooks/useThemeStyles'; -import type {SearchTransaction} from '@src/types/onyx/SearchResults'; - -// NOTE: This is a completely temporary mock item so that something can be displayed in SearchWidget -// This should be removed and implement properly in: https://github.com/Expensify/App/issues/39877 -function TransactionListItem({item}: {item: SearchTransaction}) { - const styles = useThemeStyles(); - return ( - - Item: {item.transactionID} - - ); -} - -export default TransactionListItem; diff --git a/src/components/SelectionList/TransactionListItem.tsx b/src/components/SelectionList/TransactionListItem.tsx index 00d80c6ce11b..9bd2e21bc011 100644 --- a/src/components/SelectionList/TransactionListItem.tsx +++ b/src/components/SelectionList/TransactionListItem.tsx @@ -1,17 +1,22 @@ import {format} from 'date-fns'; import React, {useCallback} from 'react'; import {View} from 'react-native'; +import Avatar from '@components/Avatar'; +import Button from '@components/Button'; import Icon from '@components/Icon'; import * as Expensicons from '@components/Icon/Expensicons'; import MultipleAvatars from '@components/MultipleAvatars'; +import {usePersonalDetails} from '@components/OnyxProvider'; import PressableWithFeedback from '@components/Pressable/PressableWithFeedback'; +import Text from '@components/Text'; import TextWithTooltip from '@components/TextWithTooltip'; import useStyleUtils from '@hooks/useStyleUtils'; import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; +import * as CurrencyUtils from '@libs/CurrencyUtils'; import CONST from '@src/CONST'; import BaseListItem from './BaseListItem'; -import type {TransactionListItemProps, ListItem} from './types'; +import type {ListItem, TransactionListItemProps} from './types'; function TransactionListItem({ item, @@ -30,6 +35,7 @@ function TransactionListItem({ const styles = useThemeStyles(); const theme = useTheme(); const StyleUtils = useStyleUtils(); + const personalDetails = usePersonalDetails() ?? CONST.EMPTY_OBJECT; const focusedBackgroundColor = styles.sidebarLinkActive.backgroundColor; const hoveredBackgroundColor = styles.sidebarLinkHover?.backgroundColor ? styles.sidebarLinkHover.backgroundColor : theme.sidebar; @@ -41,6 +47,8 @@ function TransactionListItem({ } }, [item, onCheckboxPress, onSelectRow]); + console.log('personalDetails', personalDetails); + return ( ({ ]} /> )} - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + {personalDetails[item.managerID]?.displayName} + + + + + + + + {personalDetails[item.accountID]?.displayName} + + + + + + + + + + + + + + + - styles.justifyContentCenter, - ]} - /> + +