diff --git a/src/components/Table/TableHeader.tsx b/src/components/Table/TableHeader.tsx index 576c979f419d..5ade6ea22a1e 100644 --- a/src/components/Table/TableHeader.tsx +++ b/src/components/Table/TableHeader.tsx @@ -20,6 +20,7 @@ import {StyleSheet, View} from 'react-native'; import type {TableColumn, TableData} from './types'; +import getGridTemplateColumns from './getGridTemplateColumns'; import {getColumnHeaderAccessibilityProps, getRowAccessibilityProps, shouldUseTableSemantics} from './tableAccessibility'; import {useTableContext} from './TableContext'; @@ -79,7 +80,7 @@ function TableHeader (column.width ? `${column.width}px` : '1fr')); + const gridTemplateColumns = getGridTemplateColumns(columns); if (isSelectionCheckboxVisible) { gridTemplateColumns.unshift(`${variables.tableCheckboxColumnWidth}px`); diff --git a/src/components/Table/TableRow.tsx b/src/components/Table/TableRow.tsx index a4d1a10e5907..71d60c845a52 100644 --- a/src/components/Table/TableRow.tsx +++ b/src/components/Table/TableRow.tsx @@ -23,6 +23,7 @@ import React from 'react'; import {View} from 'react-native'; import Animated from 'react-native-reanimated'; +import getGridTemplateColumns from './getGridTemplateColumns'; import {assignCellColumnIndexes, getCellAccessibilityProps, getRowAccessibilityProps, shouldUseTableSemantics} from './tableAccessibility'; import {useTableContext} from './TableContext'; @@ -82,7 +83,7 @@ export default function TableRow({ const item = processedData.at(rowIndex); const rowCount = processedData.length; const isTableSemanticsEnabled = shouldUseTableSemantics(shouldUseNarrowTableLayout); - const gridTemplateColumns = columns.map((column) => (column.width ? `${column.width}px` : '1fr')); + const gridTemplateColumns = getGridTemplateColumns(columns); const isSelectionCheckboxVisible = selectionEnabled && (isMobileSelectionEnabled || !selectionUsesNarrowLayout); const isDisabled = !!disabled; diff --git a/src/components/Table/getGridTemplateColumns.ts b/src/components/Table/getGridTemplateColumns.ts new file mode 100644 index 000000000000..2dcf9f276c0a --- /dev/null +++ b/src/components/Table/getGridTemplateColumns.ts @@ -0,0 +1,13 @@ +import type {TableColumn} from './types'; + +/** + * Builds the CSS grid track list that lays out a table's columns on wide layouts. + * + * A column with a fixed `width` gets a `px` track. Every other column gets an `fr` track sized by its + * `styling.flex`, so a column can claim a larger share of the leftover space than its siblings. + */ +function getGridTemplateColumns(columns: Array>): string[] { + return columns.map((column) => (column.width ? `${column.width}px` : `${column.styling?.flex ?? 1}fr`)); +} + +export default getGridTemplateColumns; diff --git a/src/components/Tables/WorkspaceExpensifyCardsTable/WorkspaceExpensifyCardsTableRow.tsx b/src/components/Tables/WorkspaceExpensifyCardsTable/WorkspaceExpensifyCardsTableRow.tsx index 5ca462e2d812..c57e4819d552 100644 --- a/src/components/Tables/WorkspaceExpensifyCardsTable/WorkspaceExpensifyCardsTableRow.tsx +++ b/src/components/Tables/WorkspaceExpensifyCardsTable/WorkspaceExpensifyCardsTableRow.tsx @@ -54,6 +54,7 @@ export default function WorkspaceExpensifyCardsTableRow({item, rowIndex, shouldU const statusTranslationKey = getTranslationKeyForCardStatus(item.card.state, item.isVirtual); const statusLabel = statusTranslationKey ? translate(statusTranslationKey) : ''; const formattedLimit = convertToShortDisplayString(item.limit, item.currency); + const formattedRemainingLimit = convertToShortDisplayString(item.remainingLimit, item.currency); const formattedFrozenDate = item.frozenDate ? DateUtils.formatWithUTCTimeZone(item.frozenDate, CONST.DATE.MONTH_DAY_YEAR_ABBR_FORMAT) : ''; let frozenByText: string | undefined; if (formattedFrozenDate) { @@ -65,7 +66,9 @@ export default function WorkspaceExpensifyCardsTableRow({item, rowIndex, shouldU } } - const accessibilityLabel = [cardholderName, item.name, cardType, limitTypeLabel, item.lastFourPAN, statusLabel, formattedLimit, frozenByText].filter(Boolean).join(', '); + const accessibilityLabel = [cardholderName, item.name, cardType, limitTypeLabel, item.lastFourPAN, statusLabel, formattedLimit, formattedRemainingLimit, frozenByText] + .filter(Boolean) + .join(', '); const frozenByRowFooter = !!frozenByText && ( @@ -138,7 +141,7 @@ export default function WorkspaceExpensifyCardsTableRow({item, rowIndex, shouldU {!shouldUseNarrowTableLayout && ( + {!shouldUseNarrowTableLayout && ( + + + + )} + `Der Saldo wird am ${settlementDate} ausgeglichen.`, settleBalance: 'Saldo ausgleichen', cardLimit: 'Kartenlimit', + remaining: 'Verbleibend', remainingLimit: 'Verbleibendes Limit', requestLimitIncrease: 'Anhebung des Anfragelimits', remainingLimitDescription: diff --git a/src/languages/en.ts b/src/languages/en.ts index 40383d04d1ba..b9ee167bd14d 100644 --- a/src/languages/en.ts +++ b/src/languages/en.ts @@ -6032,6 +6032,7 @@ const translations = { balanceWillBeSettledOn: (settlementDate: string) => `Balance will be settled on ${settlementDate}`, settleBalance: 'Settle balance', cardLimit: 'Card limit', + remaining: 'Remaining', remainingLimit: 'Remaining limit', requestLimitIncrease: 'Request limit increase', remainingLimitDescription: diff --git a/src/languages/es.ts b/src/languages/es.ts index 40b0f1fec1f8..f5ff253f9fd4 100644 --- a/src/languages/es.ts +++ b/src/languages/es.ts @@ -5780,6 +5780,7 @@ ${amount} para ${merchant} - ${date}`, balanceWillBeSettledOn: (settlementDate) => `El saldo se liquidará el ${settlementDate}.`, settleBalance: 'Liquidar saldo', cardLimit: 'Límite de la tarjeta', + remaining: 'Restante', remainingLimit: 'Límite restante', requestLimitIncrease: 'Solicitar aumento de límite', remainingLimitDescription: diff --git a/src/languages/fr.ts b/src/languages/fr.ts index 76b9f7051b99..7a70adf2f64e 100644 --- a/src/languages/fr.ts +++ b/src/languages/fr.ts @@ -5955,6 +5955,7 @@ _Pour des instructions plus détaillées, [visitez notre site d’aide](${CONST. balanceWillBeSettledOn: (settlementDate: string) => `Le solde sera réglé le ${settlementDate}`, settleBalance: 'Régler le solde', cardLimit: 'Plafond de carte', + remaining: 'Restant', remainingLimit: 'Plafond restant', requestLimitIncrease: 'Demander une augmentation de la limite', remainingLimitDescription: diff --git a/src/languages/it.ts b/src/languages/it.ts index 52954061ba89..a540daa5a8a7 100644 --- a/src/languages/it.ts +++ b/src/languages/it.ts @@ -5912,6 +5912,7 @@ _Per istruzioni più dettagliate, [visita il nostro sito di assistenza](${CONST. balanceWillBeSettledOn: (settlementDate: string) => `Il saldo sarà regolato il ${settlementDate}`, settleBalance: 'Saldo da saldare', cardLimit: 'Limite carta', + remaining: 'Rimanente', remainingLimit: 'Limite rimanente', requestLimitIncrease: 'Richiedi aumento limite', remainingLimitDescription: diff --git a/src/languages/ja.ts b/src/languages/ja.ts index ddae1697c831..ac1a033656d3 100644 --- a/src/languages/ja.ts +++ b/src/languages/ja.ts @@ -5851,6 +5851,7 @@ _詳しい手順については、[ヘルプサイトをご覧ください](${CO balanceWillBeSettledOn: (settlementDate: string) => `残高は${settlementDate}に精算されます`, settleBalance: '残高を清算', cardLimit: 'カード上限', + remaining: '残り', remainingLimit: '残りの上限', requestLimitIncrease: 'リクエスト上限の引き上げ', remainingLimitDescription: diff --git a/src/languages/nl.ts b/src/languages/nl.ts index fc88dd4b2d0c..4281b9720db2 100644 --- a/src/languages/nl.ts +++ b/src/languages/nl.ts @@ -5906,6 +5906,7 @@ _Voor meer gedetailleerde instructies, [bezoek onze help-site](${CONST.NETSUITE_ balanceWillBeSettledOn: (settlementDate: string) => `Saldo wordt vereffend op ${settlementDate}`, settleBalance: 'Saldo vereffenen', cardLimit: 'Kaartlimiet', + remaining: 'Resterend', remainingLimit: 'Resterende limiet', requestLimitIncrease: 'Verhoging van limiet aanvragen', remainingLimitDescription: diff --git a/src/languages/pl.ts b/src/languages/pl.ts index f891c05a51ca..68fce013b487 100644 --- a/src/languages/pl.ts +++ b/src/languages/pl.ts @@ -5886,6 +5886,7 @@ _Aby uzyskać bardziej szczegółowe instrukcje, [odwiedź naszą stronę pomocy balanceWillBeSettledOn: (settlementDate: string) => `Saldo zostanie rozliczone w dniu ${settlementDate}`, settleBalance: 'Ureguluj saldo', cardLimit: 'Limit karty', + remaining: 'Pozostało', remainingLimit: 'Pozostały limit', requestLimitIncrease: 'Zwiększ limit żądań', remainingLimitDescription: diff --git a/src/languages/pt-BR.ts b/src/languages/pt-BR.ts index 62d2ae04a800..abc159643e8c 100644 --- a/src/languages/pt-BR.ts +++ b/src/languages/pt-BR.ts @@ -5900,6 +5900,7 @@ _Para instruções mais detalhadas, [visite nossa central de ajuda](${CONST.NETS balanceWillBeSettledOn: (settlementDate: string) => `O saldo será liquidado em ${settlementDate}`, settleBalance: 'Quitar saldo', cardLimit: 'Limite do cartão', + remaining: 'Restante', remainingLimit: 'Limite restante', requestLimitIncrease: 'Solicitar aumento de limite', remainingLimitDescription: diff --git a/src/languages/zh-hans.ts b/src/languages/zh-hans.ts index 82a573880a76..58cc441871e8 100644 --- a/src/languages/zh-hans.ts +++ b/src/languages/zh-hans.ts @@ -5728,6 +5728,7 @@ _如需更详细的说明，请[访问我们的帮助网站](${CONST.NETSUITE_IM balanceWillBeSettledOn: (settlementDate: string) => `余额将于 ${settlementDate} 结清`, settleBalance: '结清余额', cardLimit: '卡片限额', + remaining: '剩余', remainingLimit: '剩余额度', requestLimitIncrease: '请求提高限额', remainingLimitDescription: diff --git a/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardListPage.tsx b/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardListPage.tsx index 1b16917410bd..7c053c079122 100644 --- a/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardListPage.tsx +++ b/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardListPage.tsx @@ -147,6 +147,7 @@ function WorkspaceExpensifyCardListPage({route, cardsList, fundID}: WorkspaceExp name: card.nameValuePairs?.cardTitle ?? '', cardholder: personalDetails?.[card.accountID ?? CONST.DEFAULT_NUMBER_ID], limit: card.nameValuePairs?.unapprovedExpenseLimit ?? 0, + remainingLimit: card.availableSpend ?? 0, currency: settlementCurrency, isVirtual: !!card.nameValuePairs?.isVirtual, limitType: card.nameValuePairs?.limitType, diff --git a/src/styles/variables.ts b/src/styles/variables.ts index cd4a5f300a3e..d627b336f959 100644 --- a/src/styles/variables.ts +++ b/src/styles/variables.ts @@ -149,6 +149,8 @@ export default { tableRequireFieldsTypeColumnWidth: 112, tableSwitchColumnWidth: 58, tableCaretColumnWidth: 20, + tableLastFourColumnWidth: 72, + tableCardStatusColumnWidth: 128, workspaceTagsTableCountColumnWidth: 100, domainTableActionColumnWidth: 64, domainAdminsTableActionColumnWidth: 140,