pq-pending

The modal

Household data first, then one repeatable card per applicant. Income branches by how each person is paid.

Your Pre-Qualification

Submitted July 30, 2026

A licensed loan officer is reviewing this. Expect a call or email within 1–2 business days.

Buying Journey

StageUnder contract

AreaMonroe County, FL 33036

Savings for this purchase$30,000–$50,000

Applying with1 other person

Applicants

Bertman Tester Primary

Contact

Date of birth04/12/1985

Phone(305) 555-0148

Email[email protected]

Address123 Overseas Hwy, Tavernier, FL 33070

Background

US citizen or permanent residentYes

Foreclosure / deed-in-lieu, past 7 yrsNo

Owned a home, past 3 yrsNo

Income

TypeRegular pay with deductions

Earnings$6,200 / Monthly

Maria Tester Co-Applicant · Legal Spouse

Contact

Date of birth09/03/1988

Phone(305) 555-0172

AddressSame as primary

Background

US citizen or permanent residentYes

Foreclosure / deed-in-lieu, past 7 yrsNo

Owned a home, past 3 yrsNo

Income

TypeSelf-employed / own a business

Net income — 2025$58,000

Net income — 2024$52,000

Credit Check

Soft pull authorized — both applicantsYes

See something that needs fixing? Let your loan officer know when they reach out — they can update it directly.

Example data. Maria's Contact section now includes DOB and phone, matching the primary's — the co-borrower intake screen was updated to collect both.

Card — markup

HTML

<div class="pzl-head">
  <span class="pzl-label">Your Lender</span>
  <span class="pzl-status"><span class="pzl-dot"></span>Pending Review</span>
</div>

<div class="pzl-body">
  A licensed loan officer is reviewing your request. Expect a call or email within 1–2 business days.
</div>

<!-- opens the modal below -->
<button type="button" class="pzl-link" data-open-modal>
  View what you submitted
</button>

<div class="pzl-actions">
  <button type="button" class="pzl-btn">Message Support</button>
</div>

CSS

.pzl-status { color: #B8760A; }
.pzl-dot    { background: #D89B2E; }

.pzl-link {
  background: none; border: 0; padding: 0; margin: 0 0 12px;
  font-family: inherit; font-size: 11.5px; font-weight: 700;
  color: #233C90; text-decoration: underline; cursor: pointer;
  display: block; text-align: left;
}
.pzl-link:focus-visible { outline: 2px solid #233C90; outline-offset: 2px; }

/* uses the existing secondary/ghost button style already in the design system */
.pzl-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: #fff; border: 1px solid #C9CFE0; color: #233C90;
  border-radius: 4px; font-family: inherit; font-size: 11.5px;
  font-weight: 700; padding: 7px 13px; cursor: pointer;
}
.pzl-btn:hover { border-color: #233C90; }
.pzl-btn:focus-visible { outline: 2px solid #233C90; outline-offset: 2px; }

JS

// Wire to whatever modal system the profile page already uses.
document.querySelector('[data-open-modal]')?.addEventListener('click', () => {
  // openModal('pz-lender-submitted-details');
});

// Message Support should trigger the existing floating support widget
// pinned to the right side of the screen — not a new component.

Modal — markup

HTML — per-applicant card, repeat for each co-applicant

<!-- one .pzm-person block per applicant. "Contact" fields (DOB, phone,
     email, address) only exist on the primary today — see notes. -->
<div class="pzm-person">
  <div class="pzm-person-name">
    Bertman Tester <span class="tag">Primary</span>
  </div>

  <div class="pzm-sub-h">Contact</div>
  <div class="pzm-row"><span class="k">Date of birth</span><span class="v">04/12/1985</span></div>
  <div class="pzm-row"><span class="k">Phone</span><span class="v">(305) 555-0148</span></div>
  <div class="pzm-row"><span class="k">Email</span><span class="v">[email protected]</span></div>
  <div class="pzm-row"><span class="k">Address</span><span class="v">123 Overseas Hwy, Tavernier, FL 33070</span></div>

  <div class="pzm-sub-h">Background</div>
  <div class="pzm-row"><span class="k">US citizen or permanent resident</span><span class="v">Yes</span></div>
  <div class="pzm-row"><span class="k">Foreclosure / deed-in-lieu, past 7 yrs</span><span class="v">No</span></div>
  <div class="pzm-row"><span class="k">Owned a home, past 3 yrs</span><span class="v">No</span></div>

  <div class="pzm-sub-h">Income</div>
  <div class="pzm-row"><span class="k">Type</span><span class="v">Regular pay with deductions</span></div>

  <!-- Earnings row: only when income type = Regular pay or Retirement -->
  <div class="pzm-row"><span class="k">Earnings</span><span class="v">$6,200 / Monthly</span></div>

  <!-- OR, when income type = 1099 or Self-employed, replace the row
       above with two net-income rows instead:
  <div class="pzm-row"><span class="k">Net income — 2025</span><span class="v">$58,000</span></div>
  <div class="pzm-row"><span class="k">Net income — 2024</span><span class="v">$52,000</span></div>
  -->
</div>

CSS

.pzm-body { max-height: 520px; overflow-y: auto; margin: 0 -4px; padding: 0 4px; }

.pzm-person {
  border: 1px solid #E4E7EF; border-radius: 6px;
  padding: 11px 13px; margin-bottom: 10px;
}
.pzm-person:last-child { margin-bottom: 0; }

.pzm-person-name { font-size: 12.5px; font-weight: 900; color: #1F2430; margin-bottom: 8px; }
.pzm-person-name .tag {
  display: inline-block; font-size: 9px; font-weight: 900;
  letter-spacing: .06em; text-transform: uppercase;
  background: #EDF1FB; color: #233C90; padding: 2px 6px;
  border-radius: 3px; margin-left: 6px; vertical-align: middle;
}

.pzm-sub-h {
  font-size: 9.5px; font-weight: 900; letter-spacing: .06em;
  text-transform: uppercase; color: #B8BECC; margin: 9px 0 3px;
}
.pzm-sub-h:first-child { margin-top: 0; }

JS — open/close

// openModal('pz-lender-submitted-details') from the card should render
// this modal, populated from the same record the loan officer sees.
// Close button and overlay-click dismiss it — no other logic needed;
// the modal is read-only display, not a form.

Data reference

Where each field in the modal comes from and how it behaves.

Field	Scope	Behavior
Stage / Area / Savings / Applying with	Household	One value each, shown once at the top
DOB, Phone, Email, Address	Per applicant	Currently primary-only — co-applicant screens don't collect these yet, see flag below
Citizenship, Foreclosure history, Prior homeownership	Per applicant	Yes/No, asked of every applicant
Income type	Per applicant	Regular pay w/ deductions / Paid on 1099 / Self-employed / Retirement or fixed
Earnings or Net income	Per applicant	Amount + frequency if Regular pay or Retirement; two years of net income if 1099 or Self-employed — never both
Applicant cards	Repeats	One card per person — the flow allows qualifying with 2 or more additional people, not just one

Before this ships

Resolved since this spec was first written Date of birth and phone are now collected on the co-borrower intake screen, so the co-applicant's Contact section above includes both, in the same position and format as the primary's. No Email row on her card — that field still isn't collected for co-applicants.

Notes

State-driven, not visit-driven. This card should render Pending Review whenever a submission exists and no loan officer response has landed — not "the buyer opened this page after submitting a form." Use whatever your backend already tracks for review status.
Modal is read-only. "Let your loan officer know" routes corrections through a person instead of letting the buyer edit a record mid-review, which avoids the modal and the loan officer's view ever disagreeing.
Consent question still open — the credit-pull checkbox is worded "my credit information" on both the primary's screen and the co-applicant's screen, and the primary is the one clicking it on both. Flagged for the same Approval IQ compliance pass as the co-borrower screen itself.
ZIP capture — confirm where ZIP is actually collected during area selection; the location screen built earlier only exposed State and County.

Pending Review — final build spec

Live preview

The modal

Card — markup

Modal — markup

Data reference

Before this ships