jobs.my_jobs

My Jobs

The client's view of their own posted jobs — every job they've published, organized by status. Each card surfaces what the client needs to act on: new bids, deadline, top bid amount. The previous design treated every job as a media-first card with a large empty thumbnail; this redesign drops the dead media block and uses an info-dense 3-stat panel instead.

P0 Client + Company src/screens/jobs/MyJobsScreen.tsx Redesigned
Light · Soft Pro paper
9:41

My jobs

Loodgieter AWAITING YOU
Boiler defect — geen warm water
Utrecht Oost 3511AB posted 2d
Schilder OPEN
Paint living room and hallway
Rotterdam Centrum 3011EA posted 4d
Bids
3 2 new
Deadline
Flexible
Richtprijs
€300–500
Elektricien OPEN
Spoed: stoppenkast vervangen
Amsterdam Zuid 1071DK posted 6h
Bids
8
Deadline
42m left
Richtprijs
€180fixed
Timmerman DRAFT
Install new kitchen worktop
Den Haag 2511BV saved 1d
Dark · midnight ink
9:41

My jobs

Loodgieter AWAITING YOU
Boiler defect — geen warm water
Utrecht Oost 3511AB posted 2d
Schilder OPEN
Paint living room and hallway
Rotterdam Centrum 3011EA posted 4d
Bids
3 2 new
Deadline
Flexible
Richtprijs
€300–500
Elektricien OPEN
Spoed: stoppenkast vervangen
Amsterdam Zuid 1071DK posted 6h
Bids
8
Deadline
42m left
Richtprijs
€180fixed
Timmerman DRAFT
Install new kitchen worktop
Den Haag 2511BV saved 1d

Redesign rationale

Before

  • Every card had a huge empty media block (~50% of card height wasted on warm-grey nothing).
  • Carousel dots floated on empty placeholders — implying media that wasn't there.
  • Generic Klus pill on the media — same on every card, communicated nothing.
  • Footer triplet (Richtprijs · Deadline · Bids) used label-above-value, no visual weight on the action-critical fields.
  • No surfacing of new bids — the client had to open each job to see if anything had happened.
  • No state for jobs awaiting the client's decision — the most important state is invisible.
  • FAB overlapped the second card, blocking content.

After

  • No media slot. Jobs in the client's My Jobs view don't need to advertise themselves; they need to surface activity.
  • SectorPill takes the top-left slot, communicating the trade at a glance using the same component the provider feed uses.
  • StatusPill at the top-right is the visual anchor: AWAITING YOU (accent) · OPEN (success) · DRAFT (muted).
  • Three-stat panel (Bids · Deadline · Richtprijs) puts the action-critical fields on equal footing with tabular-number values for fast scanning.
  • 2 new chartreuse flag on the Bids cell — the single most valuable signal for a client returning to the app.
  • Awaiting-decision state replaces the stat panel with a full-width Review N bids · top €X CTA — one tap from notification to action.
  • Draft cards are dashed-border + muted, with a "Finish posting" CTA. Visually distinct from live jobs.
  • FAB sits 88px above the bottom edge so it stops overlapping cards.
  • New filter chip: Awaiting you 1 styled with chartreuse — pulls the eye to the queue that needs attention.

Tokens used

  • Surface: surface.primary (card bg), surface.secondary (3-stat panel, draft card), surface.bg (screen)
  • Text: text.primary (title, values), text.secondary (meta line), text.muted (stat labels, sep dots)
  • Brand: brand.accent + brand.accent-soft (Awaiting state, new-bid flag, FAB), brand.primary (active filter chip, Review-bids CTA)
  • Feedback: success (OPEN status, flexible deadline), error (urgent deadline — Card 3)
  • Radius: cornerRadius.card (16) on cards, cornerRadius.chip (pill) on chips/pills, radius.md (12) on stat panel + CTAs
  • Spacing: 4 px grid throughout — inset.card (16) per card, gap.snug (8) between chips, space.md (12) between cards
  • Shadow: elevation.resting (shadow.xs at rest, shadow.sm on hover)

New component to add to the library

  • MyJobCard — sibling to JobCard in the signature components section. Same data shape minus media/voice/urgency-timer, plus status and newBidCount fields. The provider feed uses JobCard; the client management view uses MyJobCard.
feed.job_feed

Job Feed

Provider's browse view. Hero of the discovery flow — uses the existing JobCard signature component (media-first, urgency timer, sector pill, bid count).

P0 Provider src/screens/feed/JobFeedScreen.tsx

Not yet designed

This screen is in the inventory but hasn't been mocked up yet. The pattern from jobs.my_jobs above should be applied as each screen is tackled.