letsbe/pn-new-crm
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

fix(ux): batch UX audit fixes across spine pages

Browse Source 
Comprehensive audit findings rolled up into one pass.

Bugs:

  - dialog.tsx — sm-breakpoint centering classes (sm:left-[50%] /
    sm:top-[50%]) were being silently stripped by tailwind-merge because
    the base inset-0 + sm:inset-auto pair counted as a conflict. Replaced
    with explicit per-side utilities (top-0 right-0 bottom-0 left-0 +
    sm:right-auto sm:bottom-auto). Every Dialog instance now centers
    correctly on desktop. (Affected 16 dialog consumers.)

  - interest-documents-tab.tsx — useQuery shared the queryKey
    ['interests', interestId] with the parent InterestDetail's query but
    returned a different shape ({ data: ... } envelope vs unwrapped).
    They clobbered each other's cache on tab mount, degenerating the
    parent header to "Unknown Client" / "Open" briefly. Unified the
    queryFn shape so the cache stays consistent.

  - interest-tabs.tsx — milestone steps now derive done-state from
    PIPELINE_STAGES.indexOf(currentStage) >= step.advanceStage_idx as
    well as from the date stamp. Stage truth > date truth. Seeded /
    imported interests that arrived past `open` without per-step dates
    now correctly show their milestone steps as checked.

  - interest-detail.tsx — wires useMobileChrome so the mobile topbar
    shows the client name instead of the interest UUID.

  - interest-documents-tab.tsx — empty state restructured to a centered
    "No documents yet — Generate EOI" CTA card instead of a small
    primary button floating in the corner.

  - timeline/route.ts — synthesizes a "Created at <stage>" event when
    no audit-log rows exist for the interest, so the Activity tab
    isn't empty for seeded interests.

  - lead-source-chart.tsx — pie radii switched from fixed 90px/50px
    to "70%"/"40%" so the pie scales with the container instead of
    being clipped at narrow widths; reserved 40px for the legend.

Visual / clarity:

  - interest-detail-header.tsx — Won/Lost rendered as branded text
    buttons on desktop ("Mark won", "Close as lost") and icon-only on
    mobile via `hidden sm:inline`. Edit/Archive stay icon-only. Reopen
    promoted to a labeled button when the interest is closed. Added
    "Last contact Xd ago" to the meta row.

  - detail-header-strip.tsx — py-4 → py-3 (tighter strip).

  - interest-tabs.tsx — milestone cards: the next pending milestone
    gets a brand-blue ring + "NEXT" pill so the user can see at a
    glance which lifecycle to act on. Its primary action gets the
    filled button variant.

  - interest-tabs.tsx — Deposit milestone: invoice flow promoted to
    primary CTA ("Create deposit invoice"), manual stage advance
    demoted to a small text link ("Mark received manually"). Reflects
    the actual recommended path now that recordPayment auto-advances
    on payment.

  - inline-editable-field.tsx — pencil affordance shown faintly
    (opacity-20) at rest so users discover that fields are editable
    without having to hover-test every label. Lifts to opacity-60 on
    hover.

  - constants.ts — STAGE_SHORT_LABELS map for cramped contexts;
    pipeline-chart.tsx + pipeline-funnel-chart.tsx use them on mobile
    via useIsMobile, so the rotated 9-stage axis isn't a wall of
    overlap on a 393px screen.

  - client-pipeline-summary.tsx — StageStepper rebuilt as a single
    segmented progress bar instead of 9 micro-dots + connectors that
    rendered inconsistently at tight widths. Each stage is an equal
    slice that lights up as the interest reaches it; tooltips on hover
    give the full stage name. Also dropped a pre-existing dead `br`
    variable.

  - dashboard empty states — Lead Source, Revenue Breakdown, Pipeline
    Funnel, and Recent Activity now have helpful descriptions explaining
    what populates them, instead of bare "No interests in range".

  - use-paginated-query.ts — reuses `&` when the endpoint already has
    `?`, so callers like the documents hub don't generate
    `…?tab=eoi_queue&signatureOnly=true?page=1&limit=25` (which the API
    rejected as 400). Caught while testing the now-removed EOI route
    but applies broadly.

tsc clean. vitest 832/832 pass. eslint 0 errors (down from 1
pre-existing) on every file touched.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Matt Ciaccio
2026-05-02 01:24:15 +02:00
parent 868b1f40c0
commit 76a7387dcc
16 changed files with 568 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
src/components/interests/interest-detail-header.tsx
View File

@@ -47,10 +47,20 @@ interface InterestDetailHeaderProps {
archivedAt: string | null;
outcome?: string | null;
outcomeReason?: string | null;
dateLastContact?: string | null;
tags?: Array<{ id: string; name: string; color: string }>;
};
}
function formatLastContactAge(iso: string): string {
const days = Math.floor((Date.now() - new Date(iso).getTime()) / 86_400_000);
if (days <= 0) return 'today';
if (days === 1) return 'yesterday';
if (days < 30) return `${days}d ago`;
if (days < 365) return `${Math.floor(days / 30)}mo ago`;
return `${Math.floor(days / 365)}y ago`;
}
export function InterestDetailHeader({ portSlug, interest }: InterestDetailHeaderProps) {
const queryClient = useQueryClient();
const [editOpen, setEditOpen] = useState(false);
@@ -114,6 +124,16 @@ export function InterestDetailHeader({ portSlug, interest }: InterestDetailHeade
node: <span className="capitalize">{interest.source}</span>,
});
}
if (interest.dateLastContact) {
meta.push({
key: 'last',
node: (
<span className="text-foreground/70">
Last contact {formatLastContactAge(interest.dateLastContact)}
</span>
),
});
}
return (
<>
@@ -182,23 +202,24 @@ export function InterestDetailHeader({ portSlug, interest }: InterestDetailHeade
)}
</div>
{/* Top-right icon-only actions — no stacking, no labels eating room. */}
<div className="flex shrink-0 items-center gap-0.5">
{/* Top-right actions. Won/Lost are sales-critical and read as text
buttons on desktop; Edit/Archive stay icon-only. On mobile,
Won/Lost shrink to icon buttons to keep the cluster from
wrapping. */}
<div className="flex shrink-0 items-center gap-1">
<PermissionGate resource="interests" action="change_stage">
{isClosed ? (
<button
type="button"
onClick={() => reopenMutation.mutate()}
disabled={reopenMutation.isPending}
aria-label="Reopen interest"
title="Reopen interest"
className={cn(
'rounded-md p-1.5 text-muted-foreground/70 transition-colors',
'hover:bg-foreground/5 hover:text-foreground',
'disabled:opacity-50',
'inline-flex items-center gap-1.5 rounded-md border border-border px-2.5 py-1 text-xs font-medium text-foreground transition-colors',
'hover:bg-foreground/5 disabled:opacity-50',
)}
>
<RefreshCcw className="size-4" />
<RefreshCcw className="size-3.5" />
Reopen
</button>
) : (
<>
@@ -206,25 +227,27 @@ export function InterestDetailHeader({ portSlug, interest }: InterestDetailHeade
type="button"
onClick={() => setOutcomeDialog('won')}
aria-label="Mark as won"
title="Mark as won"
className={cn(
'rounded-md p-1.5 text-muted-foreground/70 transition-colors',
'hover:bg-emerald-50 hover:text-emerald-700',
'inline-flex items-center gap-1.5 rounded-md px-2.5 py-1 text-xs font-medium transition-colors',
'border border-emerald-200 bg-emerald-50 text-emerald-700',
'hover:bg-emerald-100',
)}
>
<Trophy className="size-4" />
<Trophy className="size-3.5" />
<span className="hidden sm:inline">Mark won</span>
</button>
<button
type="button"
onClick={() => setOutcomeDialog('lost')}
aria-label="Close as lost"
title="Close as lost"
className={cn(
'rounded-md p-1.5 text-muted-foreground/70 transition-colors',
'hover:bg-rose-50 hover:text-rose-700',
'inline-flex items-center gap-1.5 rounded-md px-2.5 py-1 text-xs font-medium transition-colors',
'border border-rose-200 text-rose-700',
'hover:bg-rose-50',
)}
>
<XCircle className="size-4" />
<XCircle className="size-3.5" />
<span className="hidden sm:inline">Close as lost</span>
</button>
</>
)}

23
src/components/interests/interest-detail.tsx
View File

@@ -1,11 +1,13 @@
'use client';
import { useEffect } from 'react';
import { useQuery } from '@tanstack/react-query';
import { useParams } from 'next/navigation';
import { DetailLayout } from '@/components/shared/detail-layout';
import { InterestDetailHeader } from '@/components/interests/interest-detail-header';
import { getInterestTabs } from '@/components/interests/interest-tabs';
import { useMobileChrome } from '@/components/layout/mobile/mobile-layout-provider';
import { useRealtimeInvalidation } from '@/hooks/use-realtime-invalidation';
import { apiFetch } from '@/lib/api/client';
@@ -52,9 +54,7 @@ export function InterestDetail({ interestId, currentUserId }: InterestDetailProp
const { data, isLoading } = useQuery<InterestData>({
queryKey: ['interests', interestId],
queryFn: () =>
apiFetch<{ data: InterestData }>(`/api/v1/interests/${interestId}`).then(
(r) => r.data,
),
apiFetch<{ data: InterestData }>(`/api/v1/interests/${interestId}`).then((r) => r.data),
});
useRealtimeInvalidation({
@@ -65,17 +65,18 @@ export function InterestDetail({ interestId, currentUserId }: InterestDetailProp
'interest:berthUnlinked': [['interests', interestId]],
});
const tabs = data
? getInterestTabs({ interestId, currentUserId, interest: data })
: [];
const { setChrome } = useMobileChrome();
const titleForChrome: string | null = data?.clientName ?? null;
useEffect(() => {
setChrome({ title: titleForChrome, showBackButton: true });
return () => setChrome({ title: null, showBackButton: false });
}, [titleForChrome, setChrome]);
const tabs = data ? getInterestTabs({ interestId, currentUserId, interest: data }) : [];
return (
<DetailLayout
header={
data ? (
<InterestDetailHeader portSlug={portSlug} interest={data} />
) : null
}
header={data ? <InterestDetailHeader portSlug={portSlug} interest={data} /> : null}
tabs={tabs}
defaultTab="overview"
isLoading={isLoading}

33
src/components/interests/interest-documents-tab.tsx
View File

@@ -2,6 +2,7 @@
import { useState } from 'react';
import { useQuery } from '@tanstack/react-query';
import { FileSignature } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { DocumentList } from '@/components/documents/document-list';
@@ -22,13 +23,15 @@ interface InterestData {
export function InterestDocumentsTab({ interestId }: InterestDocumentsTabProps) {
const [eoiDialogOpen, setEoiDialogOpen] = useState(false);
const { data: interestRes } = useQuery({
// Same query key + queryFn shape as InterestDetail's parent query, so the
// cache is consistent. (Mismatched shapes on the same key clobber each other
// and the parent header degenerates to "Unknown Client".)
const { data: interest } = useQuery<InterestData>({
queryKey: ['interests', interestId],
queryFn: () => apiFetch<{ data: InterestData }>(`/api/v1/interests/${interestId}`),
queryFn: () =>
apiFetch<{ data: InterestData }>(`/api/v1/interests/${interestId}`).then((r) => r.data),
});
const interest = interestRes?.data;
const prerequisites = {
hasName: Boolean(interest?.clientName),
hasYacht: Boolean(interest?.yachtId),
@@ -39,12 +42,30 @@ export function InterestDocumentsTab({ interestId }: InterestDocumentsTabProps)
<div className="space-y-4">
<div className="flex items-center justify-between">
<h3 className="text-sm font-medium text-muted-foreground">Documents</h3>
<Button size="sm" onClick={() => setEoiDialogOpen(true)}>
<Button size="sm" variant="outline" onClick={() => setEoiDialogOpen(true)}>
Generate EOI
</Button>
</div>
<DocumentList interestId={interestId} />
<DocumentList
interestId={interestId}
emptyState={
<div className="flex flex-col items-center gap-3 rounded-lg border border-dashed border-border bg-muted/20 px-6 py-10 text-center">
<div className="flex size-10 items-center justify-center rounded-full bg-background text-muted-foreground">
<FileSignature className="size-5" />
</div>
<div className="space-y-1">
<p className="text-sm font-medium text-foreground">No documents yet</p>
<p className="text-xs text-muted-foreground">
Generate the EOI to send it for signing in one click.
</p>
</div>
<Button size="sm" onClick={() => setEoiDialogOpen(true)}>
Generate EOI
</Button>
</div>
}
/>
<EoiGenerateDialog
interestId={interestId}

102
src/components/interests/interest-tabs.tsx
View File

@@ -15,7 +15,7 @@ import { RecommendationList } from '@/components/interests/recommendation-list';
import { InterestTimeline } from '@/components/interests/interest-timeline';
import { InterestDocumentsTab } from '@/components/interests/interest-documents-tab';
import { InterestFilesTab } from '@/components/interests/interest-files-tab';
import { LEAD_CATEGORIES } from '@/lib/constants';
import { LEAD_CATEGORIES, PIPELINE_STAGES, type PipelineStage } from '@/lib/constants';
import { apiFetch } from '@/lib/api/client';
import { cn } from '@/lib/utils';
@@ -30,6 +30,7 @@ interface InterestTabsOptions {
interestId: string;
currentUserId?: string;
interest: {
pipelineStage: string;
leadCategory: string | null;
source: string | null;
eoiStatus: string | null;
@@ -120,10 +121,23 @@ interface MilestoneSectionProps {
advanceStage?: string;
/** Optional override for the action label. */
actionLabel?: string;
/** Suppress the inline "Mark as…" button for this step. Use when the
* parent supplies a richer CTA via `footer` (e.g. Deposit, where we
* want the invoice flow to be the primary path). */
hideAutoButton?: boolean;
}>;
status: string | null;
onAdvance: (stage: string) => void;
isPending: boolean;
/** Current pipelineStage. Used to mark steps as done when the pipeline has
* moved past their advanceStage even if the date stamp is missing — e.g.
* a seed-data interest that started already at eoi_signed will show both
* EOI sub-steps as done. Stage truth > date truth. */
currentStage: string;
/** When true, this milestone is the next one the user should act on:
* card gets a brand-accent ring and the next-step CTA becomes a primary
* button. Computed by the parent based on currentStage. */
isActive?: boolean;
/** Extra nodes (e.g. "Create deposit invoice" link) rendered below the steps. */
footer?: React.ReactNode;
}
@@ -143,16 +157,40 @@ function MilestoneSection({
status,
onAdvance,
isPending,
currentStage,
isActive,
footer,
}: MilestoneSectionProps) {
const firstUnsetIdx = steps.findIndex((s) => !s.date);
const currentStageIdx = PIPELINE_STAGES.indexOf(currentStage as PipelineStage);
// A step counts as done if either:
// (a) its `advanceStage` is at or behind the current pipeline stage, OR
// (b) it has an explicit date stamp (from a manual mark or webhook).
// (a) handles seeded/imported interests that arrived at a later stage
// without per-step dates.
const doneFlags = steps.map((step) => {
if (step.date) return true;
if (!step.advanceStage) return false;
const stepIdx = PIPELINE_STAGES.indexOf(step.advanceStage as PipelineStage);
return stepIdx !== -1 && currentStageIdx !== -1 && currentStageIdx >= stepIdx;
});
const firstUnsetIdx = doneFlags.findIndex((d) => !d);
return (
<section className="rounded-xl border border-border bg-card p-4 shadow-sm">
<section
className={cn(
'rounded-xl border bg-card p-4 shadow-sm transition-colors',
isActive ? 'border-brand-300 bg-brand-50/40 ring-1 ring-brand-200' : 'border-border',
)}
>
<header className="mb-3 flex items-center justify-between gap-2">
<div className="flex items-center gap-2">
<Icon className="size-4 text-muted-foreground" />
<Icon className={cn('size-4', isActive ? 'text-brand-600' : 'text-muted-foreground')} />
<h3 className="text-sm font-semibold tracking-tight text-foreground">{title}</h3>
{isActive ? (
<span className="rounded-full bg-brand-100 px-1.5 py-0.5 text-[10px] font-semibold uppercase tracking-wide text-brand-700">
Next
</span>
) : null}
</div>
{status ? (
<span className="rounded-full bg-muted px-2 py-0.5 text-[10px] font-medium uppercase tracking-wide text-muted-foreground">
@@ -163,7 +201,7 @@ function MilestoneSection({
<ol className="space-y-2">
{steps.map((step, i) => {
const done = !!step.date;
const done = doneFlags[i] ?? false;
const isNext = !done && i === firstUnsetIdx;
return (
<li key={step.label} className="flex items-start gap-2 text-sm">
@@ -197,10 +235,10 @@ function MilestoneSection({
</span>
) : null}
</div>
{isNext && step.advanceStage ? (
{isNext && step.advanceStage && !step.hideAutoButton ? (
<Button
type="button"
variant="outline"
variant={isActive ? 'default' : 'outline'}
size="sm"
disabled={isPending}
onClick={() => onAdvance(step.advanceStage!)}
@@ -236,6 +274,23 @@ function OverviewTab({
const advance = (stage: string) =>
stageMutation.mutate({ stage, reason: 'Marked from overview' });
// Which milestone is the next one to act on? "EOI Signed" → Deposit is next;
// "Deposit 10%" → Contract is next; "Contract Signed" / "Completed" → none.
const stageIdx = PIPELINE_STAGES.indexOf(interest.pipelineStage as PipelineStage);
const eoiSignedIdx = PIPELINE_STAGES.indexOf('eoi_signed');
const depositIdx = PIPELINE_STAGES.indexOf('deposit_10pct');
const contractSignedIdx = PIPELINE_STAGES.indexOf('contract_signed');
let activeMilestone: 'eoi' | 'deposit' | 'contract' | null = null;
if (stageIdx === -1 || stageIdx >= contractSignedIdx) {
activeMilestone = null;
} else if (stageIdx < eoiSignedIdx) {
activeMilestone = 'eoi';
} else if (stageIdx < depositIdx) {
activeMilestone = 'deposit';
} else {
activeMilestone = 'contract';
}
return (
<div className="space-y-6">
{/* Sales-process milestones — the heart of the system. Each section is a
@@ -250,6 +305,8 @@ function OverviewTab({
status={interest.eoiStatus}
isPending={stageMutation.isPending}
onAdvance={advance}
currentStage={interest.pipelineStage}
isActive={activeMilestone === 'eoi'}
steps={[
{
label: 'EOI sent',
@@ -271,23 +328,36 @@ function OverviewTab({
status={interest.depositStatus}
isPending={stageMutation.isPending}
onAdvance={advance}
currentStage={interest.pipelineStage}
isActive={activeMilestone === 'deposit'}
steps={[
{
label: 'Deposit received',
date: interest.dateDepositReceived,
advanceStage: 'deposit_10pct',
actionLabel: 'Mark deposit received',
// The richer invoice-first CTA lives in `footer`. We still pass
// advanceStage so the milestone derives its done-state correctly.
hideAutoButton: true,
},
]}
footer={
!interest.dateDepositReceived ? (
<Link
href={`/${portSlug}/invoices/new?interestId=${interestId}&kind=deposit`}
className="inline-flex items-center gap-1.5 text-foreground/80 hover:text-foreground"
>
<Plus className="size-3.5" />
Create deposit invoice
</Link>
<div className="flex flex-wrap items-center gap-x-3 gap-y-1.5">
<Button asChild size="sm" className="h-7 px-2.5 text-xs">
<Link href={`/${portSlug}/invoices/new?interestId=${interestId}&kind=deposit`}>
<Plus className="size-3.5" />
Create deposit invoice
</Link>
</Button>
<button
type="button"
onClick={() => advance('deposit_10pct')}
disabled={stageMutation.isPending}
className="text-muted-foreground hover:text-foreground disabled:opacity-50"
>
Mark received manually
</button>
</div>
) : null
}
/>
@@ -297,6 +367,8 @@ function OverviewTab({
status={interest.contractStatus}
isPending={stageMutation.isPending}
onAdvance={advance}
currentStage={interest.pipelineStage}
isActive={activeMilestone === 'contract'}
steps={[
{
label: 'Contract sent',