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

refactor(sales): consolidate pipeline stages + wire EOI auto-advance

Browse Source 
The 8→9 stage refresh from earlier today only updated constants.ts and the DB —
20 component/service files still hardcoded the old enum, leaving labels blank,
filter dropdowns wrong, kanban columns mismatched, and the analytics funnel
silently dropping new-stage rows. The platform also never advanced
pipelineStage on EOI lifecycle events: documents.service.ts wrote eoiStatus
but left the user-visible stage stuck.

This commit closes both gaps:

  1. Single source of truth in src/lib/constants.ts — adds STAGE_LABELS,
     STAGE_BADGE, STAGE_DOT, STAGE_WEIGHTS, STAGE_TRANSITIONS plus
     stageLabel / stageBadgeClass / stageDotClass / safeStage /
     canTransitionStage helpers. components/clients/pipeline-constants.ts
     becomes a re-export shim so existing imports keep working.

  2. 18 stale-enum surfaces migrated — interest list (table, card, filters,
     form, stage picker), pipeline board, client card, berth interests tab,
     portal client interests page, dashboard pipeline / funnel / revenue-
     forecast charts, settings pipeline_weights default, dashboard.service
     weights, analytics.service funnel stages, alert-rules stale-interest
     filter, interest-scoring stage rank.

  3. Documents tab wired into interest detail — replaced the placeholder in
     interest-tabs.tsx with InterestDocumentsTab + InterestFilesTab so the
     EOI launcher is back where salespeople work.

  4. Auto-advance — new advanceStageIfBehind() in interests.service.ts
     (forward-only, no-op if interest is already past the target). Called
     from documents.service.ts on send (→ eoi_sent), Documenso completed
     webhook (→ eoi_signed), and manual signed-EOI upload (→ eoi_signed).

  5. Transition guard — canTransitionStage() blocks egregious skips
     (e.g. completed → open, open → contract_signed). Enforced in
     changeInterestStage before the DB write.

Tests updated to reflect the 9-stage model. tsc clean, vitest 832/832,
ESLint clean 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-01 23:33:53 +02:00
parent 0d357731ad
commit 886119cbde
26 changed files with 577 additions and 419 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/admin/settings/settings-manager.tsx
View File

@@ -68,9 +68,11 @@ const KNOWN_SETTINGS: Array<{
open: 0.05,
details_sent: 0.1,
in_communication: 0.2,
signed_eoi_nda: 0.4,
deposit_10pct: 0.6,
contract: 0.8,
eoi_sent: 0.4,
eoi_signed: 0.6,
deposit_10pct: 0.75,
contract_sent: 0.85,
contract_signed: 0.95,
completed: 1.0,
},
},

32
src/components/berths/berth-interests-tab.tsx
View File

@@ -19,6 +19,7 @@ import {
import { TableSkeleton } from '@/components/shared/loading-skeleton';
import { EmptyState } from '@/components/shared/empty-state';
import { Bookmark } from 'lucide-react';
import { PIPELINE_STAGES, stageLabel } from '@/lib/constants';
import type { InterestRow } from '@/components/interests/interest-columns';
interface BerthInterestsTabProps {
@@ -28,27 +29,10 @@ interface BerthInterestsTabProps {
type StageFilter = 'all' | 'active' | 'lost';
type SortMode = 'newest' | 'stage' | 'category';
const STAGE_LABELS: Record<string, string> = {
open: 'Open',
details_sent: 'Details Sent',
in_communication: 'In Communication',
visited: 'Visited',
signed_eoi_nda: 'Signed EOI/NDA',
deposit_10pct: 'Deposit 10%',
contract: 'Contract',
completed: 'Completed',
};
const STAGE_ORDER: Record<string, number> = {
open: 0,
details_sent: 1,
in_communication: 2,
visited: 3,
signed_eoi_nda: 4,
deposit_10pct: 5,
contract: 6,
completed: 7,
};
function stageRank(stage: string): number {
const idx = PIPELINE_STAGES.indexOf(stage as (typeof PIPELINE_STAGES)[number]);
return idx === -1 ? 99 : idx;
}
const CATEGORY_RANK: Record<string, number> = {
hot_lead: 0,
@@ -104,8 +88,8 @@ export function BerthInterestsTab({ berthId }: BerthInterestsTabProps) {
});
const sorted = [...filtered].sort((a, b) => {
if (sortMode === 'stage') {
const sa = STAGE_ORDER[a.pipelineStage] ?? 99;
const sb = STAGE_ORDER[b.pipelineStage] ?? 99;
const sa = stageRank(a.pipelineStage);
const sb = stageRank(b.pipelineStage);
if (sa !== sb) return sb - sa; // furthest along first
}
if (sortMode === 'category') {
@@ -189,7 +173,7 @@ export function BerthInterestsTab({ berthId }: BerthInterestsTabProps) {
</td>
<td className="px-3 py-2">
<Badge variant="secondary" className="font-normal">
{STAGE_LABELS[i.pipelineStage] ?? i.pipelineStage}
{stageLabel(i.pipelineStage)}
</Badge>
</td>
<td className="px-3 py-2 text-muted-foreground">

33
src/components/clients/client-card.tsx
View File

@@ -17,6 +17,7 @@ import {
deriveInitials,
} from '@/components/shared/list-card';
import { getCountryName } from '@/lib/i18n/countries';
import { stageBadgeClass, stageLabel } from '@/lib/constants';
import type { ClientRow } from './client-columns';
const SOURCE_LABELS: Record<string, string> = {
@@ -37,15 +38,20 @@ export function ClientCard({ client, portSlug, onEdit, onArchive }: ClientCardPr
const primary = client.contacts?.find((c) => c.isPrimary);
const nationality = client.nationalityIso ? getCountryName(client.nationalityIso, 'en') : null;
const sourceLabel = client.source ? (SOURCE_LABELS[client.source] ?? client.source) : null;
const yachtCount = client.yachtCount ?? 0;
const companyCount = client.companyCount ?? 0;
const tags = client.tags ?? [];
const meta = [nationality, sourceLabel].filter(Boolean) as string[];
const counts: string[] = [];
if (yachtCount > 0) counts.push(`${yachtCount} ${yachtCount === 1 ? 'yacht' : 'yachts'}`);
if (companyCount > 0)
counts.push(`${companyCount} ${companyCount === 1 ? 'company' : 'companies'}`);
const interest = client.latestInterest ?? null;
const interestCount = client.interestCount ?? 0;
const interestBerthLabel = interest
? interest.mooringNumber
? `Berth ${interest.mooringNumber}`
: 'General interest'
: null;
const interestStageLabel = interest ? stageLabel(interest.stage) : null;
const interestStageBadge = interest ? stageBadgeClass(interest.stage) : null;
const extraInterests = interestCount > 1 ? interestCount - 1 : 0;
return (
<ListCard
@@ -102,8 +108,19 @@ export function ClientCard({ client, portSlug, onEdit, onArchive }: ClientCardPr
</div>
) : null}
{counts.length > 0 ? (
<p className="mt-0.5 text-xs text-muted-foreground">{counts.join(' · ')}</p>
{interest ? (
<div className="mt-1 flex items-center gap-1.5 text-xs text-muted-foreground">
<span className="truncate">{interestBerthLabel}</span>
<span aria-hidden>·</span>
<span
className={`shrink-0 rounded-full px-1.5 py-0.5 text-[10px] font-medium ${interestStageBadge}`}
>
{interestStageLabel}
</span>
{extraInterests > 0 ? (
<span className="shrink-0 text-muted-foreground/80">+{extraInterests}</span>
) : null}
</div>
) : null}
{tags.length > 0 ? (

14
src/components/clients/pipeline-constants.ts Normal file
View File

@@ -0,0 +1,14 @@
// Re-export from the canonical source so legacy imports keep working.
export {
PIPELINE_STAGES,
STAGE_LABELS,
STAGE_BADGE,
STAGE_DOT,
STAGE_WEIGHTS,
STAGE_TRANSITIONS,
safeStage,
stageLabel,
stageBadgeClass,
stageDotClass,
type PipelineStage,
} from '@/lib/constants';

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

@@ -1,19 +1,12 @@
'use client';
import { useQuery } from '@tanstack/react-query';
import {
Bar,
BarChart,
CartesianGrid,
ResponsiveContainer,
Tooltip,
XAxis,
YAxis,
} from 'recharts';
import { Bar, BarChart, CartesianGrid, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';
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 { WidgetErrorBoundary } from './widget-error-boundary';
interface PipelineRow {
@@ -21,17 +14,6 @@ interface PipelineRow {
count: number;
}
const STAGE_LABELS: Record<string, string> = {
open: 'Open',
details_sent: 'Details Sent',
in_communication: 'In Communication',
visited: 'Visited',
signed_eoi_nda: 'Signed EOI/NDA',
deposit_10pct: 'Deposit 10%',
contract: 'Contract',
completed: 'Completed',
};
function PipelineChartInner() {
const { data, isLoading } = useQuery<PipelineRow[]>({
queryKey: ['dashboard', 'pipeline'],
@@ -45,7 +27,7 @@ function PipelineChartInner() {
}
const chartData = (data ?? []).map((row) => ({
stage: STAGE_LABELS[row.stage] ?? row.stage,
stage: stageLabel(row.stage),
count: row.count,
}));

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

@@ -4,21 +4,11 @@ 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 { ChartCard } from './chart-card';
import { useFunnel } from './use-analytics';
import type { DateRange } from '@/lib/services/analytics.service';
const STAGE_LABELS: Record<string, string> = {
open: 'Open',
details_sent: 'Details Sent',
in_communication: 'In Communication',
visited: 'Visited',
signed_eoi_nda: 'Signed EOI/NDA',
deposit_10pct: 'Deposit 10%',
contract: 'Contract',
completed: 'Completed',
};
interface Props {
range: DateRange;
}
@@ -28,7 +18,7 @@ export function PipelineFunnelChart({ range }: Props) {
const stages = data?.stages ?? [];
const chartData = stages.map((s) => ({
stage: STAGE_LABELS[s.stage] ?? s.stage,
stage: stageLabel(s.stage),
count: s.count,
conversionPct: s.conversionPct,
}));

22
src/components/dashboard/revenue-forecast.tsx
View File

@@ -6,6 +6,7 @@ import { apiFetch } from '@/lib/api/client';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { CardSkeleton } from '@/components/shared/loading-skeleton';
import { stageLabel } from '@/lib/constants';
import { WidgetErrorBoundary } from './widget-error-boundary';
interface StageBreakdownRow {
@@ -20,17 +21,6 @@ interface ForecastData {
weightsSource: 'db' | 'default';
}
const STAGE_LABELS: Record<string, string> = {
open: 'Open',
details_sent: 'Details Sent',
in_communication: 'In Communication',
visited: 'Visited',
signed_eoi_nda: 'Signed EOI/NDA',
deposit_10pct: 'Deposit 10%',
contract: 'Contract',
completed: 'Completed',
};
function formatCurrency(value: number): string {
return new Intl.NumberFormat('en-US', {
style: 'currency',
@@ -66,9 +56,7 @@ function RevenueForecastInner() {
<CardContent className="space-y-4">
<div>
<p className="text-xs text-muted-foreground">Weighted Pipeline Value</p>
<p className="text-2xl font-bold">
{formatCurrency(data?.totalWeightedValue ?? 0)}
</p>
<p className="text-2xl font-bold">{formatCurrency(data?.totalWeightedValue ?? 0)}</p>
</div>
{activeStages.length > 0 && (
@@ -76,12 +64,10 @@ function RevenueForecastInner() {
{activeStages.map((s) => (
<div key={s.stage} className="flex items-center justify-between text-sm">
<span className="text-muted-foreground">
{STAGE_LABELS[s.stage] ?? s.stage}
{stageLabel(s.stage)}
<span className="ml-1 text-xs">({s.count})</span>
</span>
<span className="font-medium tabular-nums">
{formatCurrency(s.weightedValue)}
</span>
<span className="font-medium tabular-nums">{formatCurrency(s.weightedValue)}</span>
</div>
))}
</div>

42
src/components/interests/interest-card.tsx
View File

@@ -17,43 +17,9 @@ import {
deriveInitials,
} from '@/components/shared/list-card';
import { cn } from '@/lib/utils';
import { stageBadgeClass, stageDotClass, stageLabel as toStageLabel } from '@/lib/constants';
import type { InterestRow } from './interest-columns';
const STAGE_LABELS: Record<string, string> = {
open: 'Open',
details_sent: 'Details Sent',
in_communication: 'In Communication',
visited: 'Visited',
signed_eoi_nda: 'Signed EOI/NDA',
deposit_10pct: 'Deposit 10%',
contract: 'Contract',
completed: 'Completed',
};
/** Pill colors (used for the stage badge in the meta row). */
const STAGE_PILL: Record<string, string> = {
open: 'bg-slate-100 text-slate-700',
details_sent: 'bg-blue-100 text-blue-700',
in_communication: 'bg-sky-100 text-sky-700',
visited: 'bg-violet-100 text-violet-700',
signed_eoi_nda: 'bg-amber-100 text-amber-700',
deposit_10pct: 'bg-orange-100 text-orange-700',
contract: 'bg-green-100 text-green-700',
completed: 'bg-emerald-100 text-emerald-700',
};
/** Accent-bar colors — saturate progressively so the pipeline depth reads at a glance. */
const STAGE_ACCENT: Record<string, string> = {
open: 'bg-slate-300',
details_sent: 'bg-blue-400',
in_communication: 'bg-sky-400',
visited: 'bg-violet-400',
signed_eoi_nda: 'bg-amber-400',
deposit_10pct: 'bg-orange-400',
contract: 'bg-green-500',
completed: 'bg-emerald-500',
};
const CATEGORY_LABELS: Record<string, string> = {
general_interest: 'General',
specific_qualified: 'Qualified',
@@ -75,9 +41,9 @@ interface InterestCardProps {
}
export function InterestCard({ interest, portSlug, onEdit, onArchive }: InterestCardProps) {
const stageLabel = STAGE_LABELS[interest.pipelineStage] ?? interest.pipelineStage;
const stagePill = STAGE_PILL[interest.pipelineStage] ?? 'bg-gray-100 text-gray-700';
const accentClass = STAGE_ACCENT[interest.pipelineStage] ?? 'bg-slate-300';
const stageLabel = toStageLabel(interest.pipelineStage);
const stagePill = stageBadgeClass(interest.pipelineStage);
const accentClass = stageDotClass(interest.pipelineStage);
const isHotLead = interest.leadCategory === 'hot_lead';
const categoryLabel = interest.leadCategory ? CATEGORY_LABELS[interest.leadCategory] : null;
const sourceLabel = interest.source ? (SOURCE_LABELS[interest.source] ?? interest.source) : null;

32
src/components/interests/interest-columns.tsx
View File

@@ -14,6 +14,7 @@ import {
} from '@/components/ui/dropdown-menu';
import { Badge } from '@/components/ui/badge';
import { TagBadge } from '@/components/shared/tag-badge';
import { stageBadgeClass, stageLabel } from '@/lib/constants';
export interface InterestRow {
id: string;
@@ -29,28 +30,6 @@ export interface InterestRow {
tags?: Array<{ id: string; name: string; color: string }>;
}
const STAGE_LABELS: Record<string, string> = {
open: 'Open',
details_sent: 'Details Sent',
in_communication: 'In Communication',
visited: 'Visited',
signed_eoi_nda: 'Signed EOI/NDA',
deposit_10pct: 'Deposit 10%',
contract: 'Contract',
completed: 'Completed',
};
const STAGE_COLORS: Record<string, string> = {
open: 'bg-slate-100 text-slate-700',
details_sent: 'bg-blue-100 text-blue-700',
in_communication: 'bg-sky-100 text-sky-700',
visited: 'bg-violet-100 text-violet-700',
signed_eoi_nda: 'bg-amber-100 text-amber-700',
deposit_10pct: 'bg-orange-100 text-orange-700',
contract: 'bg-green-100 text-green-700',
completed: 'bg-emerald-100 text-emerald-700',
};
const CATEGORY_LABELS: Record<string, string> = {
general_interest: 'General Interest',
specific_qualified: 'Specific Qualified',
@@ -117,9 +96,9 @@ export function getInterestColumns({
const stage = getValue() as string;
return (
<span
className={`inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium ${STAGE_COLORS[stage] ?? 'bg-gray-100 text-gray-700'}`}
className={`inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium ${stageBadgeClass(stage)}`}
>
{STAGE_LABELS[stage] ?? stage}
{stageLabel(stage)}
</span>
);
},
@@ -205,10 +184,7 @@ export function getInterestColumns({
<Pencil className="mr-2 h-3.5 w-3.5" />
Edit
</DropdownMenuItem>
<DropdownMenuItem
className="text-destructive"
onClick={() => onArchive(row.original)}
>
<DropdownMenuItem className="text-destructive" onClick={() => onArchive(row.original)}>
<Archive className="mr-2 h-3.5 w-3.5" />
Archive
</DropdownMenuItem>

15
src/components/interests/interest-filters.tsx
View File

@@ -1,16 +1,5 @@
import type { FilterDefinition } from '@/components/shared/filter-bar';
import { PIPELINE_STAGES, LEAD_CATEGORIES } from '@/lib/constants';
const STAGE_LABELS: Record<string, string> = {
open: 'Open',
details_sent: 'Details Sent',
in_communication: 'In Communication',
visited: 'Visited',
signed_eoi_nda: 'Signed EOI/NDA',
deposit_10pct: 'Deposit 10%',
contract: 'Contract',
completed: 'Completed',
};
import { PIPELINE_STAGES, STAGE_LABELS, LEAD_CATEGORIES } from '@/lib/constants';
const CATEGORY_LABELS: Record<string, string> = {
general_interest: 'General Interest',
@@ -30,7 +19,7 @@ export const interestFilterDefinitions: FilterDefinition[] = [
label: 'Stage',
type: 'multi-select',
options: PIPELINE_STAGES.map((s) => ({
label: STAGE_LABELS[s] ?? s,
label: STAGE_LABELS[s],
value: s,
})),
},

26
src/components/interests/interest-form.tsx
View File

@@ -35,20 +35,9 @@ import { YachtPicker } from '@/components/yachts/yacht-picker';
import { apiFetch } from '@/lib/api/client';
import { useEntityOptions } from '@/hooks/use-entity-options';
import { createInterestSchema, type CreateInterestInput } from '@/lib/validators/interests';
import { PIPELINE_STAGES, LEAD_CATEGORIES } from '@/lib/constants';
import { PIPELINE_STAGES, STAGE_LABELS, LEAD_CATEGORIES } from '@/lib/constants';
import { cn } from '@/lib/utils';
const STAGE_LABELS: Record<string, string> = {
open: 'Open',
details_sent: 'Details Sent',
in_communication: 'In Communication',
visited: 'Visited',
signed_eoi_nda: 'Signed EOI/NDA',
deposit_10pct: 'Deposit 10%',
contract: 'Contract',
completed: 'Completed',
};
const CATEGORY_LABELS: Record<string, string> = {
general_interest: 'General Interest',
specific_qualified: 'Specific Qualified',
@@ -58,6 +47,11 @@ const CATEGORY_LABELS: Record<string, string> = {
interface InterestFormProps {
open: boolean;
onOpenChange: (open: boolean) => void;
/**
* Pre-fill clientId when launching the form from a client detail page.
* Ignored when `interest` is provided (edit mode).
*/
defaultClientId?: string;
interest?: {
id: string;
clientId: string;
@@ -75,7 +69,7 @@ interface InterestFormProps {
};
}
export function InterestForm({ open, onOpenChange, interest }: InterestFormProps) {
export function InterestForm({ open, onOpenChange, defaultClientId, interest }: InterestFormProps) {
const queryClient = useQueryClient();
const isEdit = !!interest;
@@ -140,14 +134,14 @@ export function InterestForm({ open, onOpenChange, interest }: InterestFormProps
});
} else if (!interest && open) {
reset({
clientId: '',
clientId: defaultClientId ?? '',
yachtId: undefined,
pipelineStage: 'open',
reminderEnabled: false,
tagIds: [],
});
}
}, [interest, open, reset]);
}, [interest, defaultClientId, open, reset]);
const mutation = useMutation({
mutationFn: async (data: CreateInterestInput) => {
@@ -347,7 +341,7 @@ export function InterestForm({ open, onOpenChange, interest }: InterestFormProps
<SelectContent>
{PIPELINE_STAGES.map((s) => (
<SelectItem key={s} value={s}>
{STAGE_LABELS[s] ?? s}
{STAGE_LABELS[s]}
</SelectItem>
))}
</SelectContent>

19
src/components/interests/interest-stage-picker.tsx
View File

@@ -22,18 +22,7 @@ import {
SelectValue,
} from '@/components/ui/select';
import { apiFetch } from '@/lib/api/client';
import { PIPELINE_STAGES } from '@/lib/constants';
const STAGE_LABELS: Record<string, string> = {
open: 'Open',
details_sent: 'Details Sent',
in_communication: 'In Communication',
visited: 'Visited',
signed_eoi_nda: 'Signed EOI/NDA',
deposit_10pct: 'Deposit 10%',
contract: 'Contract',
completed: 'Completed',
};
import { PIPELINE_STAGES, STAGE_LABELS, stageLabel } from '@/lib/constants';
interface InterestStagePickerProps {
open: boolean;
@@ -76,9 +65,7 @@ export function InterestStagePicker({
<div className="space-y-4 py-2">
<div className="space-y-1">
<Label>Current Stage</Label>
<p className="text-sm text-muted-foreground">
{STAGE_LABELS[currentStage] ?? currentStage}
</p>
<p className="text-sm text-muted-foreground">{stageLabel(currentStage)}</p>
</div>
<div className="space-y-1">
@@ -90,7 +77,7 @@ export function InterestStagePicker({
<SelectContent>
{PIPELINE_STAGES.map((s) => (
<SelectItem key={s} value={s}>
{STAGE_LABELS[s] ?? s}
{STAGE_LABELS[s]}
</SelectItem>
))}
</SelectContent>

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

@@ -1,16 +1,21 @@
'use client';
import { format } from 'date-fns';
import { format, formatDistanceToNowStrict } from 'date-fns';
import { useMutation, useQueryClient } from '@tanstack/react-query';
import { CheckCircle2, Circle, FileSignature, Send, Wallet } from 'lucide-react';
import type { DetailTab } from '@/components/shared/detail-layout';
import { Button } from '@/components/ui/button';
import { NotesList } from '@/components/shared/notes-list';
import { InlineEditableField } from '@/components/shared/inline-editable-field';
import { InlineTagEditor } from '@/components/shared/inline-tag-editor';
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 { apiFetch } from '@/lib/api/client';
import { cn } from '@/lib/utils';
type InterestPatchField = 'leadCategory' | 'source' | 'notes';
@@ -58,6 +63,21 @@ function useInterestPatch(interestId: string) {
});
}
function useStageMutation(interestId: string) {
const qc = useQueryClient();
return useMutation({
mutationFn: async ({ stage, reason }: { stage: string; reason?: string }) =>
apiFetch(`/api/v1/interests/${interestId}/stage`, {
method: 'PATCH',
body: { pipelineStage: stage, reason },
}),
onSuccess: () => {
qc.invalidateQueries({ queryKey: ['interests', interestId] });
qc.invalidateQueries({ queryKey: ['interests'] });
},
});
}
function EditableRow({ label, children }: { label: string; children: React.ReactNode }) {
return (
<div className="flex gap-2 py-1.5 border-b last:border-0 items-center">
@@ -82,6 +102,117 @@ function formatDate(date: string | null) {
return format(new Date(date), 'MMM d, yyyy');
}
function relativeDate(date: string | null) {
if (!date) return null;
return `${formatDistanceToNowStrict(new Date(date))} ago`;
}
interface MilestoneSectionProps {
title: string;
icon: React.ComponentType<{ className?: string }>;
/** Lifecycle for this milestone, in chronological order. */
steps: Array<{
label: string;
date: string | null;
/** Stage to advance to when the user clicks the action button for this step. */
advanceStage?: string;
/** Optional override for the action label. */
actionLabel?: string;
}>;
status: string | null;
onAdvance: (stage: string) => void;
isPending: boolean;
}
/**
* One milestone section (EOI / Deposit / Contract) — shows a vertical lifecycle
* with completed steps checked, the next step exposing a quick "mark as…"
* button that bumps the pipeline stage. Each stage flip auto-stamps its date
* via the service layer (interests.service.ts). When external systems wire in
* (Documenso webhook, paid invoice → deposit, etc.), they patch the same
* stage endpoint and these checkmarks light up automatically.
*/
function MilestoneSection({
title,
icon: Icon,
steps,
status,
onAdvance,
isPending,
}: MilestoneSectionProps) {
const firstUnsetIdx = steps.findIndex((s) => !s.date);
return (
<section className="rounded-xl border border-border bg-card p-4 shadow-sm">
<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" />
<h3 className="text-sm font-semibold tracking-tight text-foreground">{title}</h3>
</div>
{status ? (
<span className="rounded-full bg-muted px-2 py-0.5 text-[10px] font-medium uppercase tracking-wide text-muted-foreground">
{status.replace(/_/g, ' ')}
</span>
) : null}
</header>
<ol className="space-y-2">
{steps.map((step, i) => {
const done = !!step.date;
const isNext = !done && i === firstUnsetIdx;
return (
<li key={step.label} className="flex items-start gap-2 text-sm">
{done ? (
<CheckCircle2 className="mt-0.5 size-4 shrink-0 text-emerald-600" />
) : (
<Circle
className={cn(
'mt-0.5 size-4 shrink-0',
isNext ? 'text-foreground/60' : 'text-muted-foreground/40',
)}
/>
)}
<div className="min-w-0 flex-1">
<div className="flex flex-wrap items-center gap-x-2 gap-y-0.5">
<span
className={cn(
'truncate',
done
? 'text-foreground'
: isNext
? 'text-foreground'
: 'text-muted-foreground',
)}
>
{step.label}
</span>
{step.date ? (
<span className="text-xs text-muted-foreground">
{formatDate(step.date)} · {relativeDate(step.date)}
</span>
) : null}
</div>
{isNext && step.advanceStage ? (
<Button
type="button"
variant="outline"
size="sm"
disabled={isPending}
onClick={() => onAdvance(step.advanceStage!)}
className="mt-2 h-7 px-2.5 text-xs"
>
{step.actionLabel ?? `Mark as ${step.label.toLowerCase()}`}
</Button>
) : null}
</div>
</li>
);
})}
</ol>
</section>
);
}
function OverviewTab({
interestId,
interest,
@@ -90,88 +221,145 @@ function OverviewTab({
interest: InterestTabsOptions['interest'];
}) {
const mutation = useInterestPatch(interestId);
const stageMutation = useStageMutation(interestId);
const save = (field: InterestPatchField) => async (next: string | null) => {
await mutation.mutateAsync({ [field]: next });
};
const advance = (stage: string) =>
stageMutation.mutate({ stage, reason: 'Marked from overview' });
return (
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
{/* Lead & Source (editable) */}
<div className="space-y-1">
<h3 className="text-sm font-medium mb-2">Lead</h3>
<dl>
<EditableRow label="Lead Category">
<InlineEditableField
variant="select"
options={LEAD_CATEGORY_OPTIONS}
value={interest.leadCategory}
onSave={save('leadCategory')}
/>
</EditableRow>
<EditableRow label="Source">
<InlineEditableField value={interest.source} onSave={save('source')} />
</EditableRow>
</dl>
<div className="space-y-6">
{/* Sales-process milestones — the heart of the system. Each section is a
mini lifecycle that auto-completes as actions happen on the platform
(Documenso webhook, paid deposit invoice, signed contract). Until the
automation lands, salespeople nudge stages forward via the inline
buttons here, which auto-stamp the milestone date server-side. */}
<div className="grid grid-cols-1 gap-4 lg:grid-cols-3">
<MilestoneSection
title="EOI"
icon={Send}
status={interest.eoiStatus}
isPending={stageMutation.isPending}
onAdvance={advance}
steps={[
{
label: 'EOI sent',
date: interest.dateEoiSent,
advanceStage: 'eoi_sent',
actionLabel: 'Mark EOI as sent',
},
{
label: 'EOI signed',
date: interest.dateEoiSigned,
advanceStage: 'eoi_signed',
actionLabel: 'Mark EOI as signed',
},
]}
/>
<MilestoneSection
title="Deposit"
icon={Wallet}
status={interest.depositStatus}
isPending={stageMutation.isPending}
onAdvance={advance}
steps={[
{
label: 'Deposit received',
date: interest.dateDepositReceived,
advanceStage: 'deposit_10pct',
actionLabel: 'Mark deposit received',
},
]}
/>
<MilestoneSection
title="Contract"
icon={FileSignature}
status={interest.contractStatus}
isPending={stageMutation.isPending}
onAdvance={advance}
steps={[
{
label: 'Contract sent',
date: interest.dateContractSent,
advanceStage: 'contract_sent',
actionLabel: 'Mark contract as sent',
},
{
label: 'Contract signed',
date: interest.dateContractSigned,
advanceStage: 'contract_signed',
actionLabel: 'Mark contract as signed',
},
]}
/>
</div>
{/* EOI & Contract Status (read-only — derived) */}
<div className="space-y-1">
<h3 className="text-sm font-medium mb-2">Status</h3>
<dl>
<InfoRow label="EOI Status" value={interest.eoiStatus} />
<InfoRow label="Contract Status" value={interest.contractStatus} />
<InfoRow label="Deposit Status" value={interest.depositStatus} />
<InfoRow label="Reservation Status" value={interest.reservationStatus} />
</dl>
</div>
{/* Key Dates (read-only — set by workflow events) */}
<div className="space-y-1 md:col-span-2">
<h3 className="text-sm font-medium mb-2">Key Dates</h3>
<dl>
<InfoRow label="First Contact" value={formatDate(interest.dateFirstContact)} />
<InfoRow label="Last Contact" value={formatDate(interest.dateLastContact)} />
<InfoRow label="EOI Sent" value={formatDate(interest.dateEoiSent)} />
<InfoRow label="EOI Signed" value={formatDate(interest.dateEoiSigned)} />
<InfoRow label="Contract Sent" value={formatDate(interest.dateContractSent)} />
<InfoRow label="Contract Signed" value={formatDate(interest.dateContractSigned)} />
<InfoRow label="Deposit Received" value={formatDate(interest.dateDepositReceived)} />
</dl>
</div>
{/* Reminder */}
{interest.reminderEnabled && (
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
{/* Lead & Source (editable) */}
<div className="space-y-1">
<h3 className="text-sm font-medium mb-2">Reminder</h3>
<h3 className="text-sm font-medium mb-2">Lead</h3>
<dl>
<InfoRow
label="Reminder Days"
value={interest.reminderDays ? `${interest.reminderDays} days` : null}
/>
<InfoRow label="Last Fired" value={formatDate(interest.reminderLastFired)} />
<EditableRow label="Lead Category">
<InlineEditableField
variant="select"
options={LEAD_CATEGORY_OPTIONS}
value={interest.leadCategory}
onSave={save('leadCategory')}
/>
</EditableRow>
<EditableRow label="Source">
<InlineEditableField value={interest.source} onSave={save('source')} />
</EditableRow>
</dl>
</div>
)}
{/* Notes (editable, multiline) */}
<div className="space-y-1 md:col-span-2">
<h3 className="text-sm font-medium mb-2">Notes</h3>
<InlineEditableField
variant="textarea"
value={interest.notes}
onSave={save('notes')}
emptyText="No notes — click to add"
/>
</div>
{/* Contact dates (read-only — kept compact next to Lead) */}
<div className="space-y-1">
<h3 className="text-sm font-medium mb-2">Contact</h3>
<dl>
<InfoRow label="First Contact" value={formatDate(interest.dateFirstContact)} />
<InfoRow label="Last Contact" value={formatDate(interest.dateLastContact)} />
{interest.reservationStatus ? (
<InfoRow label="Reservation" value={interest.reservationStatus} />
) : null}
</dl>
</div>
{/* Tags */}
<div className="space-y-1 md:col-span-2">
<h3 className="text-sm font-medium mb-2">Tags</h3>
<InlineTagEditor
endpoint={`/api/v1/interests/${interestId}/tags`}
currentTags={interest.tags ?? []}
invalidateKey={['interests', interestId]}
/>
{/* Reminder */}
{interest.reminderEnabled && (
<div className="space-y-1">
<h3 className="text-sm font-medium mb-2">Reminder</h3>
<dl>
<InfoRow
label="Reminder Days"
value={interest.reminderDays ? `${interest.reminderDays} days` : null}
/>
<InfoRow label="Last Fired" value={formatDate(interest.reminderLastFired)} />
</dl>
</div>
)}
{/* Notes (editable, multiline) */}
<div className="space-y-1 md:col-span-2">
<h3 className="text-sm font-medium mb-2">Notes</h3>
<InlineEditableField
variant="textarea"
value={interest.notes}
onSave={save('notes')}
emptyText="No notes — click to add"
/>
</div>
{/* Tags */}
<div className="space-y-1 md:col-span-2">
<h3 className="text-sm font-medium mb-2">Tags</h3>
<InlineTagEditor
endpoint={`/api/v1/interests/${interestId}/tags`}
currentTags={interest.tags ?? []}
invalidateKey={['interests', interestId]}
/>
</div>
</div>
</div>
);
@@ -198,20 +386,12 @@ export function getInterestTabs({
{
id: 'documents',
label: 'Documents',
content: (
<div className="text-center py-12 text-muted-foreground">
<p>Documents tab available after document system is built</p>
</div>
),
content: <InterestDocumentsTab interestId={interestId} />,
},
{
id: 'files',
label: 'Files',
content: (
<div className="text-center py-12 text-muted-foreground">
<p>Files tab available after file system is built</p>
</div>
),
content: <InterestFilesTab interestId={interestId} />,
},
{
id: 'recommendations',

15
src/components/interests/pipeline-board.tsx
View File

@@ -8,18 +8,7 @@ import { DndContext, closestCenter, type DragEndEvent } from '@dnd-kit/core';
import { PipelineColumn } from '@/components/interests/pipeline-column';
import { apiFetch } from '@/lib/api/client';
import { usePipelineStore } from '@/stores/pipeline-store';
import { PIPELINE_STAGES } from '@/lib/constants';
const STAGE_LABELS: Record<string, string> = {
open: 'Open',
details_sent: 'Details Sent',
in_communication: 'In Communication',
visited: 'Visited',
signed_eoi_nda: 'Signed EOI/NDA',
deposit_10pct: 'Deposit 10%',
contract: 'Contract',
completed: 'Completed',
};
import { PIPELINE_STAGES, STAGE_LABELS } from '@/lib/constants';
interface InterestRow {
id: string;
@@ -116,7 +105,7 @@ export function PipelineBoard() {
<PipelineColumn
key={stage}
stage={stage}
label={STAGE_LABELS[stage] ?? stage}
label={STAGE_LABELS[stage]}
items={grouped[stage] ?? []}
/>
))}