admin/linkder
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

M2: the full job lifecycle — chat, hiring, geocoding, quotes, bookings, reviews

Browse Source 
Closes the funnel. Before this the product could match two people and then
stopped: `quotes`, `bookings` and `reviews` had tables and state machines and
nothing that wrote a row, the entry deck's right swipe was wired to an empty
handler, and every address resolved to the city centre.

Jobs tab and chat
- message router: thread, send, markRead, unreadTotal. A thread is a MATCH, not
  a job — one job with three interested pros is three private conversations.
- Current/Past segments derived from ACTIVE_JOB_STATUSES, job detail listing the
  pros who accepted, and the conversation itself with attachments.

Hiring from the deck
- A right swipe on the entry deck opened nothing. It now resolves "which job?"
  through a sheet — sign in, pick an open job, or post one — and calls the same
  deck.swipe the per-job deck does, so the open-request cap and row lock apply
  exactly once. Swipes are vetoable so closing the sheet returns the card.

Geocoding
- ST_Distance and ST_DWithin rank and filter every deck, and both operands were
  placeholders. Addresses now resolve through Mapbox (permanent=true, which is
  what licenses storing the coordinates), the server resolves points rather than
  trusting client-supplied lat/lng, and every stored point records how it was
  obtained. A `city`-precision base cannot reach the verification queue.

Quote -> booking -> review
- The commercial chain, minus payments. Accepting a quote is the only place a
  booking is created; confirming completion is what unlocks reviews and moves
  the pro's completed_jobs.
- Reviews publish double-blind with no sweeper: each is written with
  published_at already set to its embargo deadline and every read filters
  published_at <= now(), so it publishes itself. The second review pulls both
  forward. A silent counterparty cannot bury a bad review by never replying.

State machine changes, both deliberate
- booked -> matched: a cancelled booking is not a cancelled job.
- scheduled -> awaiting_confirmation: in_progress is optional, so a pro who
  never tapped Start can still say the work is done.

Test suite
- api tests ran files in parallel against one database and failed roughly one
  run in three on whichever file lost the race. Serialised, and three fixtures
  that grabbed "the first client" pinned to the seeded accounts.

Also includes work from a parallel session: admin verification queue, pro
public profile and reviews read path, notification sending, denormalised stats
recompute, search, and observability.

318 tests passing; typecheck and lint clean across 7 packages.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
serfa
2026-08-21 06:29:59 -04:00
co-authored by Claude Opus 5
parent 8f3509d1dd
commit 974e312534
115 changed files with 19994 additions and 569 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/components/pro/pro-profile-panel.tsx
+216
View File
@@ -0,0 +1,216 @@
'use client';
import { ChevronLeft, MapPin, ShieldCheck, Star } from 'lucide-react';
import type { DeckCard } from '@linkder/db';
import { api } from '@/lib/trpc';
import { Button, EmptyState, ScrollStrip, Tag } from '@/components/ui';
import { ReviewList } from './review-list';
import { formatDistance, formatResponseTime } from '@/lib/utils';
/**
* One pro, in full — what a search result opens onto.
*
* A result row is a scanning surface: a name, a rating and two lines of figures,
* which is enough to choose between twenty people and not enough to choose one.
* This is the other half of that decision — their trades, what they say they
* specialise in, their work, and what customers wrote afterwards.
*
* It renders immediately from the row that was tapped rather than showing a
* spinner over data the user is already looking at; `pro.publicProfile` then
* fills in the parts a row does not carry (every photo, the full bio) and is the
* authority once it lands. That query also re-checks eligibility, so a pro who
* went on holiday between the search and the tap resolves to a dead end here
* instead of to a hire button that would fail on send.
*/
export function ProProfilePanel({
pro,
onBack,
onHire,
}: {
/** The row that was tapped. Paints the screen before the query resolves. */
pro: DeckCard;
onBack: () => void;
/** Hands the pro up to the one SendJobSheet that lives at the phone root. */
onHire: (pro: DeckCard) => void;
}) {
const profile = api.pro.publicProfile.useQuery(
{ proId: pro.proId },
{ staleTime: 60_000, retry: false },
);
const p = profile.data;
const name = pro.name ?? p?.name ?? 'This pro';
// Row first, query second: both describe the same pro, and the row is already
// on screen. `media` is the one field a DeckCard flattens, so prefer it once
// it arrives — a profile is where the rest of someone's photos belong.
const photos = p?.media.length ? p.media.map((m) => m.url) : pro.photos;
const categories = p?.categories ?? pro.categories;
const skills = p?.skills ?? pro.skills;
const bio = p?.bio ?? pro.bio;
const ratingCount = p?.ratingCount ?? pro.ratingCount;
const ratingAvg = p?.ratingAvg ?? pro.ratingAvg;
const completedJobs = p?.completedJobs ?? pro.completedJobs;
const responseTime = formatResponseTime(p?.avgResponseMinutes ?? pro.avgResponseMinutes);
return (
<div className="flex min-h-0 flex-1 flex-col overflow-hidden">
<div className="min-h-0 flex-1 overflow-y-auto px-4 pb-4 pt-[3.25rem]">
<button
type="button"
onClick={onBack}
className="-ml-2 mb-2 flex h-11 items-center gap-1 self-start rounded-pill pl-1 pr-3 text-body-sm text-accent"
>
<ChevronLeft className="h-5 w-5" aria-hidden />
Search
</button>
{/* A 404 here means the pro stopped being bookable since the search ran.
Saying so beats a hire button that throws on the way out. */}
{profile.error ? (
<EmptyState
title={`${name} is not available`}
body="They may have paused new work or left the platform. The rest of your search results are still there."
action={
<Button variant="ghost" size="md" onClick={onBack}>
Back to search
</Button>
}
/>
) : (
<>
{photos[0] && (
// eslint-disable-next-line @next/next/no-img-element -- remote pro media, no loader configured
<img
src={photos[0]}
alt=""
className="mb-4 h-52 w-full rounded-card object-cover"
/>
)}
<h1 className="text-h2">{name}</h1>
<p className="mt-1 text-body-sm text-muted">{p?.headline ?? pro.headline}</p>
<div className="mt-3 flex flex-wrap items-center gap-x-3 gap-y-1 text-meta text-faint tabular-nums">
{ratingCount > 0 ? (
<span className="flex items-center gap-1 text-muted">
<Star className="h-3.5 w-3.5 fill-current text-sun-500" aria-hidden />
{ratingAvg?.toFixed(1)}
<span className="text-faint">({ratingCount})</span>
</span>
) : (
// §8 — never "0.0 ★" for someone unrated; that reads as a bad score.
<span className="font-semibold text-accent">New</span>
)}
<span className="flex items-center gap-1">
<MapPin className="h-3.5 w-3.5" aria-hidden />
{formatDistance(pro.distanceM)}
</span>
<span>€{((p?.hourlyRateCents ?? pro.hourlyRateCents) / 100).toFixed(0)}/hr</span>
<span>{p?.yearsExperience ?? pro.yearsExperience} yrs experience</span>
{completedJobs > 0 && <span>{completedJobs} jobs done</span>}
</div>
{responseTime && <p className="mt-1 text-meta text-faint">{responseTime}</p>}
{/* The one claim this marketplace is actually selling. */}
<p className="mt-3 flex items-center gap-1.5 text-meta font-semibold text-go-700">
<ShieldCheck className="h-4 w-4" aria-hidden />
ID, licence and insurance checked
</p>
{categories.length > 0 && (
<Section title="Trades">
<div className="flex flex-wrap gap-2">
{categories.map((c) => (
<Tag key={c}>{c}</Tag>
))}
</div>
</Section>
)}
{skills.length > 0 && (
<Section title="Specialises in">
<div className="flex flex-wrap gap-2">
{skills.map((s) => (
<Tag key={s}>{s}</Tag>
))}
</div>
</Section>
)}
{bio && (
<Section title="About">
<p className="whitespace-pre-line text-body-sm text-strong">{bio}</p>
</Section>
)}
{photos.length > 1 && (
<Section title="Their work">
{/* Drag-scrollable: this app is a phone mock people use with a
mouse, and a row that will not move reads as broken. */}
<ScrollStrip className="-mx-4 gap-2 px-4">
{photos.slice(1).map((url) => (
// eslint-disable-next-line @next/next/no-img-element -- remote pro media, no loader configured
<img
key={url}
src={url}
alt=""
className="h-40 w-32 shrink-0 rounded-md object-cover"
loading="lazy"
draggable={false}
/>
))}
</ScrollStrip>
</Section>
)}
<Section
title="Reviews"
hint={
ratingCount > 0
? `Showing the most recent of ${ratingCount}.`
: undefined
}
>
<ReviewList proId={pro.proId} ratingCount={ratingCount} />
</Section>
</>
)}
</div>
{/*
The primary action stays in thumb reach rather than below a page of
reviews (§9). It opens the same SendJobSheet a right swipe opens — the
sheet owns signing in, picking a job and posting one, so there is exactly
one path from "I want this person" to a request.
*/}
{!profile.error && (
<div className="shrink-0 border-t border-hairline bg-page/95 px-4 pb-[calc(0.75rem+env(safe-area-inset-bottom))] pt-3 backdrop-blur-[12px]">
<Button size="lg" block onClick={() => onHire(pro)}>
Send {name} a job
</Button>
</div>
)}
</div>
);
}
/** A titled block. Local to this screen — `ui/page.tsx` Section has no top margin. */
function Section({
title,
hint,
children,
}: {
title: string;
hint?: string;
children: React.ReactNode;
}) {
return (
<section className="mt-7">
<h2 className="text-h4">{title}</h2>
{hint && <p className="mb-3 mt-1 text-meta text-faint">{hint}</p>}
<div className={hint ? undefined : 'mt-3'}>{children}</div>
</section>
);
}
apps/web/src/components/pro/review-list.tsx
+135
View File
@@ -0,0 +1,135 @@
'use client';
import { Star } from 'lucide-react';
import { api } from '@/lib/trpc';
import { Button, EmptyState } from '@/components/ui';
import { cn, formatRelativeTime } from '@/lib/utils';
/**
* Five stars, filled to the rating.
*
* The number goes in the accessible name rather than being inferred from a row
* of glyphs — §8, meaning is never carried by shape alone. The stars themselves
* are decorative once the label says "4 out of 5".
*/
function Stars({ rating, className }: { rating: number; className?: string }) {
return (
<span
className={cn('flex items-center gap-0.5 text-sun-500', className)}
role="img"
aria-label={`${rating} out of 5`}
>
{[1, 2, 3, 4, 5].map((n) => (
<Star
key={n}
className={cn('h-3.5 w-3.5', n <= rating ? 'fill-current' : 'text-faint')}
aria-hidden
/>
))}
</span>
);
}
/**
* What people wrote about this pro.
*
* A page, never the whole history: `ratingCount` in the header counts every
* rating this pro has ever had, and a profile with sixty of them would push the
* hire button somewhere nobody scrolls. The heading says which it is showing so
* the two numbers cannot be read as a contradiction.
*
* Only published reviews exist as far as this is concerned — `pro.reviews`
* enforces that server-side, because the publication gate is what stops a pro
* retaliating against a bad review before it is visible.
*/
export function ReviewList({ proId, ratingCount }: { proId: string; ratingCount: number }) {
const reviews = api.pro.reviews.useInfiniteQuery(
{ proId },
{ getNextPageParam: (last) => last.nextCursor, staleTime: 60_000, retry: false },
);
const rows = reviews.data?.pages.flatMap((page) => page.reviews) ?? [];
if (reviews.isLoading) {
return (
<div className="flex flex-col gap-3" aria-busy>
{/* §6.11 — three is enough to say "loading"; twenty is a lie about what
is coming. */}
{[0, 1, 2].map((n) => (
<div key={n} className="h-24 animate-pulse rounded-card bg-inset" />
))}
</div>
);
}
if (rows.length === 0) {
return (
<EmptyState
title="No written reviews yet"
body={
ratingCount > 0
? 'This pro has been rated, but nobody has left written feedback that is public yet.'
: 'Nobody has reviewed this pro yet. Reviews appear once a booking is finished.'
}
/>
);
}
return (
<div className="flex flex-col gap-3">
<ul className="flex flex-col gap-3">
{rows.map((review) => (
<li
key={review.id}
className="rounded-card border border-hairline bg-raised p-4"
>
<div className="flex items-center gap-3">
{review.authorImage ? (
// eslint-disable-next-line @next/next/no-img-element -- remote avatar, no loader configured
<img
src={review.authorImage}
alt=""
className="h-9 w-9 shrink-0 rounded-pill object-cover"
loading="lazy"
/>
) : (
<span
aria-hidden
className="flex h-9 w-9 shrink-0 items-center justify-center rounded-pill bg-inset font-display text-body-sm text-muted"
>
{review.authorName?.[0] ?? '?'}
</span>
)}
<span className="min-w-0 flex-1">
<span className="block truncate text-body-sm font-semibold text-strong">
{review.authorName ?? 'A customer'}
</span>
<span className="mt-0.5 flex items-center gap-2">
<Stars rating={review.rating} />
<span className="text-meta text-faint">
{formatRelativeTime(review.publishedAt)}
</span>
</span>
</span>
</div>
<p className="mt-3 text-body-sm text-strong">{review.body}</p>
</li>
))}
</ul>
{reviews.hasNextPage && (
<Button
variant="ghost"
size="md"
block
busy={reviews.isFetchingNextPage}
onClick={() => void reviews.fetchNextPage()}
>
Show more reviews
</Button>
)}
</div>
);
}