Rename Search "Date" filter to "Created date" and column to "Created" for report-style types

src/components/ColumnsSettingsList.tsx

@@ -7,6 +7,7 @@ import useThemeStyles from '@hooks/useThemeStyles';
 import {getSearchColumnTranslationKey} from '@libs/SearchUIUtils';
 
 import CONST from '@src/CONST';
+import type {SearchDataTypes} from '@src/types/onyx/SearchResults';
 
 import React, {useRef, useState} from 'react';
 import {View} from 'react-native';
@@ -71,9 +72,22 @@ type ColumnsSettingsListProps = {
 
     /** Callback fired with the updated column list when the user saves changes */
     onSave: (columns: SearchCustomColumnIds[]) => void;
+
+    /** The active Search type. The date column reads "Created" only for report-style types (expense report, invoice), otherwise "Date". */
+    type?: SearchDataTypes;
 };
 
-function ColumnsSettingsList({allColumns, defaultSelectedColumns, currentColumns, requiredColumns, groupBy, groupColumns = [], defaultGroupColumns = [], onSave}: ColumnsSettingsListProps) {
+function ColumnsSettingsList({
+    allColumns,
+    defaultSelectedColumns,
+    currentColumns,
+    requiredColumns,
+    groupBy,
+    groupColumns = [],
+    defaultGroupColumns = [],
+    onSave,
+    type,
+}: ColumnsSettingsListProps) {
     const theme = useTheme();
     const styles = useThemeStyles();
     const icons = useMemoizedLazyExpensifyIcons(['DragHandles']);
@@ -89,8 +103,8 @@ function ColumnsSettingsList({allColumns, defaultSelectedColumns, currentColumns
         const unselected = columnsToSort
             .filter((col) => !col.isSelected)
             .sort((a, b) => {
-                const textA = translate(getSearchColumnTranslationKey(a.value));
-                const textB = translate(getSearchColumnTranslationKey(b.value));
+                const textA = translate(getSearchColumnTranslationKey(a.value, type));
+                const textB = translate(getSearchColumnTranslationKey(b.value, type));
                 return localeCompare(textA, textB);
             });
         return [...selected, ...unselected];
@@ -122,7 +136,7 @@ function ColumnsSettingsList({allColumns, defaultSelectedColumns, currentColumns
             const isEffectivelySelected = isRequired || isSelected;
             const isDragDisabled = !isEffectivelySelected;
             return {
-                text: translate(getSearchColumnTranslationKey(columnId)),
+                text: translate(getSearchColumnTranslationKey(columnId, type)),
                 value: columnId,
                 keyForList: columnId,
                 isSelected: isEffectivelySelected,
@@ -168,8 +182,8 @@ function ColumnsSettingsList({allColumns, defaultSelectedColumns, currentColumns
                 const selectedCols = prevColumns.filter((col) => col.isSelected);
                 const unselected = prevColumns.filter((col) => !col.isSelected && col.columnId !== updatedColumnId);
                 const unselectedSorted = unselected.sort((a, b) => {
-                    const textA = translate(getSearchColumnTranslationKey(a.columnId));
-                    const textB = translate(getSearchColumnTranslationKey(b.columnId));
+                    const textA = translate(getSearchColumnTranslationKey(a.columnId, type));
+                    const textB = translate(getSearchColumnTranslationKey(b.columnId, type));
                     return localeCompare(textA, textB);
                 });
                 return [...selectedCols, {columnId: updatedColumnId, isSelected: true}, ...unselectedSorted];

src/components/Search/ExpenseFlatSearchView.tsx

@@ -107,6 +107,7 @@ function ExpenseFlatSearchView({
                     canSelectMultiple={canSelectMultiple}
                     item={item}
                     columns={columns}
+                    isDateColumnCreated={type === CONST.SEARCH.DATA_TYPES.INVOICE}
                     isDisabled={isDisabled}
                     lastPaymentMethod={lastPaymentMethod}
                     personalPolicyID={personalPolicyID}

src/components/Search/FilterComponents/AdvancedFilters/FilterList.tsx

@@ -13,7 +13,7 @@ import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 
 import getButtonState from '@libs/getButtonState';
-import {FILTER_VIEW_MAP} from '@libs/SearchUIUtils';
+import {FILTER_VIEW_MAP, getFilterViewLabelKey} from '@libs/SearchUIUtils';
 import type {SearchFilter} from '@libs/SearchUIUtils';
 
 import variables from '@styles/variables';
@@ -43,15 +43,17 @@ type FilterListProps = FilterItemCallbacks & {
 type FilterItemProps = FilterItemCallbacks & {
     filterKey: SearchFilter['key'];
     isSelected?: boolean;
+    type: SearchDataTypes | undefined;
 };
 
-function FilterItem({filterKey, isSelected, onPress, onHoverIn, onFocus}: FilterItemProps) {
+function FilterItem({filterKey, isSelected, type, onPress, onHoverIn, onFocus}: FilterItemProps) {
     const {translate} = useLocalize();
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
     const theme = useTheme();
 
-    const {labelKey, icon} = FILTER_VIEW_MAP[filterKey];
+    const {icon} = FILTER_VIEW_MAP[filterKey];
+    const labelKey = getFilterViewLabelKey(filterKey, type);
     const icons = useMemoizedLazyExpensifyIcons(['ArrowRight', icon]);
 
     const getPressableBackgroundStyle = (pressed: boolean) => {
@@ -124,6 +126,7 @@ function FilterList({type, policyID, selectedFilter, style, contentContainerStyl
                         <FilterItem
                             key={item}
                             filterKey={item}
+                            type={type}
                             isSelected={item === selectedFilter}
                             onHoverIn={onHoverIn}
                             onFocus={onFocus}

src/components/Search/FilterDropdowns/DisplayPopup.tsx

@@ -83,7 +83,7 @@ function DisplayPopup({queryJSON, searchResults, closeOverlay, onSort}: DisplayP
                 <MenuItemWithTopDescription
                     shouldShowRightIcon
                     description={translate('search.display.sortBy')}
-                    title={`${translate(getSearchColumnTranslationKey(sortByValue))} ${CONST.DOT_SEPARATOR} ${translate(`search.filters.sortOrder.${sortOrderValue}`)}`}
+                    title={`${translate(getSearchColumnTranslationKey(sortByValue, queryJSON.type))} ${CONST.DOT_SEPARATOR} ${translate(`search.filters.sortOrder.${sortOrderValue}`)}`}
                     onPress={() => setSelectedDisplayFilter(CONST.SEARCH.SYNTAX_ROOT_KEYS.SORT_BY)}
                     sentryLabel={CONST.SENTRY_LABEL.SEARCH.FILTER_SORT_BY}
                 />

src/components/Search/FilterDropdowns/SortByPopup.tsx

@@ -56,7 +56,7 @@ function SortByPopup({searchResults, queryJSON, groupBy, onSort, onSortOrderPres
     const currentColumns = !searchResults?.data
         ? []
         : getColumnsToShow({currentAccountID: accountID, data: searchResults.data, visibleColumns, type: searchDataType, groupBy: groupBy?.value, sortBy: queryJSON.sortBy});
-    const sortableColumns = getSortByOptions(currentColumns, translate);
+    const sortableColumns = getSortByOptions(currentColumns, translate, searchDataType);
     const sortOrder = queryJSON.sortOrder;
 
     const [selectedItem, setSelectedItem] = useState(queryJSON.sortBy);

src/components/Search/SearchList/ListItem/ExpenseReportListItemRow/ExpenseReportListItemRowWide.tsx

@@ -71,7 +71,7 @@ function ExpenseReportListItemRowWide({
             />
         ),
         [CONST.SEARCH.TABLE_COLUMNS.DATE]: (
-            <View style={[StyleUtils.getReportTableColumnStyles(CONST.SEARCH.TABLE_COLUMNS.DATE, {isDateColumnWide: item.shouldShowYear})]}>
+            <View style={[StyleUtils.getReportTableColumnStyles(CONST.SEARCH.TABLE_COLUMNS.DATE, {isDateColumnWide: item.shouldShowYear, isDateColumnCreated: true})]}>
                 <DateCell
                     date={item.created ?? ''}
                     showTooltip

src/components/Search/SearchList/ListItem/TransactionListItem/TransactionListItemWide.tsx

@@ -34,6 +34,7 @@ function TransactionListItemWide<TItem extends ListItem>({
     onLongPressRow,
     shouldSyncFocus,
     columns,
+    isDateColumnCreated,
     isLoading,
     isActionLoading,
     isLastItem,
@@ -194,6 +195,7 @@ function TransactionListItemWide<TItem extends ListItem>({
                         isDisabled={!!isDisabled}
                         shouldDisableActionPointerEvents={shouldDisableActionPointerEvents}
                         dateColumnSize={dateColumnSize}
+                        isDateColumnCreated={isDateColumnCreated}
                         submittedColumnSize={submittedColumnSize}
                         approvedColumnSize={approvedColumnSize}
                         postedColumnSize={postedColumnSize}

src/components/Search/SearchList/ListItem/TransactionListItem/index.tsx

@@ -81,6 +81,7 @@ function TransactionListItemInner<TItem extends ListItem>({
     onLongPressRow,
     shouldSyncFocus,
     columns,
+    isDateColumnCreated,
     isLoading,
     nonPersonalAndWorkspaceCards,
     lastPaymentMethod,
@@ -267,6 +268,7 @@ function TransactionListItemInner<TItem extends ListItem>({
         onLongPressRow,
         shouldSyncFocus,
         columns,
+        isDateColumnCreated,
         isLoading,
         isActionLoading,
         transactionViolations,

src/components/Search/SearchList/ListItem/TransactionListItem/types.ts

@@ -20,6 +20,8 @@ type TransactionListItemSharedProps<TItem extends ListItem> = {
     onLongPressRow?: (item: TItem) => void;
     shouldSyncFocus?: boolean;
     columns?: SearchColumnType[];
+    /** When true, the date column renders as the wider "Created" column (report-style Search: invoice/expense-report) */
+    isDateColumnCreated?: boolean;
     isLoading?: boolean;
     isActionLoading?: boolean;
     isLastItem?: boolean;

src/components/Search/SearchList/ListItem/types.ts

@@ -471,6 +471,8 @@ type TransactionListItemProps<TItem extends ListItem> = ListItemProps<TItem> &
         /** Whether the item's action is loading */
         isLoading?: boolean;
         columns?: SearchColumnType[];
+        /** When true, the date column renders as the wider "Created" column (report-style Search: invoice/expense-report) */
+        isDateColumnCreated?: boolean;
         /** Non-personal and workspace cards for company card display */
         nonPersonalAndWorkspaceCards?: CardList;
         /** All policies' tag lists, drilled from the list level so each row can resolve its policy's tags without an Onyx subscription per row */

src/components/Search/SearchPageHeader/useSearchFiltersBar.tsx

@@ -17,7 +17,7 @@ import {shouldShowInitialCategoryFilterLoading} from '@hooks/useSearchFilterSync
 import {close} from '@libs/actions/Modal';
 import {setSearchContext} from '@libs/actions/Search';
 import {getAdvancedFiltersToReset, removeNegation} from '@libs/SearchQueryUtils';
-import {FILTER_VIEW_MAP, isAmountFilterKey, isDateFilterKey, isReportFieldKey, isTextFilterKey, mapFiltersFormToLabelValueList, SKIPPED_SEARCH_FILTERS} from '@libs/SearchUIUtils';
+import {getFilterViewLabelKey, isAmountFilterKey, isDateFilterKey, isReportFieldKey, isTextFilterKey, mapFiltersFormToLabelValueList, SKIPPED_SEARCH_FILTERS} from '@libs/SearchUIUtils';
 import type {SearchFilter} from '@libs/SearchUIUtils';
 
 import CONST from '@src/CONST';
@@ -59,7 +59,7 @@ function getFilterSentryLabel(filterKey: SearchAdvancedFiltersKey | SearchFilter
 
 function FilterPopup({baseFilterKey, searchAdvancedFiltersForm, closeOverlay, setPopoverWidth, updateFilterForm}: FilterPopupProps) {
     const {translate} = useLocalize();
-    const label = translate(FILTER_VIEW_MAP[baseFilterKey].labelKey);
+    const label = translate(getFilterViewLabelKey(baseFilterKey, searchAdvancedFiltersForm.type));
 
     const closeModalAndUpdateFilterForm = (values: Partial<SearchAdvancedFiltersForm>) => {
         close(() => updateFilterForm(values));

src/components/Search/SearchStaticList.tsx

@@ -15,7 +15,7 @@ import useThemeStyles from '@hooks/useThemeStyles';
 import {hasDeferredWrite} from '@libs/deferredLayoutWrite';
 import Navigation from '@libs/Navigation/Navigation';
 import {getReportStatusColorStyle, getReportStatusTooltipTranslation, getReportStatusTranslation, isOneTransactionReport} from '@libs/ReportUtils';
-import {createAndOpenSearchTransactionThread, getSections, getSortedSections, getValidGroupBy} from '@libs/SearchUIUtils';
+import {createAndOpenSearchTransactionThread, getSections, getSortedSections, getValidGroupBy, isCreatedDateType} from '@libs/SearchUIUtils';
 import {isDeletedTransaction} from '@libs/TransactionUtils';
 
 import CONST from '@src/CONST';
@@ -294,6 +294,7 @@ function SearchStaticList({
                         shouldShowCheckbox={canSelectMultiple}
                         shouldShowErrors
                         violations={item.violations}
+                        isDateColumnCreated={isCreatedDateType(type)}
                         dateColumnSize={CONST.SEARCH.TABLE_COLUMN_SIZES.NORMAL}
                         amountColumnSize={CONST.SEARCH.TABLE_COLUMN_SIZES.NORMAL}
                         taxAmountColumnSize={CONST.SEARCH.TABLE_COLUMN_SIZES.NORMAL}

src/components/Search/SearchTableHeader.tsx

@@ -30,7 +30,9 @@ type SearchHeaderIcons = {
     Bank?: IconAsset;
 };
 
-const getExpenseHeaders = (groupBy?: SearchGroupBy): SearchColumnConfig[] => [
+// `getExpenseHeaders` is shared by expense, invoice and trip Search plus the opened single-report table.
+// Invoice is treated like a report, so it labels the date column "Created". Expense/trip and the opened report keep "Date".
+const getExpenseHeaders = (groupBy?: SearchGroupBy, isDateColumnCreated = false): SearchColumnConfig[] => [
     {
         columnName: CONST.SEARCH.TABLE_COLUMNS.RECEIPT,
         translationKey: 'common.receipt',
@@ -43,7 +45,7 @@ const getExpenseHeaders = (groupBy?: SearchGroupBy): SearchColumnConfig[] => [
     },
     {
         columnName: CONST.SEARCH.TABLE_COLUMNS.DATE,
-        translationKey: 'common.date',
+        translationKey: isDateColumnCreated ? 'search.filters.created' : 'common.date',
         canEdit: true,
     },
     {
@@ -246,7 +248,7 @@ const getExpenseReportHeaders = (profileIcon?: IconAsset): SearchColumnConfig[]
     },
     {
         columnName: CONST.SEARCH.TABLE_COLUMNS.DATE,
-        translationKey: 'common.date',
+        translationKey: 'search.filters.created',
     },
     {
         columnName: CONST.SEARCH.TABLE_COLUMNS.SUBMITTED,
@@ -501,7 +503,7 @@ function getSearchColumns(type: ValueOf<typeof CONST.SEARCH.DATA_TYPES>, icons:
             }
             return getExpenseHeaders(groupBy);
         case CONST.SEARCH.DATA_TYPES.INVOICE:
-            return getExpenseHeaders(groupBy);
+            return getExpenseHeaders(groupBy, true);
         case CONST.SEARCH.DATA_TYPES.TRIP:
             return getExpenseHeaders(groupBy);
         case CONST.SEARCH.DATA_TYPES.TASK:
@@ -618,6 +620,7 @@ function SearchTableHeader({
         <SortableTableHeader
             columns={orderedColumnConfig}
             shouldShowColumn={shouldShowColumn}
+            isDateColumnCreated={type === CONST.SEARCH.DATA_TYPES.EXPENSE_REPORT || type === CONST.SEARCH.DATA_TYPES.INVOICE}
             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}

src/components/Search/SortableTableHeader.tsx

@@ -43,6 +43,9 @@ type SearchTableHeaderProps = {
     onSortPress: (column: SearchSortBy, order: SortOrder) => void;
     shouldRemoveTotalColumnFlex?: boolean;
     isActionColumnWide?: boolean;
+
+    /** True when the date column renders "Created" (expense reports), which needs a wider column. */
+    isDateColumnCreated?: boolean;
 };
 
 function SortableTableHeader({
@@ -51,6 +54,7 @@ function SortableTableHeader({
     sortOrder,
     shouldShowColumn,
     dateColumnSize,
+    isDateColumnCreated,
     submittedColumnSize,
     approvedColumnSize,
     postedColumnSize,
@@ -103,6 +107,7 @@ function SortableTableHeader({
                             containerStyle={[
                                 StyleUtils.getReportTableColumnStyles(columnName, {
                                     isDateColumnWide: dateColumnSize === CONST.SEARCH.TABLE_COLUMN_SIZES.WIDE,
+                                    isDateColumnCreated,
                                     isSubmittedColumnWide: submittedColumnSize === CONST.SEARCH.TABLE_COLUMN_SIZES.WIDE,
                                     isApprovedColumnWide: approvedColumnSize === CONST.SEARCH.TABLE_COLUMN_SIZES.WIDE,
                                     isPostedColumnWide: postedColumnSize === CONST.SEARCH.TABLE_COLUMN_SIZES.WIDE,

src/components/TransactionItemRow/TransactionItemRowWide.tsx

@@ -80,6 +80,7 @@ function TransactionItemRowWide({
     isSelected,
     shouldShowTooltip,
     dateColumnSize,
+    isDateColumnCreated = false,
     submittedColumnSize,
     approvedColumnSize,
     postedColumnSize,
@@ -221,7 +222,7 @@ function TransactionItemRowWide({
                 return (
                     <View
                         key={column}
-                        style={[StyleUtils.getReportTableColumnStyles(CONST.SEARCH.TABLE_COLUMNS.DATE, {isDateColumnWide}), styles.editableCellColumn]}
+                        style={[StyleUtils.getReportTableColumnStyles(CONST.SEARCH.TABLE_COLUMNS.DATE, {isDateColumnWide, isDateColumnCreated}), styles.editableCellColumn]}
                     >
                         <DateCell
                             canEdit={canEditDate}

src/components/TransactionItemRow/index.tsx

@@ -45,6 +45,7 @@ function TransactionItemRow({
     isSelected,
     shouldShowTooltip,
     dateColumnSize,
+    isDateColumnCreated,
     submittedColumnSize,
     approvedColumnSize,
     postedColumnSize,
@@ -194,6 +195,7 @@ function TransactionItemRow({
         isSelected,
         shouldShowTooltip,
         dateColumnSize,
+        isDateColumnCreated,
         submittedColumnSize,
         approvedColumnSize,
         postedColumnSize,

src/components/TransactionItemRow/types.ts

@@ -73,6 +73,8 @@ type TransactionItemRowProps = {
     isSelected: boolean;
     shouldShowTooltip: boolean;
     dateColumnSize: TableColumnSize;
+    /** When true, the date column renders as the wider "Created" column (report-style Search: invoice/expense-report). Defaults to the narrow "Date" width. */
+    isDateColumnCreated?: boolean;
     submittedColumnSize?: TableColumnSize;
     approvedColumnSize?: TableColumnSize;
     postedColumnSize?: TableColumnSize;

src/hooks/useSearchBulkActions.ts

@@ -921,7 +921,7 @@ function useSearchBulkActions({queryJSON}: UseSearchBulkActionsParams) {
 
             const exportColumnLabels: Partial<Record<SearchColumnType, string>> = {};
             for (const column of columnsToExport) {
-                exportColumnLabels[column] = translate(getSearchColumnTranslationKey(column));
+                exportColumnLabels[column] = translate(getSearchColumnTranslationKey(column, exportSearchType));
             }
 
             const jsonQuery = queryJSONToExport

src/languages/de.ts

@@ -9185,6 +9185,8 @@ Fügen Sie weitere Ausgabelimits hinzu, um den Cashflow Ihres Unternehmens zu sc
             paid: 'Bezahlt',
             exported: 'Exportiert',
             posted: 'Gebucht',
+            created: 'Erstellt',
+            createdDate: 'Erstellungsdatum',
             withdrawn: 'Zurückgezogen',
             billable: 'Abrechenbar',
             reimbursable: 'Erstattungsfähig',

src/languages/el.ts

@@ -9409,6 +9409,8 @@ ${reportName}`,
             paid: 'Πληρωμένο',
             exported: 'Έγινε εξαγωγή',
             posted: 'Καταχωρισμένο',
+            created: 'Δημιουργήθηκε',
+            createdDate: 'Ημερομηνία δημιουργίας',
             withdrawn: 'Ανακλήθηκε',
             billable: 'Χρεώσιμη',
             reimbursable: 'Επανεντάξιμο',

src/languages/en.ts

@@ -9327,6 +9327,8 @@ const translations = {
             paid: 'Paid',
             exported: 'Exported',
             posted: 'Posted',
+            created: 'Created',
+            createdDate: 'Created date',
             withdrawn: 'Withdrawn',
             billable: 'Billable',
             reimbursable: 'Reimbursable',

src/languages/es.ts

@@ -9046,6 +9046,8 @@ ${reportName}`,
             paid: 'Pago',
             exported: 'Exportación',
             posted: 'Contabilización',
+            created: 'Creado',
+            createdDate: 'Fecha de creación',
             withdrawn: 'Retirada',
             billable: 'Facturable',
             reimbursable: 'Reembolsable',

src/languages/fr.ts

@@ -9217,6 +9217,8 @@ Ajoutez davantage de règles de dépenses pour protéger la trésorerie de l’e
             paid: 'Payé',
             exported: 'Exporté',
             posted: 'Publié',
+            created: 'Créé',
+            createdDate: 'Date de création',
             withdrawn: 'Retiré',
             billable: 'Facturable',
             reimbursable: 'Remboursable',