Table Scheduling — GCash DS Assessment

KeepNeeds Refinement

A display-only scheduled-payment row — a date and total on the first line, then however many label/amount cells you drop into its slot. Default and disabled states.

Keep — rebuilt on slots, naming settled

Kept as its own component rather than folded into Table Row, because it carries more controls than a standard row entry. The rebuild answered everything else: the type enum with its sentence-shaped values ("2 amounts display") is gone, replaced by a ⤷ AmountRowSlot that takes however many Table Amount Cell instances you need. The raster peso is now a Peso Sign - Proxima vector instance sitting in a ⤷ CurrencySlot, used consistently on both the primary line and the detail cells — the old mix of a bitmap glyph and a literal "PHP" string is gone. Slot names match the Table Row convention, the details row is named the same way in both states, and the date now reads #month / #day / #year with its separators kept as plain layers. Code Connect stays unmapped because the native library doesn't exist yet. A later pass went through the primitive and the panel: Amount and Label became text properties so the row's own values are settable, Table Amount Cell's #value became #amount to match its property, its Disabled version now carries the dimming rather than each copy, and the disabled row got back the 16px gap it had lost under its breakdown. Every colour is bound. The peso glyph is still an unflattened boolean operation — delegated to the Iconography team, and the one thing holding this at Needs Refinement.

In Context

Scheduled payments screen (auto-debit, installment plans, standing orders): a list of upcoming payment rows stamped with a date, the total debit amount, and — where relevant — a breakdown of principal / interest / fee components.

Live Preview

MM / DD / YYYYX,XXX.XX

Label

LabelX,XXX.XX

Properties

State

hasAmountRow

hasBorder

Content

#month

#day

#year

#amount

#label

⤷ CurrencySlot

Peso Sign

⤷ AmountRowSlot

Table Amount Cells

DS Health

Reusable

Pass

⤷ AmountRowSlot takes any number of detail cells rather than a fixed 0 / 2 / 4, and ⤷ CurrencySlot means a non-peso currency is a swap rather than a detach.

Self-contained

Pass

The currency prefix is one Peso Sign - Proxima vector instance used the same way on the primary line and inside each detail cell. The raster asset and the literal "PHP" string are both gone.

Consistent

Pass

Slot names match the Table Row convention (⤷ CurrencySlot, ⤷ AmountRowSlot), State is a PascalCase variant property, and both states name the details row identically. The date's three text properties are distinguishable from its separators. Text properties now match their layer names across the whole Table family, and Table Amount Cell carries its own Disabled version the same way the Table Row primitives do.

Composable

Pass

Detail cells are Table Amount Cell instances placed in a slot, and each nests its own ⤷ CurrencySlot. The old inline re-implementation of the label / value pair is gone.

Behavior

State	iOS	Android	Figma Property	Notes
Default	Yes	Yes	State=Default	360 × 90. Date on the left at Proxima Soft Semibold 12, total in `#005CE5` Bold 14, then a details row of label/amount cells.
Disabled	Yes	Yes	State=Disabled	Every text layer dims to `#C2CFE5` — date, total, labels, and cell values alike.
Pressed	N/A	N/A	Not built	Not needed — the row is display-only and carries no tap target.

Issues

The peso glyph is still a boolean operation. Peso Sign - Proxima wraps a shape_full BOOLEAN_OPERATION rather than a flattened vector. It renders correctly and is a clear improvement on the old raster, but boolean operations are the pattern this review process routes to the Iconography team to flatten. Delegated — not this component's owner to fix. C6 · Asset & Icon Quality

The disabled row lines up with the default one again. v2.2: State=Disabled had lost the 16px gap between its row label and the breakdown cells, so its cells sat 16px left of where the same row sits enabled — a visible jump if a row ever toggled. Found by comparing the two exports side by side; the layer tree gives no hint of it. Restored. C1 · Layer Structure & Naming
Every text layer is named after the property that fills it. v2.2: Table Amount Cell's value layer was #value while its property was Amount. It is #amount now. The whole Table family follows one rule — the layer is the property name with a # in front. C1 · Layer Structure & Naming
The row's own text can be set from the panel. v2.2: the scheduled total and the breakdown label were bare layers — the component's headline value could not be set without selecting the layer. Amount and Label are text properties now, and Table Amount Cell gained a Label of its own alongside its Amount. C2 · Variant & Property Naming
The disabled look lives in the primitive, not in each copy. v2.2: Table Amount Cell publishes its own Disabled version, so a disabled row swaps to it rather than having its colours painted over copy by copy. Same pattern as the Table Row primitives. C5 · Interaction State Coverage
Every colour is bound to a named system colour. v2.2: checked against Figma's selection-colours panel, which the earlier tooling could not read. Six paints, six names — bg/color-bg-main, border/color-border-weak, text/color-text, text/color-text-primary, text/color-text-weaker, text/color-text-disabled. The two-tier currency is deliberate: the scheduled total sits on text/color-text-primary, the itemised cells on text/color-text. C3 · Token Coverage
The type enum is gone. v2.0: rebuilt on node 5868:40468. The sentence-shaped values ("no display amount", "2 amounts display", "4 amounts display") are replaced by ⤷ AmountRowSlot, which holds however many Table Amount Cell instances the surface needs. C2 · Variant & Property Naming
The peso sign is a vector. v2.0: the raster image fill is replaced by a Peso Sign - Proxima component instance in a ⤷ CurrencySlot, on both the primary line and inside each detail cell. The literal "PHP" prefix on detail amounts is gone, so one treatment now covers the whole component. The custom glyph is deliberate — it matches Proxima and takes less width than spelling out PHP. C6 · Asset & Icon Quality
The row maps to native primitives. v2.0: frames and slots throughout, so it builds as a VStack / Column with a nested row of cells. No platform table primitive required. C4 · Native Mappability
Interaction states are intentionally minimal. v2.0: reviewed and settled. The row is display-only, so pressed is not needed. State=Disabled is built for past, cancelled, or skipped entries and dims every text layer to #C2CFE5. C5 · Interaction State Coverage
Both states name the details row the same way. v2.1: details-row in Default (5868:40492) and Disabled (5878:41670) alike. The stray item-row is gone. C1 · Layer Structure & Naming
The date's text properties are distinguishable. v2.1: the five identically-named #label layers are now #month, separator, #day, separator, #year. The three a developer sets are obvious from the layer tree, and the two restylable separators no longer read as text properties. C2 · Variant & Property Naming
Staying a separate component is intentional. v2.0: reviewed and dismissed. Scheduling carries more controls than a standard Table Row entry — a date line, a primary total, and a variable row of label/amount cells — so it keeps its own record rather than folding into Table Row or shipping as a recipe. It now shares Table Row's slot naming, so the two read as one family. C1 · Layer Structure & Naming

States

Default

MM / DD / YYYYX,XXX.XX

Label

LabelX,XXX.XX

Properties

hasAmountRow

hasBorder

Label

Amount

Month

Day

Year

Properties

State Default

hasAmountRow True

hasBorder True

Label Label

Amount X,XXX.XX

Month MM

Day DD

Year YYYY

⤷ CurrencySlot Peso Sign - Proxima

⤷ AmountRowSlot 2 × Table Amount Cell

Colors

Background #FFFFFF

Border #E5EBF4

Date #0A2757

Primary amount · currency #005CE5

Labels #6780A9

Cell value · currency #0A2757

Typography

#month · #day · #year Primary/Label/Light/Fine

#amount Primary/Label/Small

#label Primary/Multi-line Label/Light/Fine

Table Amount Cell #amount Primary/Label/Light/Fine

Layout

Height Hug · 90

Width 360

Radius 0

Padding H 24

Padding V 16 · on container

Gap 8 · on container

Alignment Left · Top

EBTableSchedulingRow(
    date: dueDate,            // MM / DD / YYYY
    amount: "X,XXX.XX",
    label: "Label",
    breakdown: breakdown
)

Colors by State

Six paints, and the six names Figma's selection-colours panel lists for node 5868:40468 — nothing is off-token. The currency glyph and amount are deliberately two-tier: text/color-text-primary on the scheduled total, text/color-text on the itemised breakdown beneath it.

Role	Element	Token	Value
Default	Background	bg/color-bg-main	#FFFFFF
—	Border	border/color-border-weak	#E5EBF4
—	Date	text/color-text	#0A2757
—	Primary amount · currency	text/color-text-primary	#005CE5
—	Labels	text/color-text-weaker	#6780A9
—	Cell value · currency	text/color-text	#0A2757
Disabled	Background	bg/color-bg-main	#FFFFFF
—	Border	border/color-border-weak	#E5EBF4
—	Every text layer	text/color-text-disabled	#C2CFE5

Disabled

MM / DD / YYYYX,XXX.XX

Label

LabelX,XXX.XX

Properties

hasAmountRow

hasBorder

Label

Amount

Month

Day

Year

Properties

State Disabled

hasAmountRow True

hasBorder True

Label Label

Amount X,XXX.XX

Month MM

Day DD

Year YYYY

⤷ CurrencySlot Peso Sign - Proxima

⤷ AmountRowSlot 2 × Table Amount Cell

Colors

Background #FFFFFF

Border #E5EBF4

Date #C2CFE5

Primary amount · currency #C2CFE5

Labels #C2CFE5

Cell value · currency #C2CFE5

Typography

#month · #day · #year Primary/Label/Light/Fine

#amount Primary/Label/Small

#label Primary/Multi-line Label/Light/Fine

Table Amount Cell #amount Primary/Label/Light/Fine

Layout

Height Hug · 90

Width 360

Radius 0

Padding H 24

Padding V 16 · on container

Gap 8 · on container

Alignment Left · Top

EBTableSchedulingRow(
    date: dueDate,            // MM / DD / YYYY
    amount: "X,XXX.XX",
    label: "Label",
    breakdown: breakdown
)
.disabled(true)

Installation Planned API

iOS — Swift Package Manager

.package(url: "https://github.com/AY-Org/eb-ds-ios", from: "1.0.0")

Android — Gradle (Kotlin DSL)

implementation("com.eastblue.ds:table:1.0.0")

Import

import EastBlueDS
import com.eastblue.ds.table.*

Property Mapping

Table Scheduling publishes ten properties. The four rows beneath them map Table Amount Cell, the primitive that fills ⤷ AmountRowSlot and has no page of its own; its State is driven by the row rather than set on its own, so it takes no parameter here. Two mappings are deliberately not one-to-one. Month, Day and Year are three Figma text fields for one value — natively that is a single date the platform formats for the reader's locale, which is what the Accessibility section below asks for and what three preformatted strings would prevent. And Amount is text in Figma because Figma has no number type; a native implementation should take a decimal and let the formatter supply both the grouping and the currency symbol.

Figma Property	SwiftUI	Compose
State — Default, Disabled	`.disabled(true)`	`enabled = false`
hasAmountRow — true, false	`breakdown: [AmountCell]?` — nil hides the row and its label	`breakdown: List<AmountCell>? = null`
hasBorder — true, false	`showsDivider: Bool = true`	`showsDivider: Boolean = true`
Label (text)	`label: String`	`label: String`
Amount (text)	`amount: String`	`amount: String`
Month (text)	`date: Date` — one value, formatted by the platform	`date: LocalDate`
Day (text)	`date: Date`	`date: LocalDate`
Year (text)	`date: Date`	`date: LocalDate`
⤷ CurrencySlot (slot)	`currency: AnyView?`	`currency: @Composable (() -> Unit)?`
⤷ AmountRowSlot (slot) — Table Amount Cell instances	`breakdown: [AmountCell]`	`breakdown: List<AmountCell>`
Table Amount Cell → Label (text)	`AmountCell.label: String`	`AmountCell.label: String`
Table Amount Cell → hasLabel — true, false	`AmountCell.label == nil` — nil hides it	`AmountCell.label == null`
Table Amount Cell → Amount (text)	`AmountCell.amount: String`	`AmountCell.amount: String`
Table Amount Cell → ⤷ CurrencySlot (slot)	`AmountCell.currency: AnyView?`	`AmountCell.currency: @Composable (() -> Unit)?`

SwiftUI

ios/Components/Table/EBTableSchedulingRow.swift

Jetpack Compose

android/components/table/EBTableSchedulingRow.kt

Usage Snippets Planned API

Default

// The primary line carries the scheduled total; the cells itemise it.
EBTableSchedulingRow(
    date: schedule.dueDate,
    amount: "1,250.00",
    label: "Monthly due",
    breakdown: [
        AmountCell(label: "Principal", amount: "1,100.00"),
        AmountCell(label: "Interest", amount: "150.00")
    ]
)

// The primary line carries the scheduled total; the cells itemise it.
EBTableSchedulingRow(
    date = schedule.dueDate,
    amount = "1,250.00",
    label = "Monthly due",
    breakdown = listOf(
        AmountCell("Principal", "1,100.00"),
        AmountCell("Interest", "150.00")
    )
)

Disabled

// For a schedule that has already run or been cancelled.
EBTableSchedulingRow(
    date: schedule.dueDate,
    amount: "1,250.00",
    label: "Monthly due",
    breakdown: [
        AmountCell(label: "Principal", amount: "1,100.00"),
        AmountCell(label: "Interest", amount: "150.00")
    ]
)
.disabled(true)

// For a schedule that has already run or been cancelled.
EBTableSchedulingRow(
    date = schedule.dueDate,
    amount = "1,250.00",
    label = "Monthly due",
    breakdown = listOf(
        AmountCell("Principal", "1,100.00"),
        AmountCell("Interest", "150.00")
    ),
    enabled = false
)

Requirement	iOS	Android
Row semantics	If tappable, wrap as `Button` with `.accessibilityLabel("Scheduled payment, May 10 2026, 1,250 pesos")` — combine the date and amount into one spoken phrase.	Wrap in `Modifier.clickable` + `Modifier.semantics(mergeDescendants = true)`; set `contentDescription` to a full spoken phrase.
Currency glyph fallback	Use Unicode `\u{20B1}` inline — avoid a raster image that won't scale with Dynamic Type.	Use Unicode `₱` inline — avoid a bitmap that won't respect font-scale settings.
Date formatting	Use `Date.FormatStyle` with the user's locale; don't hardcode `MMM DD, YYYY`.	Use `DateTimeFormatter.ofLocalizedDate(FormatStyle.MEDIUM)`; don't hardcode format string.
Detail label / value pairing	Group each detail cell so VoiceOver reads "Principal, 1,100 pesos" as one element, not two.	Group each detail cell so TalkBack reads "Principal, 1,100 pesos" as one element, not two.
Disabled / past rows	Past or cancelled schedules: `.accessibilityHint("Past payment")` + muted label tokens.	Past or cancelled schedules: `Modifier.semantics { stateDescription = "Past payment" }` + muted label tokens.

Usage Guidelines

Do

Put the scheduled total on the primary line and only its parts in the breakdown cells.

Don't

Don't repeat the total as one of the cells — the primary line already states it, and a reader will add it twice.

Do

Keep the breakdown to two Table Amount Cells per line.

Don't

Don't add a third: the ⤷ AmountRowSlot is 201px with 16 of right padding and each cell is 72, so a third wraps to a second line and the row grows past 90.

Do

Pass a date and a decimal, and let the platform format both.

Don't

Don't ship MM / DD / YYYY or a hardcoded peso — those are Figma placeholders for layout, not the format a reader should see.

Do

Use Disabled for a schedule that no longer applies — already paid, or cancelled.

Don't

Don't use it to mean read-only. Every row is display-only; Disabled is about the schedule, not the interaction.

Criteria Scorecard

ID	Criterion	Status	Notes
C1	Layer Structure & Naming	Ready	Text layers all take the `#…` form and both swappable areas the `⤷ …Slot` form. `Table Amount Cell`'s value layer is `#amount`, matching its `Amount` property — it was `#value`.
C2	Variant & Property Naming	Ready	One `State` setting with standard values, two `has*` booleans, five text properties named for what they hold. `Month`, `Day` and `Year` would be one `Date` under the naming catalogue; they stay split because collapsing them would break instances already placed, and that is tracked as a recommendation rather than a defect.
C3	Token Coverage	Ready	Verified against the selection-colours panel: six paints, six names — `bg/color-bg-main`, `border/color-border-weak`, `text/color-text`, `text/color-text-primary`, `text/color-text-weaker` and `text/color-text-disabled`. The currency glyph and total sit on `text/color-text-primary` while the breakdown sits on `text/color-text`, which is the component's own rule about primary versus itemised values.
C4	Native Mappability	Ready	A stack of two rows with a wrapping list of cells — no platform table primitive needed. The only mapping that is not one-to-one is the date, which is three Figma fields and one native value.
C5	Interaction State Coverage	Ready	Display-only by design, so pressed and selected have nothing to show. `State=Disabled` dims every text layer to `text/color-text-disabled` and leaves the background alone, and `Table Amount Cell` publishes its own Disabled version so the row swaps to it rather than overriding fills per copy.
C6	Asset & Icon Quality	Needs Refinement	The `Peso Sign - Proxima` instance draws an unflattened `BOOLEAN_OPERATION` rather than a flat vector. It renders correctly and is tracked as a design recommendation; flattening is the iconography team's to do.

Variants Inventory (2 total)

State (2) = 2 published versions. Two booleans sit on top without adding any — hasAmountRow and hasBorder — so the row has 8 combinations behind 2 versions. The five text properties and the two swappable areas add none either: ⤷ AmountRowSlot takes however many Table Amount Cell copies you drop in, replacing the old type setting that hard-coded 0 / 2 / 4.

State	Dimensions	Background	Node
Default	360 × 90	`#FFFFFF`	`5868:40481`
Disabled	360 × 90	`#FFFFFF`	`5878:41658`

2.2.1 — September 2026Patch

One native name per primitive · node 5868:40468

Column meant two different primitives. This page mapped Table Amount Cell to a native Column, while Table Row already used Column for Table Cell. Two pages, one name, two components. Table Transaction is where both appear together and would have collided in a single API, so it settled on AmountCell — and this page follows. The Figma side is unchanged; only the native type name moves.

Docs

2.2.0 — September 2026Minor

Primitive aligned; Style, Code and Overview rebuilt to the content guides · node 5868:40468

The disabled row lines up with the default one again. State=Disabled had lost the 16px gap between its row label and its breakdown cells, so its cells sat 16px left of where the same row sits enabled. Found by diffing the two exports — the layer tree gives no hint of it, since both variants report the same 95px label and a slot that simply fills what is left.

C1 Resolved

Every text layer is named after the property that fills it. Table Amount Cell's value layer was #value while its property was Amount; it is #amount now. This replaced a standing recommendation that both components adopt #value — the rule that survived is the more useful one, because it keeps holding as properties are added instead of having to be renegotiated each time.

C1 Resolved

The row's own text can be set from the panel. The scheduled total and the breakdown label were bare layers, so the component's headline value could not be set without selecting the layer. Amount and Label are text properties now, and Table Amount Cell gained a Label alongside its Amount.

C2 Resolved

The disabled look lives in the primitive. Table Amount Cell publishes its own Disabled version, so a disabled row swaps to it rather than having its colours painted over copy by copy — the same pattern as the Table Row primitives.

C5 Resolved

Every colour is bound to a named system colour. Checked against Figma's selection-colours panel, which the earlier tooling could not read: six paints, six names. The two-tier currency turns out to be deliberate — the scheduled total on text/color-text-primary, the itemised cells on text/color-text. This closes the standing recommendation to audit the bindings.

C3 Resolved

Scheduling semantics are written down. The Code tab's first usage guideline now says the scheduled total goes on the primary line and only its parts in the cells, with the warning not to repeat the total as one of them. Without it the component gets reused as a generic multi-amount row.

Docs

The Style tab described a component that had moved on. One card where State gives two. Height documented as 132.5 against a real Hug · 90. Five colour tokens — table/color/bg, table/color/label-amount, table/color/icon-currency-primary and two more — that do not exist in the file. And every colour and layout override keyed to a type control removed in v2.0, so none of them had fired since.

Docs

Layout is read rather than derived. The four Auto layout panels settle it: 24 left and right on the row, 16 top and bottom on container, an 8 gap between the two lines, and Auto horizontal spacing in the ⤷ AmountRowSlot with 16 of right padding. That last one explains the 72 + 41 + 72 + 16 the export measures, which is otherwise unguessable.

Docs

Code tab rebuilt to the content guide. Installation was empty — no SPM, no Gradle, no import — and now takes the Table family's coordinates. Property Mapping went from 9 rows to 14, regrouped into prose and extended to cover Table Amount Cell, whose whole API had been one row naming two layers. Usage Snippets split one per State; four usage guidelines written where there were none.

Docs

The two tabs had drifted apart on the date. The Code tab maps Month, Day and Year onto a single native date, because the Accessibility section asks for locale formatting and three preformatted strings make that impossible. The Style tab's snippets were still emitting three parameters. Both say date: now, with the three controls moving a trailing comment. Collapsing the three Figma fields into one Date stays open as a recommendation — it would break instances already placed.

Docs

Two versions of history were missing. The v2.0 and v2.1 work shipped together in 7f5cafa (August 2026) and never got changelog entries, while the Overview tab referenced both throughout. Both are written above, reconstructed from that commit and from the Overview's own version-tagged records.

Docs

2.1.0 — August 2026Minor

Naming pass on the rebuild · node 5868:40468

Both states name the details row the same way. The two State versions had drifted onto different layer names for the same row, which is the kind of thing that only shows up when someone diffs the two.

C1 Resolved

The date's separator layers are distinguishable from its text. #month, #day and #year are the fields; the two slashes between them are separator layers, and the names now say which is which.

C2 Resolved

2.0.0 — August 2026Major

2026 Working File · rebuilt on slots · node 5868:40468

The detail-count setting is gone. type held sentence-shaped values — "2 amounts display" — and fixed the number of breakdown cells at build time. The ⤷ AmountRowSlot now takes however many Table Amount Cell copies you drop in.

C2 Resolved

The peso sign became a vector. It was a raster image that would not scale with Dynamic Type. It is a Peso Sign - Proxima instance in a ⤷ CurrencySlot, used the same way on the primary line and inside every detail cell.

C6 Resolved

Detail cells are composed, not redrawn. Each one is a Table Amount Cell copy placed in the slot, carrying its own ⤷ CurrencySlot, rather than a label and an amount re-implemented inline.

Composition

The row maps to native primitives. Two stacked rows with a wrapping list of cells — no platform table primitive needed, on either side.

C4 Resolved

Disabled shipped; pressed and selected were dropped on purpose. The row is display-only and carries no tap target, so those two states have nothing to show. State=Disabled covers a schedule that no longer applies.

C5 Resolved

Scheduling stays its own component. The proposal was to remove it from core DS or fold it into Table Row. It carries a date line and a variable breakdown row on top of what a standard row does, so it stays separate — with slot naming and state coverage kept aligned across both.

C1 Resolved

1.0.0 — April 2026Major

Initial Assessment · node 47:324365

Family assessed — 3 variants selected by a single type enum. Third parallel Table-family record (Table, Table - Transaction, Table - Scheduling). Documented

Initial

Third family schema divergence — Introduces a new type enum instead of reusing Table's type × no. of columns × icon or Transaction's schema. Recommend folding into Inline Text / Table data-driven row. Open

C1 Open

Sentence-fragment enum values — "no display amount" / "2 amounts display" / "4 amounts display" bake the detail count into natural-language strings. Open

C2 Open

No native mobile primitive — Scheduled payments are a List / LazyColumn pattern on mobile, not a fixed 360px grid. Open

C4 Open

No interaction / disabled states — Scheduling rows are typically tappable or visually muted for past / cancelled entries. Open

C5 Open

Mixed currency prefix treatments — Primary amount ships as a raster peso glyph; detail amounts use a literal "PHP" string. Open

C6 Open

Code Connect mappings — Not registered. Open

C7 Open