[Due for payment 2026-02-03] [To-do counters] Add counters

[luacmartins]

Add counters

1. Update createTypeMenuSections by adding a count key to the to-do section searches
   1. This key is computed by looping over the existing reports param and using the appropriate selector and returning the length of the results.
2. Update SearchTypeMenu, passing a badgeText prop to MenuItem if item.count is defined

[mohammadjafarinejad]

Proposal

Please re-state the problem that we are trying to solve in this issue.

Add counters to the to-do section searches in the application.

What is the root cause of that problem?

New feature request

What changes do you think we should make in order to solve the problem?

1. Add count field to SearchTypeMenuItem type in src/libs/SearchUIUtils.ts

Type definition update

type SearchTypeMenuItem = {
  key: SearchKey;
  type: SearchDataTypes;
  icon: IconAsset;
  translationPath: TranslationPaths;
  searchQuery: SearchQueryString;
  searchQueryJSON: SearchQueryJSON;
  hash: number;
  similarSearchHash: number;
  count?: number; // NEW
};

2. Count reports in createTypeMenuSections in src/libs/SearchUIUtils.ts

Implementation details

For each to-do item, loop through reports using the appropriate selector:

// Inside createTypeMenuSections, when building TODO section items:
const todoSectionItems = [
  {
    ...suggestedSearches.submit,
    count: countReportsForAction("submit", availableData.reports, availableData.policies),
  },
  {
    ...suggestedSearches.approve,
    count: countReportsForAction("approve", availableData.reports, availableData.policies),
  },
  {
    ...suggestedSearches.pay,
    count: countReportsForAction("pay", availableData.reports, availableData.policies),
  },
  {
    ...suggestedSearches.export,
    count: countReportsForAction("export", availableData.reports, availableData.policies),
  },
];

Helper function implementation:

function countReportsForAction(action: "submit" | "approve" | "pay" | "export", reports: OnyxCollection<Report>, policies: OnyxCollection<Policy>): number {
  const currentUserAccountID = getCurrentUserAccountID();

  return Object.values(reports ?? {}).filter((report) => {
    if (!report?.reportID) return false;

    const policy = policies?.[`${ONYXKEYS.COLLECTION.POLICY}${report.policyID}`];
    const transactions = getReportTransactions(report.reportID);
    const reportNVP = allReportNameValuePairs?.[`${ONYXKEYS.COLLECTION.REPORT_NAME_VALUE_PAIRS}${report.reportID}`];
    const isArchived = isArchivedReport(reportNVP);

    switch (action) {
      case "submit":
        return canSubmitReport(report, policy, transactions, allTransactionViolations, isArchived);
      case "approve":
        return canApproveIOU(report, policy, transactions);
      case "pay": {
        const chatReport = getChatReport(report);
        return canIOUBePaid(report, chatReport, policy, transactions);
      }
      case "export":
        return isExportAction(report, policy);
      default:
        return false;
    }
  }).length;
}

3. Display badges in SearchTypeMenu in src/pages/Search/SearchTypeMenu.tsx

MenuItem update

Pass badgeText to MenuItem when count is defined:

<MenuItem
  key={item.key}
  title={translate(item.translationPath)}
  icon={item.icon}
  onPress={() => onSearchTypeMenuItemPress(item)}
  focused={item.hash === hash}
  badgeText={item.count ? String(item.count) : undefined} // NEW
  shouldShowRightIcon
  containerStyle={styles.pb0}
/>

What alternative solutions did you explore? (Optional)

None

[PiyushChandra17]

I would like to work on this, the solution is already detailed in OP

[annaweber830]

I'm already working on this

[luacmartins]

@annaweber830 I'm confused. You're only assigned to #73963. Please work on the changes for that issue only!

[luacmartins]

On hold