Add approved column

src/CONST/index.ts

@@ -6688,6 +6688,7 @@ const CONST = {
                     RECEIPT: this.TABLE_COLUMNS.RECEIPT,
                     DATE: this.TABLE_COLUMNS.DATE,
                     SUBMITTED: this.TABLE_COLUMNS.SUBMITTED,
+                    APPROVED: this.TABLE_COLUMNS.APPROVED,
                     MERCHANT: this.TABLE_COLUMNS.MERCHANT,
                     FROM: this.TABLE_COLUMNS.FROM,
                     TO: this.TABLE_COLUMNS.TO,
@@ -6698,6 +6699,7 @@ const CONST = {
                 EXPENSE_REPORT: {
                     DATE: this.TABLE_COLUMNS.DATE,
                     SUBMITTED: this.TABLE_COLUMNS.SUBMITTED,
+                    APPROVED: this.TABLE_COLUMNS.APPROVED,
                     STATUS: this.TABLE_COLUMNS.STATUS,
                     TITLE: this.TABLE_COLUMNS.TITLE,
                     FROM: this.TABLE_COLUMNS.FROM,
@@ -6776,6 +6778,7 @@ const CONST = {
             RECEIPT: 'receipt',
             DATE: 'date',
             SUBMITTED: 'submitted',
+            APPROVED: 'approved',
             MERCHANT: 'merchant',
             DESCRIPTION: 'description',
             FROM: 'from',

src/components/Search/index.tsx

@@ -1037,7 +1037,7 @@ function Search({
         navigation.setParams({q: newQuery, rawQuery: undefined});
     };
 
-    const {shouldShowYearCreated, shouldShowYearSubmitted} = shouldShowYearUtil(searchResults?.data, isExpenseReportType ?? false);
+    const {shouldShowYearCreated, shouldShowYearSubmitted, shouldShowYearApproved} = shouldShowYearUtil(searchResults?.data, isExpenseReportType ?? false);
     const {shouldShowAmountInWideColumn, shouldShowTaxAmountInWideColumn} = getWideAmountIndicators(searchResults?.data);
     const shouldShowSorting = !validGroupBy;
     const shouldShowTableHeader = isLargeScreenWidth && !isChat && !validGroupBy;
@@ -1069,6 +1069,7 @@ function Search({
                                     sortBy={sortBy}
                                     shouldShowYear={shouldShowYearCreated}
                                     shouldShowYearSubmitted={shouldShowYearSubmitted}
+                                    shouldShowYearApproved={shouldShowYearApproved}
                                     isAmountColumnWide={shouldShowAmountInWideColumn}
                                     isTaxAmountColumnWide={shouldShowTaxAmountInWideColumn}
                                     shouldShowSorting={shouldShowSorting}

src/components/SelectionListWithSections/Search/ExpenseReportListItemRow.tsx

@@ -97,6 +97,15 @@ function ExpenseReportListItemRow({
                 />
             </View>
         ),
+        [CONST.SEARCH.TABLE_COLUMNS.APPROVED]: (
+            <View style={[StyleUtils.getReportTableColumnStyles(CONST.SEARCH.TABLE_COLUMNS.APPROVED, false, false, false, false, false, item.shouldShowYearApproved)]}>
+                <DateCell
+                    date={item.approved ?? ''}
+                    showTooltip
+                    isLargeScreenWidth
+                />
+            </View>
+        ),
         [CONST.SEARCH.TABLE_COLUMNS.STATUS]: (
             <View style={[StyleUtils.getReportTableColumnStyles(CONST.SEARCH.TABLE_COLUMNS.STATUS)]}>
                 <StatusCell

src/components/SelectionListWithSections/Search/TransactionListItem.tsx

@@ -97,14 +97,21 @@ function TransactionListItem<TItem extends ListItem>({
         backgroundColor: theme.highlightBG,
     });
 
-    const {amountColumnSize, dateColumnSize, taxAmountColumnSize, submittedColumnSize} = useMemo(() => {
+    const {amountColumnSize, dateColumnSize, taxAmountColumnSize, submittedColumnSize, approvedColumnSize} = useMemo(() => {
         return {
             amountColumnSize: transactionItem.isAmountColumnWide ? CONST.SEARCH.TABLE_COLUMN_SIZES.WIDE : CONST.SEARCH.TABLE_COLUMN_SIZES.NORMAL,
             taxAmountColumnSize: transactionItem.isTaxAmountColumnWide ? CONST.SEARCH.TABLE_COLUMN_SIZES.WIDE : CONST.SEARCH.TABLE_COLUMN_SIZES.NORMAL,
             dateColumnSize: transactionItem.shouldShowYear ? CONST.SEARCH.TABLE_COLUMN_SIZES.WIDE : CONST.SEARCH.TABLE_COLUMN_SIZES.NORMAL,
             submittedColumnSize: transactionItem.shouldShowYearSubmitted ? CONST.SEARCH.TABLE_COLUMN_SIZES.WIDE : CONST.SEARCH.TABLE_COLUMN_SIZES.NORMAL,
+            approvedColumnSize: transactionItem.shouldShowYearApproved ? CONST.SEARCH.TABLE_COLUMN_SIZES.WIDE : CONST.SEARCH.TABLE_COLUMN_SIZES.NORMAL,
         };
-    }, [transactionItem.isAmountColumnWide, transactionItem.isTaxAmountColumnWide, transactionItem.shouldShowYear, transactionItem.shouldShowYearSubmitted]);
+    }, [
+        transactionItem.isAmountColumnWide,
+        transactionItem.isTaxAmountColumnWide,
+        transactionItem.shouldShowYear,
+        transactionItem.shouldShowYearSubmitted,
+        transactionItem.shouldShowYearApproved,
+    ]);
 
     const transactionViolations = useMemo(() => {
         return (violations?.[`${ONYXKEYS.COLLECTION.TRANSACTION_VIOLATIONS}${transactionItem.transactionID}`] ?? []).filter(
@@ -185,6 +192,7 @@ function TransactionListItem<TItem extends ListItem>({
                     isSelected={!!transactionItem.isSelected}
                     dateColumnSize={dateColumnSize}
                     submittedColumnSize={submittedColumnSize}
+                    approvedColumnSize={approvedColumnSize}
                     amountColumnSize={amountColumnSize}
                     taxAmountColumnSize={taxAmountColumnSize}
                     shouldShowCheckbox={!!canSelectMultiple}

src/components/SelectionListWithSections/SearchTableHeader.tsx

@@ -38,6 +38,10 @@ const getExpenseHeaders = (groupBy?: SearchGroupBy): SearchColumnConfig[] => [
         columnName: CONST.SEARCH.TABLE_COLUMNS.SUBMITTED,
         translationKey: 'common.submitted',
     },
+    {
+        columnName: CONST.SEARCH.TABLE_COLUMNS.APPROVED,
+        translationKey: 'search.filters.approved',
+    },
     {
         columnName: CONST.SEARCH.TABLE_COLUMNS.MERCHANT,
         translationKey: 'common.merchant',
@@ -148,6 +152,10 @@ const getExpenseReportHeaders = (profileIcon?: IconAsset): SearchColumnConfig[]
         columnName: CONST.SEARCH.TABLE_COLUMNS.SUBMITTED,
         translationKey: 'common.submitted',
     },
+    {
+        columnName: CONST.SEARCH.TABLE_COLUMNS.APPROVED,
+        translationKey: 'search.filters.approved',
+    },
     {
         columnName: CONST.SEARCH.TABLE_COLUMNS.STATUS,
         translationKey: 'common.status',
@@ -201,6 +209,7 @@ type SearchTableHeaderProps = {
     onSortPress: (column: SearchColumnType, order: SortOrder) => void;
     shouldShowYear: boolean;
     shouldShowYearSubmitted?: boolean;
+    shouldShowYearApproved?: boolean;
     isAmountColumnWide: boolean;
     isTaxAmountColumnWide: boolean;
     shouldShowSorting: boolean;
@@ -217,6 +226,7 @@ function SearchTableHeader({
     onSortPress,
     shouldShowYear,
     shouldShowYearSubmitted,
+    shouldShowYearApproved,
     shouldShowSorting,
     canSelectMultiple,
     isAmountColumnWide,
@@ -256,6 +266,7 @@ function SearchTableHeader({
             shouldShowColumn={shouldShowColumn}
             dateColumnSize={shouldShowYear ? CONST.SEARCH.TABLE_COLUMN_SIZES.WIDE : CONST.SEARCH.TABLE_COLUMN_SIZES.NORMAL}
             submittedColumnSize={shouldShowYearSubmitted ? CONST.SEARCH.TABLE_COLUMN_SIZES.WIDE : CONST.SEARCH.TABLE_COLUMN_SIZES.NORMAL}
+            approvedColumnSize={shouldShowYearApproved ? CONST.SEARCH.TABLE_COLUMN_SIZES.WIDE : CONST.SEARCH.TABLE_COLUMN_SIZES.NORMAL}
             amountColumnSize={isAmountColumnWide ? CONST.SEARCH.TABLE_COLUMN_SIZES.WIDE : CONST.SEARCH.TABLE_COLUMN_SIZES.NORMAL}
             taxAmountColumnSize={isTaxAmountColumnWide ? CONST.SEARCH.TABLE_COLUMN_SIZES.WIDE : CONST.SEARCH.TABLE_COLUMN_SIZES.NORMAL}
             shouldShowSorting={shouldShowSorting}

src/components/SelectionListWithSections/SortableTableHeader.tsx

@@ -26,6 +26,7 @@ type SearchTableHeaderProps = {
     shouldShowSorting: boolean;
     dateColumnSize: TableColumnSize;
     submittedColumnSize?: TableColumnSize;
+    approvedColumnSize?: TableColumnSize;
     amountColumnSize: TableColumnSize;
     taxAmountColumnSize: TableColumnSize;
     containerStyles?: StyleProp<ViewStyle>;
@@ -41,6 +42,7 @@ function SortableTableHeader({
     shouldShowColumn,
     dateColumnSize,
     submittedColumnSize,
+    approvedColumnSize,
     containerStyles,
     shouldShowSorting,
     onSortPress,
@@ -80,6 +82,7 @@ function SortableTableHeader({
                                     taxAmountColumnSize === CONST.SEARCH.TABLE_COLUMN_SIZES.WIDE,
                                     !!areAllOptionalColumnsHidden,
                                     submittedColumnSize === CONST.SEARCH.TABLE_COLUMN_SIZES.WIDE,
+                                    approvedColumnSize === CONST.SEARCH.TABLE_COLUMN_SIZES.WIDE,
                                 ),
                             ]}
                             isSortable={isSortable}

src/components/SelectionListWithSections/types.ts

@@ -246,6 +246,9 @@ type TransactionListItemType = ListItem &
         /** The date the report was submitted */
         submitted?: string;
 
+        /** The date the report was approved */
+        approved?: string;
+
         /** Policy to which the transaction belongs */
         policy: Policy | undefined;
 
@@ -289,6 +292,11 @@ type TransactionListItemType = ListItem &
          */
         shouldShowYearSubmitted: boolean;
 
+        /** Whether we should show the year for the approved date.
+         * This is true if at least one transaction in the dataset was approved in past years
+         */
+        shouldShowYearApproved: boolean;
+
         isAmountColumnWide: boolean;
 
         isTaxAmountColumnWide: boolean;
@@ -413,6 +421,12 @@ type TransactionReportGroupListItemType = TransactionGroupListItemType & {groupe
          */
         shouldShowYearSubmitted: boolean;
 
+        /**
+         * Whether we should show the year for the approved date.
+         * This is true if at least one report in the dataset was approved in past years
+         */
+        shouldShowYearApproved: boolean;
+
         /** The main action that can be performed for the report */
         action: SearchTransactionAction | undefined;
 

src/components/TransactionItemRow/index.tsx

@@ -90,6 +90,7 @@ type TransactionItemRowProps = {
     shouldShowTooltip: boolean;
     dateColumnSize: TableColumnSize;
     submittedColumnSize?: TableColumnSize;
+    approvedColumnSize?: TableColumnSize;
     amountColumnSize: TableColumnSize;
     taxAmountColumnSize: TableColumnSize;
     onCheckboxPress?: (transactionID: string) => void;
@@ -133,6 +134,7 @@ function TransactionItemRow({
     shouldShowTooltip,
     dateColumnSize,
     submittedColumnSize,
+    approvedColumnSize,
     amountColumnSize,
     taxAmountColumnSize,
     onCheckboxPress = () => {},
@@ -165,6 +167,7 @@ function TransactionItemRow({
 
     const isDateColumnWide = dateColumnSize === CONST.SEARCH.TABLE_COLUMN_SIZES.WIDE;
     const isSubmittedColumnWide = submittedColumnSize === CONST.SEARCH.TABLE_COLUMN_SIZES.WIDE;
+    const isApprovedColumnWide = approvedColumnSize === CONST.SEARCH.TABLE_COLUMN_SIZES.WIDE;
     const isAmountColumnWide = amountColumnSize === CONST.SEARCH.TABLE_COLUMN_SIZES.WIDE;
     const isTaxAmountColumnWide = taxAmountColumnSize === CONST.SEARCH.TABLE_COLUMN_SIZES.WIDE;
 
@@ -268,6 +271,18 @@ function TransactionItemRow({
                     />
                 </View>
             ),
+            [CONST.SEARCH.TABLE_COLUMNS.APPROVED]: (
+                <View
+                    key={CONST.SEARCH.TABLE_COLUMNS.APPROVED}
+                    style={[StyleUtils.getReportTableColumnStyles(CONST.SEARCH.TABLE_COLUMNS.APPROVED, false, false, false, areAllOptionalColumnsHidden, false, isApprovedColumnWide)]}
+                >
+                    <DateCell
+                        date={report?.approved ?? ''}
+                        showTooltip={shouldShowTooltip}
+                        isLargeScreenWidth={!shouldUseNarrowLayout}
+                    />
+                </View>
+            ),
             [CONST.SEARCH.TABLE_COLUMNS.CATEGORY]: (
                 <View
                     key={CONST.SEARCH.TABLE_COLUMNS.CATEGORY}
@@ -397,10 +412,12 @@ function TransactionItemRow({
             StyleUtils,
             createdAt,
             report?.submitted,
+            report?.approved,
             isActionLoading,
             isReportItemChild,
             isDateColumnWide,
             isSubmittedColumnWide,
+            isApprovedColumnWide,
             isAmountColumnWide,
             isTaxAmountColumnWide,
             isInSingleTransactionReport,

src/libs/DebugUtils.ts

@@ -419,6 +419,7 @@ function validateReportDraftProperty(key: keyof Report | keyof ReportNameValuePa
         case 'avatarUrl':
         case 'created':
         case 'submitted':
+        case 'approved':
         case 'lastMessageText':
         case 'lastVisibleActionCreated':
         case 'lastReadTime':
@@ -619,6 +620,7 @@ function validateReportDraftProperty(key: keyof Report | keyof ReportNameValuePa
                 hasReportBeenRetracted: CONST.RED_BRICK_ROAD_PENDING_ACTION,
                 hasReportBeenReopened: CONST.RED_BRICK_ROAD_PENDING_ACTION,
                 submitted: CONST.RED_BRICK_ROAD_PENDING_ACTION,
+                approved: CONST.RED_BRICK_ROAD_PENDING_ACTION,
                 isExportedToIntegration: CONST.RED_BRICK_ROAD_PENDING_ACTION,
                 hasExportError: CONST.RED_BRICK_ROAD_PENDING_ACTION,
                 iouReportID: CONST.RED_BRICK_ROAD_PENDING_ACTION,