[Home Page] Add Remaining limit slot for the Expensify Card by WojtekBoman · Pull Request #82772 · Expensify/App

WojtekBoman · 2026-02-18T09:57:46Z

Explanation of Change

This PR introduces a new widget on the home page that displays the user's assigned cards. Each card shows its title, last four digits, formatted remaining spend with currency, and a circular SVG progress indicator visualizing how much of the card limit has been used.

Fixed Issues

$ #81526
PROPOSAL:

Tests

Verify that no errors appear in the JS console

Prerequisites

Log in with an account that has at least one assigned Expensify card with an active state and a spending limit set.

Visibility

Navigate to the Home page.
Verify the "Assigned cards" section appears in the right column on wide screens, or below other sections on narrow screens.
Log in with an account that has no assigned cards and verify the section is not shown.

Card content

For each displayed card, verify the description shows the card name followed by the last four digits (e.g. "Physical card 1234").
Verify the bold title shows the remaining spend amount with a currency symbol followed by "remaining" (e.g. "$9,201.54 remaining").
Verify the card icon on the left has rounded corners and is vertically centered in the row.

Remaining limit circle

For a card that has a spending limit configured, verify a circular progress indicator appears to the left of the chevron arrow.
Verify the green arc of the circle reflects how much of the limit is still available.
For a card without a spending limit, verify the circle is not shown.

Hover behavior

Hover over a card row and verify the chevron arrow changes color.
Verify the color change happens when hovering anywhere on the row, not just on the arrow itself.

Navigation

Click/tap on a card row.
Verify it navigates to the card details page.

Responsive layout

View the Home page on a wide screen and verify the section has appropriate spacing.
Resize to a narrow screen and verify the layout adjusts with tighter spacing.

Card types

Verify that Expensify cards, company cards, and personal cards all appear in the section.
Verify that only active cards are displayed.

Offline tests

QA Steps

Verify that no errors appear in the JS console

PR Author Checklist

Screenshots/Videos

Android: Native

Android: mWeb Chrome

iOS: Native

iOS: mWeb Safari

MacOS: Chrome / Safari

Screen.Recording.2026-02-18.at.13.49.04.mov

melvin-bot · 2026-02-18T09:57:52Z

Hey, I noticed you changed src/languages/en.ts in a PR from a fork. For security reasons, translations are not generated automatically for PRs from forks.

If you want to automatically generate translations for other locales, an Expensify employee will have to:

Look at the code and make sure there are no malicious changes.
Run the Generate static translations GitHub workflow. If you have write access and the K2 extension, you can simply click: [this button]

Alternatively, if you are an external contributor, you can run the translation script locally with your own OpenAI API key. To learn more, try running:

npx ts-node ./scripts/generateTranslations.ts --help

Typically, you'd want to translate only what you changed by running npx ts-node ./scripts/generateTranslations.ts --compare-ref main

codecov · 2026-02-18T10:05:46Z

Codecov Report

✅ Changes either increased or maintained existing code coverage, great job!

Files with missing lines	Coverage Δ
src/libs/CardUtils.ts	`79.44% <100.00%> (+2.16%)`	⬆️
src/pages/home/HomePage.tsx	`100.00% <100.00%> (ø)`
src/styles/index.ts	`46.35% <66.66%> (+0.03%)`	⬆️
...home/AssignedCardsSection/RemainingLimitCircle.tsx	`57.14% <57.14%> (ø)`
src/pages/home/AssignedCardsSection/index.tsx	`26.66% <26.66%> (ø)`
... and 11 files with indirect coverage changes

WojtekBoman · 2026-02-18T10:29:46Z

@codex

chatgpt-codex-connector

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 041442ffd8

ℹ️ About Codex in GitHub

Codex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you

Open a pull request for review
Mark a draft as ready
Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".

src/pages/home/AssignedCardsSection/index.tsx

chatgpt-codex-connector · 2026-02-18T10:44:33Z

src/pages/home/AssignedCardsSection/index.tsx

+                const hasLimitData = !!card.availableSpend && !!unapprovedExpenseLimit;
+                const spentFraction = hasLimitData ? 1 - (card.availableSpend ?? 0) / (unapprovedExpenseLimit ?? 1) : 0;


Treat zero available spend as valid limit data

The limit-visibility check uses truthiness (!!card.availableSpend), so a card at exactly 0 remaining spend is treated as if limit data is missing; in that case the circular indicator is hidden and spentFraction is forced to 0 even though the card has a configured limit. This breaks the widget for fully-spent cards, which are the most important case to visualize.

Useful? React with 👍 / 👎.

chatgpt-codex-connector · 2026-02-18T10:44:33Z

src/pages/home/AssignedCardsSection/index.tsx

+        >
+            {displayableCards.map((card) => {
+                const cardTitle = card.nameValuePairs?.cardTitle ?? getCardDescription(card, translate);
+                const description = card.lastFourPAN ? `${cardTitle} ${card.lastFourPAN}` : cardTitle;


Avoid duplicating last-four digits in card description

When nameValuePairs.cardTitle is absent, cardTitle falls back to getCardDescription(card, translate), which already includes the PAN suffix for non-personal/non-Plaid cards (e.g., "Bank - 1234"), and then this line appends card.lastFourPAN again. Users in that data shape will see duplicated digits in the subtitle (e.g., "Bank - 1234 1234").

Useful? React with 👍 / 👎.

OSBotify · 2026-02-18T12:22:46Z

🦜 Polyglot Parrot! 🦜

Squawk! Looks like you added some shiny new English strings. Allow me to parrot them back to you in other tongues:

The diff is too large to include in this comment (77KB), so I've created a gist for you:

📋 View the translation diff here 📋

Note

You can apply these changes to your branch by copying the patch to your clipboard, then running pbpaste | git apply, or directly by running gh gist view --raw 4a6e582cd3f17f2e538f4de3bff97f63 | git apply 😉

View workflow run

melvin-bot · 2026-02-18T13:16:44Z

@ZhenjaHorbach Please copy/paste the Reviewer Checklist from here into a new comment on this PR and complete it. If you have the K2 extension, you can simply click: [this button]

src/pages/home/AssignedCardsSection/index.tsx

grgia

Running a build

github-actions · 2026-02-18T13:29:35Z

🚧 @grgia has triggered a test Expensify/App build. You can view the workflow run here.

grgia

Couple of things

use • instead of - between card # and title

can we make this circle show the percentage left?

this card testing account has only 3 card slots, but 4 show up on the home page

grgia · 2026-02-18T13:57:02Z

Note

There was a fixed limit card in there

grgia · 2026-02-18T14:29:58Z

@WojtekBoman got it working for a limit card

grgia · 2026-02-18T14:36:55Z

src/pages/home/AssignedCardsSection/index.tsx

+
+                const unapprovedExpenseLimit = card.nameValuePairs?.unapprovedExpenseLimit;
+                const hasLimitData = !!unapprovedExpenseLimit;
+                const spentFraction = hasLimitData ? 1 - (card.availableSpend ?? 0) / unapprovedExpenseLimit : 0;


@WojtekBoman gonna DM about this one the data that wasnt working for my limit card

https://expensify.slack.com/archives/C0A93PRBXQX/p1771425431942369?thread_ts=1771420590.162639&cid=C0A93PRBXQX

joekaufmanexpensify

Good for product. Excited for this!

shawnborton · 2026-02-18T16:09:49Z

Wowee! Can we run a test build for easier testing?

WojtekBoman · 2026-02-20T10:52:29Z

NAB - Animation is abrupt

I suppose it's an easy fix Probably we just need to navigate to ROUTES.SETTINGS_WALLET and then to ROUTES.SETTINGS_WALLET_DOMAIN_CARD

Yeah, but currently we're removing the interaction manager (it would be useful here) and with these 2 navigation actions users on native platforms we'll see 2 transitions between screens

ZhenjaHorbach · 2026-02-20T11:09:03Z

LGTM!

src/pages/home/AssignedCardsSection/index.tsx

src/pages/home/AssignedCardsSection/RemainingLimitCircle.tsx

src/pages/home/AssignedCardsSection/index.tsx

github-actions · 2026-02-20T12:33:27Z

🚧 @grgia has triggered a test Expensify/App build. You can view the workflow run here.

github-actions · 2026-02-20T12:37:16Z

🧪🧪 Use the links below to test this adhoc build on Android, iOS, and Web. Happy testing! 🧪🧪
Built from App PR #82772.

Android 🤖	iOS 🍎
https://ad-hoc-expensify-cash.s3.us-east-1.amazonaws.com/rock-artifacts/ad-hoc/rock-android-Adhoc-1984624-ff072f6-cf3d76cc65b828b994325f02aa8f9b4e3de5f620/index.html	https://ad-hoc-expensify-cash.s3.us-east-1.amazonaws.com/rock-artifacts/ad-hoc/rock-ios-device-AdHoc-1984624-ff072f6-af0ca75e0b7636dd5fbf79b4a39dbafa02cc374a/index.html

Web 🕸️
https://82772.pr-testing.expensify.com

👀 View the workflow run that generated this build 👀

mountiny

Looks good codewise

grgia

Nice work on this! This is a rad feature @WojtekBoman

github-actions · 2026-02-20T14:14:12Z

🚧 @mountiny has triggered a test Expensify/App build. You can view the workflow run here.

github-actions · 2026-02-20T14:18:12Z

🧪🧪 Use the links below to test this adhoc build on Android, iOS, and Web. Happy testing! 🧪🧪
Built from App PR #82772.

Android 🤖	iOS 🍎
https://ad-hoc-expensify-cash.s3.us-east-1.amazonaws.com/rock-artifacts/ad-hoc/rock-android-Adhoc-a8f2d3a-ff072f6-cf3d76cc65b828b994325f02aa8f9b4e3de5f620/index.html	https://ad-hoc-expensify-cash.s3.us-east-1.amazonaws.com/rock-artifacts/ad-hoc/rock-ios-device-AdHoc-a8f2d3a-ff072f6-af0ca75e0b7636dd5fbf79b4a39dbafa02cc374a/index.html

Web 🕸️
https://82772.pr-testing.expensify.com

👀 View the workflow run that generated this build 👀

OSBotify · 2026-02-20T14:19:49Z

✋ This PR was not deployed to staging yet because QA is ongoing. It will be automatically deployed to staging after the next production release.

OSBotify · 2026-02-20T16:43:43Z

🚀 Deployed to staging by https://github.com/mountiny in version: 9.3.24-1 🚀

platform	result
🕸 web 🕸	success ✅
🤖 android 🤖	success ✅
🍎 iOS 🍎	success ✅

m-natarajan · 2026-02-20T21:29:24Z

@WojtekBoman @grgia @ZhenjaHorbach We are blocked from using expensify cards and can't test Remaining limit circle scenario. Can this one please be tested internally

jponikarchuk · 2026-02-21T10:19:53Z

This PR failing because of the issue
This issue is reproducible in: All platforms

OSBotify · 2026-02-23T21:45:25Z

🚀 Deployed to production by https://github.com/puneetlath in version: 9.3.24-3 🚀

platform	result
🕸 web 🕸	success ✅
🤖 android 🤖	success ✅
🍎 iOS 🍎	success ✅

melvin-bot bot assigned WojtekBoman Feb 18, 2026

chatgpt-codex-connector bot reviewed Feb 18, 2026

View reviewed changes

WojtekBoman force-pushed the home-page/assigned-cards-section branch from 041442f to 8bae2bf Compare February 18, 2026 11:49

This comment has been minimized.

Sign in to view

WojtekBoman force-pushed the home-page/assigned-cards-section branch 2 times, most recently from 6868dfe to 43d9fc4 Compare February 18, 2026 12:47

WojtekBoman marked this pull request as ready for review February 18, 2026 13:16

WojtekBoman requested review from a team as code owners February 18, 2026 13:16

melvin-bot bot requested review from ZhenjaHorbach and joekaufmanexpensify and removed request for a team February 18, 2026 13:16

melvin-bot bot removed the request for review from a team February 18, 2026 13:16

github-actions bot reviewed Feb 18, 2026

View reviewed changes

src/pages/home/AssignedCardsSection/index.tsx Show resolved Hide resolved

WojtekBoman force-pushed the home-page/assigned-cards-section branch from 43d9fc4 to 76aa0cd Compare February 18, 2026 13:26

grgia reviewed Feb 18, 2026

View reviewed changes

This comment has been minimized.

Sign in to view

grgia requested changes Feb 18, 2026

View reviewed changes

grgia reviewed Feb 18, 2026

View reviewed changes

joekaufmanexpensify previously approved these changes Feb 18, 2026

View reviewed changes

WojtekBoman force-pushed the home-page/assigned-cards-section branch from 6b0f732 to c0d662a Compare February 20, 2026 10:44

ZhenjaHorbach approved these changes Feb 20, 2026

View reviewed changes

melvin-bot bot requested a review from grgia February 20, 2026 11:09

mountiny reviewed Feb 20, 2026

View reviewed changes

src/pages/home/AssignedCardsSection/index.tsx Outdated Show resolved Hide resolved

src/pages/home/AssignedCardsSection/RemainingLimitCircle.tsx Outdated Show resolved Hide resolved

src/pages/home/AssignedCardsSection/index.tsx Show resolved Hide resolved

WojtekBoman added 8 commits February 20, 2026 12:53

Add AssignedCardsSection

f19b465

Set RemainingLimitCircle size to 24

3369c90

Handle combo cards

832e518

Refactor code handling combo cards in assigned cards section

269bcea

Add getDisplayableExpensifyCards

df427d9

Change divider for card description from - to •

aa4437b

Move getDisplayableExpensifyCards to CardUtils and add tests

89f72c1

Remove RemainingLimitCircle.displayName

1984624

WojtekBoman force-pushed the home-page/assigned-cards-section branch from ce8235b to 1984624 Compare February 20, 2026 11:54

mountiny approved these changes Feb 20, 2026

View reviewed changes

grgia approved these changes Feb 20, 2026

View reviewed changes

mountiny merged commit a8f2d3a into Expensify:main Feb 20, 2026
31 checks passed

OSBotify mentioned this pull request Feb 20, 2026

Deploy Checklist: New Expensify 2026-02-20 #83077

Closed

67 tasks

jponikarchuk mentioned this pull request Feb 21, 2026

[$250] Home - Company and personal cards not shown in Assigned cards widget #83129

Closed

7 tasks

melvin-bot bot mentioned this pull request Feb 23, 2026

[Due for payment 2026-03-02] [Home Page][V2] Add Remaining limit slot for the Expensify Card #81526

Closed

		const hasLimitData = !!card.availableSpend && !!unapprovedExpenseLimit;
		const spentFraction = hasLimitData ? 1 - (card.availableSpend ?? 0) / (unapprovedExpenseLimit ?? 1) : 0;

Conversation

WojtekBoman commented Feb 18, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Explanation of Change

Fixed Issues

Tests

Prerequisites

Visibility

Card content

Remaining limit circle

Hover behavior

Navigation

Responsive layout

Card types

Offline tests

QA Steps

PR Author Checklist

Screenshots/Videos

Uh oh!

melvin-bot bot commented Feb 18, 2026

Uh oh!

codecov bot commented Feb 18, 2026 • edited by github-actions bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

WojtekBoman commented Feb 18, 2026

Uh oh!

chatgpt-codex-connector bot left a comment

Choose a reason for hiding this comment

💡 Codex Review

Uh oh!

Uh oh!

chatgpt-codex-connector bot Feb 18, 2026

Choose a reason for hiding this comment

Uh oh!

chatgpt-codex-connector bot Feb 18, 2026

Choose a reason for hiding this comment

Uh oh!

This comment has been minimized.

OSBotify commented Feb 18, 2026

🦜 Polyglot Parrot! 🦜

Uh oh!

melvin-bot bot commented Feb 18, 2026

Uh oh!

Uh oh!

grgia left a comment

Choose a reason for hiding this comment

Uh oh!

github-actions bot commented Feb 18, 2026

Uh oh!

This comment has been minimized.

grgia left a comment

Choose a reason for hiding this comment

Uh oh!

grgia commented Feb 18, 2026

Uh oh!

grgia commented Feb 18, 2026

Uh oh!

grgia Feb 18, 2026

Choose a reason for hiding this comment

Uh oh!

grgia Feb 18, 2026

Choose a reason for hiding this comment

Uh oh!

joekaufmanexpensify left a comment

Choose a reason for hiding this comment

Uh oh!

shawnborton commented Feb 18, 2026

Uh oh!

WojtekBoman commented Feb 20, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

NAB - Animation is abrupt

Uh oh!

ZhenjaHorbach commented Feb 20, 2026

Uh oh!

Uh oh!

Uh oh!

Uh oh!

github-actions bot commented Feb 20, 2026

Uh oh!

WojtekBoman commented Feb 18, 2026 •

edited

Loading

codecov bot commented Feb 18, 2026 •

edited by github-actions bot

Loading

WojtekBoman commented Feb 20, 2026 •

edited

Loading