My Opportunities Redesign

What was wrong with it

Most of it was not a layout problem. The page was telling people things that were not true, and the layout made that hard to notice.

• Finished work counted as confirmed. Every appointment went in the "Confirmed" column whatever its status, so the sample account showed eight confirmed jobs when it had three, and "Potential earnings" summed pay from work done a month ago.
• Three identical tiles. Two counts and a dollar figure in the generic three-card row, the third carrying a Title Case "View Wallet" button.
• No sense of time. Cards were listed in whatever order the database returned them, with no grouping by day, so "when do I need to be there" meant reading every card.
• Placeholder pictures. Each card led with an image. A job with no photos got a generated abstract blob that read as a picture of the house.
• The wrong dialog. Opening a booked job showed the board's apply dialog, with an "Apply now" button for a job you already had.
• A full reload to leave. The empty state's button set window.location, which dropped the demo's URL prefix and put a demo visitor on the login page.
• An amber badge on every row. Amber is reserved for the one primary action on a surface. Here it marked the word "confirmed" on every card.
• A spinner for loading, no error state, and Title Case in every heading and empty-state line.

What it is now

A day sheet. Showing agents work off a printed sheet per day, and this is the screen version of it. Each day gets a calendar rail: its name over a large date numeral, the way a wall calendar marks a day, so a column of days scans by the numerals alone. Each job is a card whose left edge is the property itself, the agent's photo bleeding to the edge with no frame, so the card reads as a house first. The text answers the questions in the order they are asked: when, as a real range; what; where; and on the far edge, how much and who is paying, in tabular figures so a column of them adds up by eye.

• Three tabs instead of a toggle. Upcoming holds booked jobs, Awaiting a decision holds pending applications, Past holds completed and cancelled work. The page lands on whichever tab has something in it.
• A summary rail. Next up (the day, the time and the town), Booked (count and pay), Awaiting a decision (count and how long the oldest has waited), and Earned, which is the wallet's own ledger total so the two pages can never disagree. It sits beside the list from 1280px, runs four across from 1024px, and goes two by two on a phone.
• Countered prices shown as yours. An application where you named your own price shows that figure with "Your price · posted at $95" under it, and every waiting row says how long ago you applied.
• Past-due jobs stay visible. A booked job whose date has passed stays under Upcoming, marked "Not marked complete yet", rather than vanishing.
• One button, in the header. "Find opportunities" for agents, "Find work" for vendors. Nothing on the page uses the accent: there is no primary action here, only jobs to open.
• States that were designed. Loading is a skeleton in the shape of the layout, errors are a composed card, and each tab has its own empty state with one outline button.
• The house is the card's edge. The agent's first picture of the property fills the card's left edge with no frame, because a column of houses is recognised faster than a column of addresses. A listing with no photos gets a plain tile with a house mark, not a generated picture dressed up as the listing. On hover the photo eases in by a few percent; nothing else moves.
• The time is a range. "10:00 – 11:00 am" rather than "10:00 am, 60 min", because the gap to the next job is what an agent plans around. It leads the card's text with the kind of work as a small tag beside it.
• A calendar rail. The day's name over a large date numeral, once per day. Today's numeral is the one thing on the page in the accent.
• The rail and the first card share a top edge. The tab strip sits in its own row above the list, so the two dominant surfaces on the page start on the same line rather than the rail lining up with the tabs.
• Who is paying sits with the pay. The brokerage or agent that posted the job is under the figure on the card's far edge, and on a waiting application the line under that says how long ago you applied.
• Times read as times. "13:00" from the database is "1:00 pm" on the page, held together with a no-break space so "pm" never wraps alone.

The dialogs

A row opens the right dialog for what it is. A booked or finished job opens the appointment dialog, rebuilt here in the same order the board's dialog reads. A pending application opens the board's dialog in a new applied state.

• The invented notes are gone. The old dialog ended with "Important notes": bring ID and any relevant documents, payment will be processed after completion. Nobody had written them and they read as the agent's instructions. Only what the record holds is shown now.
• Photos only when there are photos. The old header image fell back to a generated blob. The dialog now shows the agent's pictures or nothing.
• Contact details are links. The phone number dials and the email opens a draft. When neither is on file the dialog says so instead of printing "Not provided" twice.
• Past-due wording. A booked job whose date has passed says the agent hasn't marked it complete yet, which is the only true thing to say.
• Shared strip. The "Pay / When / Duration / Client" strip is one component now, used by both dialogs, so the two can't drift.
• The dashboard and calendar got it too. They open the same appointment dialog, so their booked-job view changed with this one.

Calls worth knowing about

• Every page was overflowing on tablets. Probing the layout viewport at 768px and 1024px showed a 1181px document on every page, not just this one: the sidebar's main pane had flex-1 with no min-w-0, so it could never shrink below the header's natural width. One class in App.tsx and DemoApp.tsx fixed the whole app.
• Breakpoints follow the column, not the window. With the sidebar open, a 1024px window is a 768px column and a 768px window is 512px. The rail goes beside the list only from 1280px, and the day rail beside its group only from 1024px, which is why nothing is cramped at either size.
• Clock formatting lives in the adapter. formatClock turns "13:00" or "13:00:00" into "1:00 pm" and hands anything that isn't a clock back untouched; formatClockRange adds the duration to make "10:00 – 11:00 am", collapsing the meridiem when both ends share it. The board's cards and dialog, the calendar rows and the dashboard widget all pick it up through the same functions.
• A zero duration is "not set". The appointment card now treats it the way the board already did; quote-first work is posted without one.
• Earned matches the wallet. It sums the same earning transactions the wallet's "Total earnings" sums. Booked pay uses the listing's posted price, which is what every other surface shows today; see the note under What's next.
• Nothing is memoised. The page sorts a dozen rows per render. That is cheaper than the bookkeeping, and it removed two lint warnings.
• Copy went through the humanizer before it shipped, and every heading is sentence case.

How it was verified

• Types, lint, build. tsc --noEmit clean, eslint with no errors on every changed file, production build passing.
• A real browser, both themes, five widths. Headless Chrome driven over the DevTools protocol against /demo at 390, 768, 1024, 1280 and 1440px, light and dark. At every width the document's scroll width equals the viewport, which is the check that caught the shell overflow.
• Real interactions. Row hover, a booked row opening the appointment dialog, a waiting row opening the applied dialog, Escape closing them, and every tab switch. On the phone viewport the same things were done with touch events, because mouse events don't register there.
• Both account types. The demo's account switcher was used to view the page as a listing photographer with nothing booked, which is how the empty states and the vendor wording were checked.
• Demo isolation. The changed files import nothing from Supabase; the page reads through the same hooks as before, which route to the in-memory store under /demo.

What's next

• Shipped. Committed to main as 439016b through 94475cd, pushed to the GitHub backup, and deployed to tour-dash.pages.dev on 2026-09-04.
• Pay on a booked job should be the price that was agreed. When an applicant named their own price, the appointment still shows the posted price because the appointments hook doesn't join the approved application. Joining it would make Booked pay exact.
• Nobody can mark a job complete in the app. Completed and cancelled only arrive from outside. A "Mark complete" for the poster on My listings would make the Past tab and the wallet honest without waiting on a webhook.
• Port the row to the dashboard and the calendar. Both still use the old image-led card with an amber status badge on every row. The agenda row is a drop-in.
• Sidebar and dashboard labels. The sidebar says "My Opportunities" and "Find Work", and the dashboard tiles use uppercase labels; the convention is sentence case.