An expense-approval flow and a lab-range check screened a tenant

⁠Build log series⁠: I hand a real screen to an AI that has never seen Gunjo (@gunjo/ui) and let it build. Real estate, screen four: ⁠rental application and tenant screening⁠ (applicant details, screening criteria, required documents, the screening workflow from intake through documents and the guarantee company to owner approval, and the decision).

The fourth real-estate screen after operations (#60), contract (#61), and consumer (#62). Tenant screening: take the application, check the applicant's profile, income requirement, and documents, then walk a multi-stage approval workflow to an approve-or-decline decision.

Result: 4.5/5

tsc and build passed, the console stayed clear, 375px scrolled nothing sideways, the income requirement evaluated annual income against the required threshold, the document checklist paired with uploads, the workflow advanced stage by stage with send-backs, decisions came out as approved, conditional, or declined, and the page had a single h1.

The star this round: approval and threshold components crossed into leasing

The fourth screen brought a new layer, the ⁠approval workflow⁠, and components raised in accounting and payroll carried it. From the agent's writeup:

• ⁠ApprovalSteps (built for expenses, payroll, and internal approvals in #39 and #40) fit the screening workflow well.⁠ It mapped cleanly onto intake, document check, guarantee-company review, owner approval, and completion, with each stage owned by a real party (the property manager, the rent-guarantee company, the landlord). Its state set and the per-stage owner, timestamp, and comment are exactly what a multi-party screening needs.
• ⁠ReferenceValue (built for medical reference ranges) fit income against the requirement.⁠ range={{ low: requiredIncome }} plus formatCurrency plus showRange gave "¥4,800,000, meets the requirement (required annual income at or above ¥4,608,000)". The rent-at-or-under-a-third-of-monthly-income check dropped straight in.

Approving an expense and approving a tenant share one skeleton: ⁠multiple stages, named owners, explicit states⁠. A lab value against its range and an income against a requirement share another: ⁠a value against a threshold⁠. The label-and-description support on Form, Input, and Select, plus FileUploader (documents), Statistic, Badge, and Dialog, all worked without ceremony.

What I fixed this round: aria-current on ApprovalSteps

• 🟠 ⁠The current step in ApprovalSteps carried no aria-current="step"⁠: the position lived only in an aria-label, so assistive tech had no structural way to find "you are here". Added it to the current step (issue #266, PR #268, verified in a browser). The same species of accessibility miss as the Progress naming in issue #219.

Logged, not built (waiting for a second sighting in approval flows)

• 🟠 ⁠Make ApprovalSteps operable⁠ (issue #267). The display is complete but ⁠display-only⁠: advancing stages, sending back, and gating the final decision get hand-rolled every time (about 120 lines from this round's agent). A controlled variant with currentStageId plus onAdvance and onSendBack, and a returned state for send-backs (a send-back is not a decline). Expenses, payroll, internal approvals, and tenant screening all write the same machinery.
• 🟡 ReferenceValue's default labels lean medical (a pass-fail preset would suit non-medical uses), and a document-checklist component is missing as well. First sightings, both.

What I took away: four screens, and the industry crossing is the whole story

#60 operations: SafetyBanner (arrears), Meter (occupancy)
#61 contract:   SignedRecord (execute, lock, addendum)
#62 consumer:   Calendar and Gallery (viewing bookings)
#63 screening:  ApprovalSteps (the workflow), ReferenceValue (the income requirement)

Four real-estate screens (operations, contract, consumer, screening), and ⁠every one ran on components raised in medicine, logistics, finance, and accounting, skeletons intact⁠. SafetyBanner, SignedRecord, Calendar, ApprovalSteps, ReferenceValue: all of them. This is the closing argument for spreading rounds across industries: ⁠a component that captures the skeleton of a workflow (acknowledge a danger, sign and lock, pick a date, approve in stages, compare a value to a threshold) crosses industry lines⁠. The gaps that remain (an operable ApprovalSteps and friends) share those skeletons too; what is missing is a dimension here and there, and extensions cover that.

Next up: build log #64

• Real estate is done at four screens with the industry crossing demonstrated. ⁠On to a new industry⁠ (manufacturing, education, public sector, travel) to hunt for new workflow skeletons.

The run

• ⁠gunjo.jp⁠ / npm @gunjo/ui / ⁠GitHub⁠
• Earlier rounds: #1 through #62
• ⁠GunjoUI by UIXHERO⁠

Gunjo was still in early alpha at the time; issues are welcome.