Create status bar

src/CONST.ts

@@ -5243,8 +5243,6 @@ const CONST = {
     SEARCH: {
         RESULTS_PAGE_SIZE: 50,
         DATA_TYPES: {
-            TRANSACTION: 'transaction',
-            REPORT: 'report',
             EXPENSE: 'expense',
             INVOICE: 'invoice',
             TRIP: 'trip',
@@ -5273,9 +5271,10 @@ const CONST = {
         STATUS: {
             EXPENSE: {
                 ALL: 'all',
-                SHARED: 'shared',
                 DRAFTS: 'drafts',
-                FINISHED: 'finished',
+                OUTSTANDING: 'outstanding',
+                APPROVED: 'approved',
+                PAID: 'paid',
             },
             INVOICE: {
                 ALL: 'all',
@@ -5290,14 +5289,6 @@ const CONST = {
                 PAID: 'paid',
             },
         },
-        TAB: {
-            EXPENSE: {
-                ALL: 'type:expense status:all',
-                SHARED: 'type:expense status:shared',
-                DRAFTS: 'type:expense status:drafts',
-                FINISHED: 'type:expense status:finished',
-            },
-        },
         TABLE_COLUMNS: {
             RECEIPT: 'receipt',
             DATE: 'date',

src/components/Button/index.tsx

@@ -29,6 +29,9 @@ type ButtonProps = Partial<ChildrenProps> & {
     /** The fill color to pass into the icon. */
     iconFill?: string;
 
+    /** The fill color to pass into the icon when the button is hovered. */
+    iconHoverFill?: string;
+
     /** Any additional styles to pass to the left icon container. */
     iconStyles?: StyleProp<ViewStyle>;
 
@@ -80,9 +83,15 @@ type ButtonProps = Partial<ChildrenProps> & {
     /** Additional text styles */
     textStyles?: StyleProp<TextStyle>;
 
+    /** Additional text styles when the button is hovered */
+    textHoverStyles?: StyleProp<TextStyle>;
+
     /** Whether we should use the default hover style */
     shouldUseDefaultHover?: boolean;
 
+    /** Additional hover styles */
+    hoverStyles?: StyleProp<ViewStyle>;
+
     /** Whether we should use the success theme color */
     success?: boolean;
 
@@ -170,6 +179,7 @@ function Button(
 
         iconRight = Expensicons.ArrowRight,
         iconFill,
+        iconHoverFill,
         icon = null,
         iconStyles = [],
         iconRightStyles = [],
@@ -194,8 +204,10 @@ function Button(
         style = [],
         innerStyles = [],
         textStyles = [],
+        textHoverStyles = [],
 
         shouldUseDefaultHover = true,
+        hoverStyles = undefined,
         success = false,
         danger = false,
 
@@ -238,6 +250,7 @@ function Button(
                     danger && styles.buttonDangerText,
                     !!icon && styles.textAlignLeft,
                     textStyles,
+                    isHovered && textHoverStyles,
                     link && styles.link,
                     link && isHovered && StyleUtils.getColorStyle(theme.linkHover),
                     link && styles.fontWeightNormal,
@@ -259,7 +272,7 @@ function Button(
                                 <Icon
                                     src={icon}
                                     hasText={!!text}
-                                    fill={iconFill ?? (success || danger ? theme.textLight : theme.icon)}
+                                    fill={isHovered ? iconHoverFill : iconFill ?? (success || danger ? theme.textLight : theme.icon)}
                                     small={small}
                                     medium={medium}
                                     large={large}
@@ -273,14 +286,14 @@ function Button(
                             {!isSplitButton ? (
                                 <Icon
                                     src={iconRight}
-                                    fill={iconFill ?? (success || danger ? theme.textLight : theme.icon)}
+                                    fill={isHovered ? iconHoverFill : iconFill ?? (success || danger ? theme.textLight : theme.icon)}
                                     small={medium}
                                     medium={large}
                                 />
                             ) : (
                                 <Icon
                                     src={iconRight}
-                                    fill={iconFill ?? (success || danger ? theme.textLight : theme.icon)}
+                                    fill={isHovered ? iconHoverFill : iconFill ?? (success || danger ? theme.textLight : theme.icon)}
                                     small={small}
                                     medium={medium}
                                     large={large}
@@ -358,6 +371,7 @@ function Button(
                     shouldUseDefaultHover && !isDisabled ? styles.buttonDefaultHovered : undefined,
                     success && !isDisabled ? styles.buttonSuccessHovered : undefined,
                     danger && !isDisabled ? styles.buttonDangerHovered : undefined,
+                    hoverStyles,
                 ]}
                 id={id}
                 accessibilityLabel={accessibilityLabel}

src/components/Icon/Illustrations.ts

@@ -58,6 +58,7 @@ import CreditCardsNew from '@assets/images/simple-illustrations/simple-illustrat
 import CreditCardEyes from '@assets/images/simple-illustrations/simple-illustration__creditcardeyes.svg';
 import EmailAddress from '@assets/images/simple-illustrations/simple-illustration__email-address.svg';
 import EmptyState from '@assets/images/simple-illustrations/simple-illustration__empty-state.svg';
+import EnvelopeReceipt from '@assets/images/simple-illustrations/simple-illustration__envelopereceipt.svg';
 import Filters from '@assets/images/simple-illustrations/simple-illustration__filters.svg';
 import FolderOpen from '@assets/images/simple-illustrations/simple-illustration__folder-open.svg';
 import Gears from '@assets/images/simple-illustrations/simple-illustration__gears.svg';
@@ -121,6 +122,7 @@ export {
     EmailAddress,
     EmptyCardState,
     EmptyStateExpenses,
+    EnvelopeReceipt,
     FolderOpen,
     HandCard,
     HotDogStand,

src/components/Search/SearchPageHeader.tsx

@@ -27,11 +27,11 @@ import CONST from '@src/CONST';
 import type {TranslationPaths} from '@src/languages/types';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
-import type {SearchReport} from '@src/types/onyx/SearchResults';
+import type {SearchDataTypes, SearchReport} from '@src/types/onyx/SearchResults';
 import type DeepValueOf from '@src/types/utils/DeepValueOf';
 import type IconAsset from '@src/types/utils/IconAsset';
 import {useSearchContext} from './SearchContext';
-import type {SearchQueryJSON, SearchStatus} from './types';
+import type {SearchQueryJSON} from './types';
 
 type HeaderWrapperProps = Pick<HeaderWithBackButtonProps, 'title' | 'subtitle' | 'icon' | 'children'> & {
     subtitleStyles?: StyleProp<TextStyle>;
@@ -100,13 +100,23 @@ type SearchPageHeaderProps = {
 
 type SearchHeaderOptionValue = DeepValueOf<typeof CONST.SEARCH.BULK_ACTION_TYPES> | undefined;
 
-const headerContent: {[key in SearchStatus]: {icon: IconAsset; titleText: TranslationPaths}} = {
-    all: {icon: Illustrations.MoneyReceipts, titleText: 'common.expenses'},
-    shared: {icon: Illustrations.SendMoney, titleText: 'common.shared'},
-    drafts: {icon: Illustrations.Pencil, titleText: 'common.drafts'},
-    finished: {icon: Illustrations.CheckmarkCircle, titleText: 'common.finished'},
+type HeaderContent = {
+    icon: IconAsset;
+    titleText: TranslationPaths;
 };
 
+function getHeaderContent(type: SearchDataTypes): HeaderContent {
+    switch (type) {
+        case CONST.SEARCH.DATA_TYPES.INVOICE:
+            return {icon: Illustrations.EnvelopeReceipt, titleText: 'workspace.common.invoices'};
+        case CONST.SEARCH.DATA_TYPES.TRIP:
+            return {icon: Illustrations.Luggage, titleText: 'travel.trips'};
+        case CONST.SEARCH.DATA_TYPES.EXPENSE:
+        default:
+            return {icon: Illustrations.MoneyReceipts, titleText: 'common.expenses'};
+    }
+}
+
 function SearchPageHeader({queryJSON, hash, onSelectDeleteOption, setOfflineModalOpen, setDownloadErrorModalOpen, isCustomQuery, data}: SearchPageHeaderProps) {
     const {translate} = useLocalize();
     const theme = useTheme();
@@ -131,10 +141,10 @@ function SearchPageHeader({queryJSON, hash, onSelectDeleteOption, setOfflineModa
                 .map((item) => item.reportID),
         [data, selectedTransactions],
     );
-    const {status} = queryJSON;
-    const headerSubtitle = isCustomQuery ? SearchUtils.getSearchHeaderTitle(queryJSON) : translate(headerContent[status]?.titleText);
+    const {status, type} = queryJSON;
+    const headerSubtitle = isCustomQuery ? SearchUtils.getSearchHeaderTitle(queryJSON) : translate(getHeaderContent(type).titleText);
     const headerTitle = isCustomQuery ? translate('search.filtersHeader') : '';
-    const headerIcon = isCustomQuery ? Illustrations.Filters : headerContent[status]?.icon;
+    const headerIcon = isCustomQuery ? Illustrations.Filters : getHeaderContent(type).icon;
 
     const subtitleStyles = isCustomQuery ? {} : styles.textHeadlineH2;