UI: Create nested transaction for "Transaction in this report" page

[exalate-issue-sync]

User Story:

As a standard user, I would like to see associated transactions for receipts, Disbursements, and Loans and Debts without needing an “associated with” column on the tables.

Task:

Please create a nested transactions design for Receipts.

QA Notes

null

DEV Notes

null

Design

Annotated Design

Pixel Measurement Rules for Line Labels

With an Arrow:

#* Measurements are taken from the arrow to the number.
#* If there is no number, the measurement is taken from the arrow to the line.
#* Additionally, there’s a 2-pixel gap between the number and the start of the name or label.

Without an Arrow:

#* Measurements are taken from the number to the name or label directly.

Examples from the Design:

• Line 11(a)(i): 54px from the arrow to the number.
• Line 11(b): 64px from the arrow to the number.
• Line 12:
  ** 72px from the arrow to the number.
  ** 74px from the arrow to the start of the name ("Transfer").
• Line 13 (No Arrow): 74px from the number to the start of the name ("Loan Received from Individual").

---

Closed tabs

!Screenshot 2025-01-27 at 2.20.27 PM.png|width=721,height=359,alt="Screenshot 2025-01-27 at 2.20.27 PM.png"!

One open, one closed

!Screenshot 2025-01-27 at 2.14.51 PM.png|width=777,height=415,alt="Screenshot 2025-01-27 at 2.14.51 PM.png"!

Both open

!Screenshot 2025-01-27 at 2.15.20 PM.png|width=790,height=415,alt="Screenshot 2025-01-27 at 2.15.20 PM.png"!

See full ticket and images here: FECFILE-1943

[exalate-issue-sync]

Shannon Clark commented: This one is in progress starting 1/10/25

[exalate-issue-sync]

Shannon Clark commented: [~accountid:61b0b42cc510bc006b5c03ed] [~accountid:5b93ddba73130a2b8c662e23] These are ready for a design review. Thank you!

[exalate-issue-sync]

Shannon Clark commented: [~accountid:61b0b42cc510bc006b5c03ed] I updated these based on our conversation today. Please let me know if these need any more edits.