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

21
src/app/api/v1/interests/[id]/timeline/route.ts
View File

@@ -112,6 +112,27 @@ export const GET = withAuth(
});
const allEvents = [...auditEvents, ...docEvents];
// Fallback: when no audit-log entries exist for this interest (typical
// for seed/imported data inserted directly into the table without going
// through the service), synthesize a "Created at <stage>" event so the
// tab isn't empty when the interest is clearly past `open`.
const hasCreateAudit = allEvents.some((e) => e.action === 'create');
if (!hasCreateAudit) {
const stage = stageLabel(interest.pipelineStage);
const created = interest.createdAt ?? new Date();
allEvents.push({
id: `synth-${interest.id}-create`,
type: 'audit',
action: 'create',
description:
interest.pipelineStage === 'open' ? 'Interest created' : `Interest created at ${stage}`,
userId: null,
createdAt: created,
metadata: { synthetic: true },
});
}
allEvents.sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime());
return NextResponse.json({ data: allEvents.slice(0, 50) });

311
src/components/clients/client-pipeline-summary.tsx Normal file
View File

@@ -0,0 +1,311 @@
'use client';
import Link from 'next/link';
import { useParams, usePathname } from 'next/navigation';
import type { Route } from 'next';
import { useQuery } from '@tanstack/react-query';
import { ArrowRight, ChevronRight } from 'lucide-react';
import { formatDistanceToNowStrict } from 'date-fns';
import { apiFetch } from '@/lib/api/client';
import { Skeleton } from '@/components/ui/skeleton';
import { cn } from '@/lib/utils';
import {
PIPELINE_STAGES,
STAGE_BADGE,
STAGE_DOT,
STAGE_LABELS,
safeStage,
type PipelineStage,
} from '@/components/clients/pipeline-constants';
export interface ClientInterestRow {
id: string;
pipelineStage: string;
archivedAt: string | null;
updatedAt: string;
dateLastContact: string | null;
berthMooringNumber?: string | null;
yachtName?: string | null;
}
interface InterestsResponse {
data: ClientInterestRow[];
}
export function useClientInterests(clientId: string) {
return useQuery<InterestsResponse>({
queryKey: ['interests', { clientId }],
queryFn: () => apiFetch<InterestsResponse>(`/api/v1/interests?clientId=${clientId}&limit=50`),
});
}
export function StageStepper({
current,
size = 'sm',
}: {
current: PipelineStage;
size?: 'xs' | 'sm';
}) {
const idx = PIPELINE_STAGES.indexOf(current);
// Segmented progress bar: each stage is a slice of equal width that
// lights up once the interest has reached it. Reads at-a-glance, scales
// to any container width, and works with 9 stages without becoming
// micro-dots that vanish under cramped layouts.
const height = size === 'xs' ? 'h-1' : 'h-1.5';
return (
<div
className={cn('flex w-full overflow-hidden rounded-full bg-muted', height)}
role="progressbar"
aria-label="Pipeline progress"
aria-valuenow={idx + 1}
aria-valuemin={1}
aria-valuemax={PIPELINE_STAGES.length}
>
{PIPELINE_STAGES.map((stage, i) => {
const isReached = i <= idx;
const isCurrent = i === idx;
return (
<div
key={stage}
title={`${STAGE_LABELS[stage]}${isCurrent ? ' (current)' : ''}`}
className={cn(
'flex-1 transition-colors',
isReached ? STAGE_DOT[stage] : 'bg-transparent',
i > 0 ? 'border-l border-card' : '',
)}
/>
);
})}
</div>
);
}
function pickHighest(interests: ClientInterestRow[]): ClientInterestRow | null {
const active = interests.filter((i) => !i.archivedAt);
if (active.length === 0) return null;
return [...active].sort((a, b) => {
const ai = PIPELINE_STAGES.indexOf(safeStage(a.pipelineStage));
const bi = PIPELINE_STAGES.indexOf(safeStage(b.pipelineStage));
if (ai !== bi) return bi - ai;
return new Date(b.updatedAt).getTime() - new Date(a.updatedAt).getTime();
})[0]!;
}
function lastActivityLabel(interests: ClientInterestRow[]): string | null {
const candidates = interests
.flatMap((i) => [i.dateLastContact, i.updatedAt])
.filter((v): v is string => Boolean(v))
.map((v) => new Date(v).getTime())
.filter((t) => !Number.isNaN(t));
if (candidates.length === 0) return null;
const latest = new Date(Math.max(...candidates));
return `${formatDistanceToNowStrict(latest)} ago`;
}
interface PipelineSummaryProps {
clientId: string;
/**
* `hero` — single-line pulse for the detail header (highest active stage only).
* `panel` — compact list of every active interest, for the Overview tab.
*/
variant?: 'hero' | 'panel';
}
function HeroVariant({ clientId, portSlug }: { clientId: string; portSlug: string }) {
const pathname = usePathname();
const { data, isLoading } = useClientInterests(clientId);
const interests = data?.data ?? [];
const top = pickHighest(interests);
const activeCount = interests.filter((i) => !i.archivedAt).length;
const activity = lastActivityLabel(interests);
const interestsTabHref = `${pathname}?tab=interests` as Route;
if (isLoading) {
return (
<div className="space-y-2">
<Skeleton className="h-4 w-40" />
<Skeleton className="h-2 w-48" />
</div>
);
}
if (!top) {
return (
<div className="flex flex-wrap items-center justify-between gap-2">
<div>
<p className="text-sm font-medium text-foreground">No active interests</p>
<p className="text-xs text-muted-foreground">
Start one to begin tracking the sales process.
</p>
</div>
<Link
href={`/${portSlug}/interests/new` as Route}
className="inline-flex items-center gap-1 text-xs font-medium text-primary hover:underline"
>
Start interest <ArrowRight className="size-3" />
</Link>
</div>
);
}
const stage = safeStage(top.pipelineStage);
const berthLabel = top.berthMooringNumber
? `Berth ${top.berthMooringNumber}`
: 'General interest';
const detailsHref = `/${portSlug}/interests/${top.id}` as Route;
return (
<div className="space-y-2">
<div className="flex items-center gap-2 flex-wrap">
<span className="text-[10px] font-semibold uppercase tracking-wide text-muted-foreground">
Sales pipeline
</span>
{activeCount > 1 ? (
<span className="text-[10px] font-medium text-muted-foreground">
· {activeCount} active
</span>
) : null}
</div>
<Link
href={detailsHref}
className="group -m-1 block rounded-lg p-1 transition-colors hover:bg-foreground/5"
>
<div className="flex items-center gap-2 flex-wrap">
<span className="truncate text-sm font-semibold text-foreground">{berthLabel}</span>
<span
className={cn(
'shrink-0 rounded-full px-2 py-0.5 text-[11px] font-medium',
STAGE_BADGE[stage],
)}
>
{STAGE_LABELS[stage]}
</span>
<ChevronRight className="size-3.5 shrink-0 text-muted-foreground transition-transform group-hover:translate-x-0.5" />
</div>
<div className="mt-1.5">
<StageStepper current={stage} size="xs" />
</div>
</Link>
<div className="flex items-center justify-between gap-2 text-xs text-muted-foreground">
<span>{activity ? `Last activity ${activity}` : 'No activity recorded'}</span>
{activeCount > 1 ? (
<Link
href={interestsTabHref}
className="font-medium text-primary hover:underline"
scroll={false}
>
View all {activeCount}
</Link>
) : null}
</div>
</div>
);
}
function PanelVariant({ clientId, portSlug }: { clientId: string; portSlug: string }) {
const pathname = usePathname();
const { data, isLoading } = useClientInterests(clientId);
const interests = (data?.data ?? []).filter((i) => !i.archivedAt);
const interestsTabHref = `${pathname}?tab=interests` as Route;
if (isLoading) {
return (
<div className="space-y-2">
<Skeleton className="h-4 w-40" />
<Skeleton className="h-2 w-48" />
</div>
);
}
if (interests.length === 0) {
return (
<div className="flex flex-wrap items-center justify-between gap-2">
<div>
<p className="text-sm font-medium text-foreground">No active interests</p>
<p className="text-xs text-muted-foreground">
Start one to begin tracking the sales process.
</p>
</div>
<Link
href={`/${portSlug}/interests/new` as Route}
className="inline-flex items-center gap-1 text-xs font-medium text-primary hover:underline"
>
Start interest <ArrowRight className="size-3" />
</Link>
</div>
);
}
const sorted = [...interests].sort(
(a, b) => new Date(b.updatedAt).getTime() - new Date(a.updatedAt).getTime(),
);
return (
<div className="space-y-3">
<div className="flex items-center justify-between gap-2">
<span className="text-[10px] font-semibold uppercase tracking-wide text-muted-foreground">
Sales pipeline · {interests.length} active
</span>
<Link
href={interestsTabHref}
className="text-xs font-medium text-primary hover:underline"
scroll={false}
>
Manage
</Link>
</div>
<ul className="space-y-2">
{sorted.map((i) => {
const stage = safeStage(i.pipelineStage);
const berthLabel = i.berthMooringNumber
? `Berth ${i.berthMooringNumber}`
: 'General interest';
const href = `/${portSlug}/interests/${i.id}` as Route;
return (
<li key={i.id}>
<Link
href={href}
className="group flex items-center gap-3 rounded-lg p-2 -m-2 transition-colors hover:bg-foreground/5"
>
<div className="min-w-0 flex-1">
<div className="flex items-center gap-2 flex-wrap">
<span className="truncate text-sm font-medium text-foreground">
{berthLabel}
</span>
<span
className={cn(
'shrink-0 rounded-full px-2 py-0.5 text-[10px] font-medium',
STAGE_BADGE[stage],
)}
>
{STAGE_LABELS[stage]}
</span>
</div>
<div className="mt-1">
<StageStepper current={stage} size="xs" />
</div>
</div>
<ChevronRight className="size-3.5 shrink-0 text-muted-foreground transition-transform group-hover:translate-x-0.5" />
</Link>
</li>
);
})}
</ul>
</div>
);
}
export function ClientPipelineSummary({ clientId, variant = 'panel' }: PipelineSummaryProps) {
const routeParams = useParams<{ portSlug: string }>();
const portSlug = routeParams?.portSlug ?? '';
return variant === 'hero' ? (
<HeroVariant clientId={clientId} portSlug={portSlug} />
) : (
<PanelVariant clientId={clientId} portSlug={portSlug} />
);
}

5
src/components/dashboard/activity-feed.tsx
View File

@@ -57,7 +57,10 @@ function ActivityFeedInner() {
</CardHeader>
<CardContent>
{items.length === 0 ? (
<p className="text-sm text-muted-foreground">No recent activity.</p>
<p className="text-sm text-muted-foreground">
No recent activity yet — your team&apos;s actions (interests created, stages changed,
invoices sent) will appear here.
</p>
) : (
<div className="max-h-80 overflow-y-auto space-y-3 pr-1">
{items.map((item) => (

22
src/components/dashboard/lead-source-chart.tsx
View File

@@ -54,18 +54,24 @@ export function LeadSourceChart({ range }: Props) {
{isLoading ? (
<CardSkeleton />
) : !slices.length ? (
<EmptyState title="No interests in range" />
<EmptyState
title="No interests in range"
description="Lights up once new interests are created — tracks where each came from (website, referral, broker)."
/>
) : (
<ResponsiveContainer width="100%" height={260}>
// Percentage radii + center-anchored chart so the pie scales with
// the container instead of being clipped to a constant 90px ring at
// narrow widths. Legend is reserved a fixed footer height.
<ResponsiveContainer width="100%" height={280}>
<PieChart>
<Pie
data={chartData}
dataKey="value"
nameKey="name"
cx="50%"
cy="50%"
outerRadius={90}
innerRadius={50}
cy="45%"
outerRadius="70%"
innerRadius="40%"
paddingAngle={2}
>
{chartData.map((_, i) => (
@@ -80,7 +86,11 @@ export function LeadSourceChart({ range }: Props) {
fontSize: 12,
}}
/>
<Legend wrapperStyle={{ fontSize: 12 }} />
<Legend
verticalAlign="bottom"
height={40}
wrapperStyle={{ fontSize: 12, paddingTop: 4 }}
/>
</PieChart>
</ResponsiveContainer>
)}

6
src/components/dashboard/pipeline-chart.tsx
View File

@@ -6,7 +6,8 @@ import { Bar, BarChart, CartesianGrid, ResponsiveContainer, Tooltip, XAxis, YAxi
import { apiFetch } from '@/lib/api/client';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { CardSkeleton } from '@/components/shared/loading-skeleton';
import { stageLabel } from '@/lib/constants';
import { useIsMobile } from '@/hooks/use-is-mobile';
import { STAGE_SHORT_LABELS, safeStage, stageLabel } from '@/lib/constants';
import { WidgetErrorBoundary } from './widget-error-boundary';
interface PipelineRow {
@@ -15,6 +16,7 @@ interface PipelineRow {
}
function PipelineChartInner() {
const isMobile = useIsMobile();
const { data, isLoading } = useQuery<PipelineRow[]>({
queryKey: ['dashboard', 'pipeline'],
queryFn: () => apiFetch<PipelineRow[]>('/api/v1/dashboard/pipeline'),
@@ -27,7 +29,7 @@ function PipelineChartInner() {
}
const chartData = (data ?? []).map((row) => ({
stage: stageLabel(row.stage),
stage: isMobile ? STAGE_SHORT_LABELS[safeStage(row.stage)] : stageLabel(row.stage),
count: row.count,
}));

12
src/components/dashboard/pipeline-funnel-chart.tsx
View File

@@ -4,7 +4,8 @@ import { Bar, BarChart, CartesianGrid, ResponsiveContainer, Tooltip, XAxis, YAxi
import { CardSkeleton } from '@/components/shared/loading-skeleton';
import { EmptyState } from '@/components/shared/empty-state';
import { stageLabel } from '@/lib/constants';
import { useIsMobile } from '@/hooks/use-is-mobile';
import { STAGE_SHORT_LABELS, safeStage, stageLabel } from '@/lib/constants';
import { ChartCard } from './chart-card';
import { useFunnel } from './use-analytics';
import type { DateRange } from '@/lib/services/analytics.service';
@@ -15,10 +16,12 @@ interface Props {
export function PipelineFunnelChart({ range }: Props) {
const { data, isLoading } = useFunnel(range);
const isMobile = useIsMobile();
const stages = data?.stages ?? [];
// Use short labels on mobile so the rotated axis isn't a wall of overlap.
const chartData = stages.map((s) => ({
stage: stageLabel(s.stage),
stage: isMobile ? STAGE_SHORT_LABELS[safeStage(s.stage)] : stageLabel(s.stage),
count: s.count,
conversionPct: s.conversionPct,
}));
@@ -41,7 +44,10 @@ export function PipelineFunnelChart({ range }: Props) {
{isLoading ? (
<CardSkeleton />
) : allZero ? (
<EmptyState title="No interests in range" description="Try a longer date range." />
<EmptyState
title="No interests in range"
description="Conversion through Open → EOI → Deposit → Contract appears here. Try a longer date range, or add an interest to see it."
/>
) : (
<ResponsiveContainer width="100%" height={260}>
<BarChart data={chartData} margin={{ top: 4, right: 8, left: -16, bottom: 60 }}>

5
src/components/dashboard/revenue-breakdown-chart.tsx
View File

@@ -47,7 +47,10 @@ export function RevenueBreakdownChart({ range }: Props) {
{isLoading ? (
<CardSkeleton />
) : !bars.length ? (
<EmptyState title="No invoices in range" description="Invoices appear here once issued." />
<EmptyState
title="No invoices in range"
description="Issued, paid, and overdue totals appear here once you create invoices."
/>
) : (
<ResponsiveContainer width="100%" height={260}>
<BarChart data={chartData} margin={{ top: 4, right: 8, left: -8, bottom: 40 }}>

10
src/components/documents/document-list.tsx
View File

@@ -25,6 +25,9 @@ interface DocumentRow {
interface DocumentListProps {
interestId?: string;
clientId?: string;
/** Override the default empty state ("No documents yet.") with a contextual
* CTA — e.g. on the interest Documents tab we render a Generate EOI prompt. */
emptyState?: React.ReactNode;
}
const STATUS_COLORS: Record<string, 'default' | 'secondary' | 'destructive' | 'outline'> = {
@@ -44,7 +47,7 @@ const TYPE_LABELS: Record<string, string> = {
other: 'Other',
};
export function DocumentList({ interestId, clientId }: DocumentListProps) {
export function DocumentList({ interestId, clientId, emptyState }: DocumentListProps) {
const queryClient = useQueryClient();
const queryParams = new URLSearchParams();
@@ -83,10 +86,13 @@ export function DocumentList({ interestId, clientId }: DocumentListProps) {
};
if (isLoading) {
return <div className="py-8 text-center text-sm text-muted-foreground">Loading documents...</div>;
return (
<div className="py-8 text-center text-sm text-muted-foreground">Loading documents...</div>
);
}
if (!data || data.length === 0) {
if (emptyState) return <>{emptyState}</>;
return <div className="py-8 text-center text-sm text-muted-foreground">No documents yet.</div>;
}

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',

2
src/components/shared/detail-header-strip.tsx
View File

@@ -10,7 +10,7 @@ export function DetailHeaderStrip({ children, className }: DetailHeaderStripProp
return (
<div
className={cn(
'rounded-xl border border-border bg-gradient-brand-soft px-5 py-4 shadow-xs',
'rounded-xl border border-border bg-gradient-brand-soft px-5 py-3 shadow-xs',
className,
)}
>

4
src/components/shared/inline-editable-field.tsx
View File

@@ -262,7 +262,9 @@ function ReadButton({
{!disabled && (
<Pencil
className={cn(
'h-3 w-3 opacity-0 transition-opacity group-hover:opacity-50',
// Show the pencil faintly at rest so users discover the field is
// editable without having to hover-and-test every label.
'h-3 w-3 opacity-20 transition-opacity group-hover:opacity-60',
multiline && 'mt-1 shrink-0',
)}
/>

10
src/components/ui/dialog.tsx
View File

@@ -38,7 +38,15 @@ const DialogContent = React.forwardRef<
<DialogPrimitive.Content
ref={ref}
className={cn(
'fixed inset-0 z-50 grid w-full gap-4 border-0 bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 sm:left-[50%] sm:top-[50%] sm:inset-auto sm:max-w-lg sm:translate-x-[-50%] sm:translate-y-[-50%] sm:border sm:rounded-lg sm:data-[state=closed]:zoom-out-95 sm:data-[state=open]:zoom-in-95 sm:data-[state=closed]:slide-out-to-left-1/2 sm:data-[state=closed]:slide-out-to-top-[48%] sm:data-[state=open]:slide-in-from-left-1/2 sm:data-[state=open]:slide-in-from-top-[48%]',
// Mobile: full-screen sheet anchored to all four sides via individual
// top/right/bottom/left utilities. Desktop (sm+): override each side
// individually so tailwind-merge doesn't collapse our centering classes.
// (Don't use `inset-0` + `sm:inset-auto` here — twMerge sees that as a
// conflict and silently strips `sm:left-[50%]` / `sm:top-[50%]`.)
'fixed top-0 right-0 bottom-0 left-0 z-50 grid w-full gap-4 border-0 bg-background p-6 shadow-lg duration-200',
'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
'sm:top-[50%] sm:right-auto sm:bottom-auto sm:left-[50%] sm:max-w-lg sm:translate-x-[-50%] sm:translate-y-[-50%] sm:border sm:rounded-lg',
'sm:data-[state=closed]:zoom-out-95 sm:data-[state=open]:zoom-in-95 sm:data-[state=closed]:slide-out-to-left-1/2 sm:data-[state=closed]:slide-out-to-top-[48%] sm:data-[state=open]:slide-in-from-left-1/2 sm:data-[state=open]:slide-in-from-top-[48%]',
className,
)}
{...props}

13
src/lib/constants.ts
View File

@@ -26,6 +26,19 @@ export const STAGE_LABELS: Record<PipelineStage, string> = {
completed: 'Completed',
};
// Compact labels for cramped contexts (mobile chart axes, dense tables).
export const STAGE_SHORT_LABELS: Record<PipelineStage, string> = {
open: 'Open',
details_sent: 'Details',
in_communication: 'Comms',
eoi_sent: 'EOI →',
eoi_signed: 'EOI ✓',
deposit_10pct: 'Dep.',
contract_sent: 'Ctr →',
contract_signed: 'Ctr ✓',
completed: 'Done',
};
export const STAGE_BADGE: Record<PipelineStage, string> = {
open: 'bg-slate-100 text-slate-700',
details_sent: 'bg-blue-100 text-blue-700',