Feat/categories main page

src/ROUTES.ts

@@ -507,6 +507,10 @@ const ROUTES = {
         route: 'workspace/:policyID/members',
         getRoute: (policyID: string) => `workspace/${policyID}/members` as const,
     },
+    WORKSPACE_CATEGORIES: {
+        route: 'workspace/:policyID/categories',
+        getRoute: (policyID: string) => `workspace/${policyID}/categories` as const,
+    },
     // Referral program promotion
     REFERRAL_DETAILS_MODAL: {
         route: 'referral/:contentType',

src/SCREENS.ts

@@ -207,6 +207,7 @@ const SCREENS = {
         MEMBERS: 'Workspace_Members',
         INVITE: 'Workspace_Invite',
         INVITE_MESSAGE: 'Workspace_Invite_Message',
+        CATEGORIES: 'Workspace_Categories',
         CURRENCY: 'Workspace_Profile_Currency',
         DESCRIPTION: 'Workspace_Profile_Description',
         SHARE: 'Workspace_Profile_Share',

src/components/Icon/Expensicons.ts

@@ -68,6 +68,7 @@ import Flag from '@assets/images/flag.svg';
 import FlagLevelOne from '@assets/images/flag_level_01.svg';
 import FlagLevelTwo from '@assets/images/flag_level_02.svg';
 import FlagLevelThree from '@assets/images/flag_level_03.svg';
+import Folder from '@assets/images/folder.svg';
 import Fullscreen from '@assets/images/fullscreen.svg';
 import Gallery from '@assets/images/gallery.svg';
 import Gear from '@assets/images/gear.svg';
@@ -216,6 +217,7 @@ export {
     FlagLevelTwo,
     FlagLevelThree,
     Fullscreen,
+    Folder,
     Gallery,
     Gear,
     Globe,

src/components/Icon/Illustrations.ts

@@ -5,6 +5,7 @@ import BankUserGreen from '@assets/images/product-illustrations/bank-user--green
 import ConciergeBlue from '@assets/images/product-illustrations/concierge--blue.svg';
 import ConciergeExclamation from '@assets/images/product-illustrations/concierge--exclamation.svg';
 import CreditCardsBlue from '@assets/images/product-illustrations/credit-cards--blue.svg';
+import EmptyStateExpenses from '@assets/images/product-illustrations/emptystate__expenses.svg';
 import GpsTrackOrange from '@assets/images/product-illustrations/gps-track--orange.svg';
 import Hands from '@assets/images/product-illustrations/home-illustration-hands.svg';
 import InvoiceOrange from '@assets/images/product-illustrations/invoice--orange.svg';
@@ -36,6 +37,7 @@ import ConciergeBubble from '@assets/images/simple-illustrations/simple-illustra
 import ConciergeNew from '@assets/images/simple-illustrations/simple-illustration__concierge.svg';
 import CreditCardsNew from '@assets/images/simple-illustrations/simple-illustration__credit-cards.svg';
 import EmailAddress from '@assets/images/simple-illustrations/simple-illustration__email-address.svg';
+import FolderOpen from '@assets/images/simple-illustrations/simple-illustration__folder-open.svg';
 import Gears from '@assets/images/simple-illustrations/simple-illustration__gears.svg';
 import HandCard from '@assets/images/simple-illustrations/simple-illustration__handcard.svg';
 import HandEarth from '@assets/images/simple-illustrations/simple-illustration__handearth.svg';
@@ -76,6 +78,8 @@ export {
     ConciergeExclamation,
     CreditCardsBlue,
     EmailAddress,
+    EmptyStateExpenses,
+    FolderOpen,
     HandCard,
     HotDogStand,
     InvoiceOrange,

src/components/SelectionList/BaseListItem.tsx

@@ -67,7 +67,7 @@ function BaseListItem<TItem extends ListItem>({
                         <View style={wrapperStyle}>
                             {canSelectMultiple && (
                                 <View
-                                    role={CONST.ACCESSIBILITY_ROLE.BUTTON}
+                                    role={CONST.ROLE.BUTTON}
                                     style={StyleUtils.getCheckboxPressableStyle()}
                                 >
                                     <View style={selectMultipleStyle}>

src/components/SelectionList/RadioListItem.tsx

@@ -35,27 +35,30 @@ function RadioListItem({
             rightHandSideComponent={rightHandSideComponent}
             keyForList={item.keyForList}
         >
-            <View style={[styles.flex1, styles.alignItemsStart]}>
-                <TextWithTooltip
-                    shouldShowTooltip={showTooltip}
-                    text={item.text}
-                    textStyles={[
-                        styles.optionDisplayName,
-                        isFocused ? styles.sidebarLinkActiveText : styles.sidebarLinkText,
-                        styles.sidebarLinkTextBold,
-                        styles.pre,
-                        item.alternateText ? styles.mb1 : null,
-                    ]}
-                />
-
-                {!!item.alternateText && (
+            <>
+                <View style={[styles.flex1, styles.alignItemsStart]}>
                     <TextWithTooltip
                         shouldShowTooltip={showTooltip}
-                        text={item.alternateText}
-                        textStyles={[styles.textLabelSupporting, styles.lh16, styles.pre]}
+                        text={item.text}
+                        textStyles={[
+                            styles.optionDisplayName,
+                            isFocused ? styles.sidebarLinkActiveText : styles.sidebarLinkText,
+                            styles.sidebarLinkTextBold,
+                            styles.pre,
+                            item.alternateText ? styles.mb1 : null,
+                        ]}
                     />
-                )}
-            </View>
+
+                    {!!item.alternateText && (
+                        <TextWithTooltip
+                            shouldShowTooltip={showTooltip}
+                            text={item.alternateText}
+                            textStyles={[styles.textLabelSupporting, styles.lh16, styles.pre]}
+                        />
+                    )}
+                </View>
+                {!!item.rightElement && item.rightElement}
+            </>
         </BaseListItem>
     );
 }