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

feat(interests): EOI/contract/reservation tabs + contact log + berth interest milestone + interest list overhaul

Browse Source 
Major interest workflow expansion driven by the rapid-fire UX session.

EOI / Contract / Reservation tabs replace the generic Documents tab when
the deal is at the relevant stage — workspace pattern with active-doc
hero, signing progress, paper-signed upload, and history strip. Stage-
conditional visibility wired through interest-tabs.tsx so the tab set
shrinks/expands as the deal moves through the pipeline.

Contact log: per-interaction structured log (channel/direction/summary/
optional follow-up reminder). New `interest_contact_log` table + service
+ tab UI (timeline with channel-coded icons + compose dialog).
auto-creates a reminder when followUpAt is set.

Berth Interest milestone: first milestone in the OverviewTab's pipeline
strip, completes the moment any berth is linked via the junction. Drives
the "have we captured what they want?" sanity check for general_interest
leads before they move to EOI.

Stage-conditional milestones: past phases collapse into a one-liner
strip, current phase expands, future phases hide behind a "Show
upcoming" toggle. Inline stage picker now defers reason capture to an
override-confirm view (only required for illegal transitions, not the
default flow).

Notes blob → threaded: dropped `interests.notes` column entirely; the
threaded `interest_notes` table is the single source of truth. Latest-
note teaser on Overview links into the dedicated Notes tab. Polymorphic
notes service gains aggregated client view (unions client + interest +
yacht notes with source chips and group-by-source toggle).

Berth interest list overhaul:
  - Configurable columns via ColumnPicker (18 toggleable, 5 default-on)
  - Natural-sort SQL ORDER BY on mooring number (A1, A2, A10 not A10, A2)
  - Per-letter row tinting via colored left-border accent + dot in cell
  - Documents tab merged Files (single attachments section)

Topbar improvements:
  - Always-visible back arrow on detail pages (path depth > 2)
  - Breadcrumb-hint store + useBreadcrumbHint hook so detail pages can
    push their entity hierarchy (Clients › Mary Smith › Interest › B17)
  - Tighter spacing, softer separators, 160px crumb truncation

DataTable upgrades:
  - Page-size selector with All option (validator cap raised to 1000)
  - getRowClassName slot for per-row styling (used by berth tinting)
  - Fixed Radix SelectItem crash on empty-string values via __any__
    sentinel (was crashing every list page that opened a select filter)

Interest list:
  - Configurable columns picker
  - Stage cell clickable into detail
  - TagPicker + SavedViewsDropdown sized h-8 to match adjacent buttons
  - Save view moved into ColumnPicker menu; Views button hidden when
    no views are saved
  - Pipeline kanban board endpoint at /api/v1/interests/board with
    minimal projection, 5000-row cap + truncated banner, filter
    pass-through

Mobile chrome + sidebar collapse removed (always-expanded design choice).

User management lists super-admins (was inner-joined on user_port_roles
which excluded global super-admins).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Matt
2026-05-07 20:59:28 +02:00
parent 267c2b6d1f
commit 3e4d9d6310
87 changed files with 5593 additions and 902 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -4,7 +4,8 @@ import Link from 'next/link';
import { useParams } from 'next/navigation';
import { format, formatDistanceToNowStrict } from 'date-fns';
import { useMutation, useQueryClient } from '@tanstack/react-query';
import { CheckCircle2, Circle, FileSignature, Plus, Send, Wallet } from 'lucide-react';
import { useState } from 'react';
import { Anchor, CheckCircle2, Circle, FileSignature, Plus, Send, Wallet } from 'lucide-react';
import type { DetailTab } from '@/components/shared/detail-layout';
import { Button } from '@/components/ui/button';
@@ -16,12 +17,20 @@ import { BerthRecommenderPanel } from '@/components/interests/berth-recommender-
import { LinkedBerthsList } from '@/components/interests/linked-berths-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, PIPELINE_STAGES, type PipelineStage } from '@/lib/constants';
import {
LEAD_CATEGORIES,
PIPELINE_STAGES,
canTransitionStage,
type PipelineStage,
} from '@/lib/constants';
import { InterestEoiTab } from '@/components/interests/interest-eoi-tab';
import { InterestContactLogTab } from '@/components/interests/interest-contact-log-tab';
import { InterestContractTab } from '@/components/interests/interest-contract-tab';
import { InterestReservationTab } from '@/components/interests/interest-reservation-tab';
import { apiFetch } from '@/lib/api/client';
import { cn } from '@/lib/utils';
type InterestPatchField = 'leadCategory' | 'source' | 'notes';
type InterestPatchField = 'leadCategory' | 'source';
const LEAD_CATEGORY_OPTIONS = LEAD_CATEGORIES.map((c) => ({
value: c,
@@ -37,6 +46,9 @@ function humanizeStatus(value: string | null): string | null {
interface InterestTabsOptions {
interestId: string;
currentUserId?: string;
/** Used by the dedicated EOI tab to deep-link to the client's record
* for inline edits ("wrong details? edit on the client's page"). */
clientId?: string | null;
interest: {
pipelineStage: string;
/** Drives the recommender panel mounted on the Overview tab. */
@@ -59,6 +71,9 @@ interface InterestTabsOptions {
reminderEnabled: boolean;
reminderDays: number | null;
reminderLastFired: string | null;
/** Count of berths linked via the interest_berths junction —
* drives the "Berth Interest" milestone on the Overview tab. */
linkedBerthCount?: number;
notes: string | null;
/** Surfaced by getInterestById for the Overview "most recent note"
* teaser - saves a click into the Notes tab to peek at the latest. */
@@ -87,13 +102,23 @@ function useInterestPatch(interestId: string) {
});
}
type Phase = 'past' | 'current' | 'future';
function useStageMutation(interestId: string) {
const qc = useQueryClient();
return useMutation({
mutationFn: async ({ stage, reason }: { stage: string; reason?: string }) =>
mutationFn: async ({
stage,
reason,
override,
}: {
stage: string;
reason?: string;
override?: boolean;
}) =>
apiFetch(`/api/v1/interests/${interestId}/stage`, {
method: 'PATCH',
body: { pipelineStage: stage, reason },
body: { pipelineStage: stage, reason, override },
}),
onSuccess: () => {
qc.invalidateQueries({ queryKey: ['interests', interestId] });
@@ -278,6 +303,73 @@ function MilestoneSection({
);
}
/**
* Collapsible wrapper for future-phase milestones. Hidden by default so
* the overview stays focused on the current stage; expanding lets reps
* record skipped milestones (the action click then routes through the
* advance() override-confirm).
*/
function FutureMilestones({
milestones,
stageMutation,
advance,
activeMilestone,
currentStage,
}: {
milestones: Array<{
key: 'berth_interest' | 'eoi' | 'deposit' | 'contract';
title: string;
icon: React.ComponentType<{ className?: string }>;
status: string | null;
steps: MilestoneSectionProps['steps'];
footer?: React.ReactNode;
}>;
stageMutation: ReturnType<typeof useStageMutation>;
advance: (stage: string) => void;
activeMilestone: 'berth_interest' | 'eoi' | 'deposit' | 'contract' | null;
currentStage: string;
}) {
const [expanded, setExpanded] = useState(false);
return (
<div className="rounded-lg border border-dashed">
<button
type="button"
onClick={() => setExpanded((v) => !v)}
className="flex w-full items-center justify-between gap-2 px-4 py-2.5 text-sm text-muted-foreground hover:text-foreground hover:bg-muted/30 transition-colors"
>
<span>
{expanded ? 'Hide' : 'Show'} upcoming milestones
<span className="ml-2 text-xs">({milestones.map((m) => m.title).join(' · ')})</span>
</span>
<span className="text-xs">{expanded ? '▴' : '▾'}</span>
</button>
{expanded && (
<div
className={cn(
'grid grid-cols-1 gap-4 p-4 pt-0',
milestones.length === 1 ? '' : 'lg:grid-cols-2',
)}
>
{milestones.map((m) => (
<MilestoneSection
key={m.key}
title={m.title}
icon={m.icon}
status={m.status}
isPending={stageMutation.isPending}
onAdvance={advance}
currentStage={currentStage}
isActive={activeMilestone === m.key}
steps={m.steps}
footer={m.footer}
/>
))}
</div>
)}
</div>
);
}
function OverviewTab({
interestId,
interest,
@@ -292,25 +384,98 @@ function OverviewTab({
const save = (field: InterestPatchField) => async (next: string | null) => {
await mutation.mutateAsync({ [field]: next });
};
const advance = (stage: string) =>
stageMutation.mutate({ stage, reason: 'Marked from overview' });
/**
* Advance the pipeline. When the requested target isn't a legal next
* step (e.g. user clicked "Mark deposit received" while still on
* EOI Sent), prompt for confirmation and pass `override:true` so the
* backend transition guard lets the change through. Mirrors the
* skip-ahead pattern from the inline stage picker so audit trails
* stay consistent regardless of which surface the rep used.
*/
const advance = (stage: string) => {
const fromStage = interest.pipelineStage as PipelineStage;
const toStage = stage as PipelineStage;
const isOverride = fromStage !== toStage && !canTransitionStage(fromStage, toStage);
if (isOverride) {
const ok = window.confirm(
`This advances the stage from "${fromStage.replace(/_/g, ' ')}" to "${toStage.replace(
/_/g,
' ',
)}", which isn't a standard next step. Continue?\n\nThe change will be flagged in the audit log.`,
);
if (!ok) return;
}
stageMutation.mutate({
stage,
reason: isOverride ? 'Skip-ahead from overview milestones' : 'Marked from overview',
override: isOverride || undefined,
});
};
// Which milestone is the next one to act on? "EOI Signed" → Deposit is next;
// "Deposit 10%" → Contract is next; "Contract Signed" / "Completed" → none.
// Determine each milestone's phase relative to the current pipeline
// stage. The overview hides future-phase milestones by default — it
// was visually noisy to see Deposit + Contract cards on a deal still
// at the EOI stage, and the empty cards invited mis-clicks.
//
// Past milestones still render (collapsed history) so reps can see
// what's been completed. Future milestones are gated behind a "Show
// upcoming milestones" toggle so the rep CAN reach them when a deal
// genuinely skips stages — the click then routes through the same
// override-confirm flow as the inline stage picker.
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';
}
const phaseFor = (milestoneEndStageIdx: number): Phase => {
if (stageIdx === -1) return 'future';
if (stageIdx >= milestoneEndStageIdx) return 'past';
// The "current" milestone is the one whose end-stage hasn't been
// reached and whose start-stage is at-or-before the current stage.
return 'current';
};
// Berth Interest milestone — first thing the rep needs to capture
// (especially for general_interest leads). Completes the moment ANY
// berth is linked to the interest via the junction. While unset, it
// sits as the "current" milestone unless the deal has already moved
// past EOI sent (in which case the rep clearly didn't need a berth
// pinned first, so we mark it 'past' implicitly).
const hasLinkedBerth = (interest.linkedBerthCount ?? 0) > 0;
const berthInterestPhase: Phase = hasLinkedBerth
? 'past'
: stageIdx === -1 || stageIdx >= eoiSignedIdx
? 'past'
: 'current';
const eoiPhase = phaseFor(eoiSignedIdx);
// Deposit is current once the EOI is signed but before deposit is in.
const depositPhase: Phase =
stageIdx === -1
? 'future'
: stageIdx >= depositIdx
? 'past'
: stageIdx >= eoiSignedIdx
? 'current'
: 'future';
const contractPhase: Phase =
stageIdx === -1
? 'future'
: stageIdx >= contractSignedIdx
? 'past'
: stageIdx >= depositIdx
? 'current'
: 'future';
const activeMilestone: 'berth_interest' | 'eoi' | 'deposit' | 'contract' | null =
berthInterestPhase === 'current'
? 'berth_interest'
: eoiPhase === 'current'
? 'eoi'
: depositPhase === 'current'
? 'deposit'
: contractPhase === 'current'
? 'contract'
: null;
const toNum = (v: string | null | undefined): number | null => {
if (v === null || v === undefined) return null;
@@ -318,100 +483,190 @@ function OverviewTab({
return Number.isFinite(n) ? n : null;
};
const milestones: Array<{
key: 'berth_interest' | 'eoi' | 'deposit' | 'contract';
phase: Phase;
title: string;
icon: React.ComponentType<{ className?: string }>;
status: string | null;
steps: MilestoneSectionProps['steps'];
footer?: React.ReactNode;
/** Brief one-liner shown when the milestone is in the past-strip. */
pastSummary: React.ReactNode;
}> = [
{
key: 'berth_interest',
phase: berthInterestPhase,
title: 'Berth Interest',
icon: Anchor,
// No status badge — the count IS the status. Showing "0 berths"
// would just duplicate the empty-state copy below.
status: hasLinkedBerth
? `${interest.linkedBerthCount} berth${(interest.linkedBerthCount ?? 0) === 1 ? '' : 's'}`
: null,
// No advanceStage step — the milestone tracks a state (berths
// linked) rather than a stage transition. Hide the row chrome by
// passing an empty steps array; the footer renders the action.
steps: [],
footer:
berthInterestPhase === 'current' ? (
<div className="text-xs text-muted-foreground">
Add a berth from the Recommendations tab or the client&apos;s active interest panel to
mark this milestone complete.
</div>
) : null,
pastSummary: hasLinkedBerth
? `${interest.linkedBerthCount} berth${(interest.linkedBerthCount ?? 0) === 1 ? '' : 's'} linked`
: 'Skipped',
},
{
key: 'eoi',
phase: eoiPhase,
title: 'EOI',
icon: Send,
status: interest.eoiStatus,
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',
},
],
pastSummary: interest.dateEoiSigned
? `Signed ${formatDate(interest.dateEoiSigned)}`
: 'Completed',
},
{
key: 'deposit',
phase: depositPhase,
title: 'Deposit',
icon: Wallet,
status: interest.depositStatus,
steps: [
{
label: 'Deposit received',
date: interest.dateDepositReceived,
advanceStage: 'deposit_10pct',
hideAutoButton: true,
},
],
footer:
depositPhase === 'current' && !interest.dateDepositReceived ? (
<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,
pastSummary: interest.dateDepositReceived
? `Received ${formatDate(interest.dateDepositReceived)}`
: 'Recorded',
},
{
key: 'contract',
phase: contractPhase,
title: 'Contract',
icon: FileSignature,
status: interest.contractStatus,
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',
},
],
pastSummary: interest.dateContractSigned
? `Signed ${formatDate(interest.dateContractSigned)}`
: 'Completed',
},
];
const pastMilestones = milestones.filter((m) => m.phase === 'past');
const currentMilestones = milestones.filter((m) => m.phase === 'current');
const futureMilestones = milestones.filter((m) => m.phase === 'future');
return (
<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}
{/* Sales-process milestones — phase-aware so the user only sees
what's actionable now. Past milestones collapse into a tight
history strip; the current milestone gets the full card; future
milestones are hidden behind a toggle so reps can still
skip-ahead when reality calls for it (an override-confirm
gates the actual stage move). */}
{pastMilestones.length > 0 && (
<div className="rounded-lg border bg-muted/20 px-4 py-2.5">
<div className="flex flex-wrap items-center gap-x-4 gap-y-1.5 text-xs text-muted-foreground">
<span className="text-[10px] font-semibold uppercase tracking-wide">Past</span>
{pastMilestones.map((m) => (
<span key={m.key} className="inline-flex items-center gap-1.5">
<CheckCircle2 className="size-3 text-emerald-600" />
<span className="font-medium text-foreground">{m.title}</span>
<span>·</span>
<span>{m.pastSummary}</span>
</span>
))}
</div>
</div>
)}
{currentMilestones.length > 0 && (
<div
className={cn(
'grid grid-cols-1 gap-4',
currentMilestones.length === 1 ? '' : 'lg:grid-cols-2',
)}
>
{currentMilestones.map((m) => (
<MilestoneSection
key={m.key}
title={m.title}
icon={m.icon}
status={m.status}
isPending={stageMutation.isPending}
onAdvance={advance}
currentStage={interest.pipelineStage}
isActive={activeMilestone === m.key}
steps={m.steps}
footer={m.footer}
/>
))}
</div>
)}
{futureMilestones.length > 0 && (
<FutureMilestones
milestones={futureMilestones}
stageMutation={stageMutation}
advance={advance}
activeMilestone={activeMilestone}
currentStage={interest.pipelineStage}
isActive={activeMilestone === 'eoi'}
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}
currentStage={interest.pipelineStage}
isActive={activeMilestone === 'deposit'}
steps={[
{
label: 'Deposit received',
date: interest.dateDepositReceived,
advanceStage: 'deposit_10pct',
// 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 ? (
<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
}
/>
<MilestoneSection
title="Contract"
icon={FileSignature}
status={interest.contractStatus}
isPending={stageMutation.isPending}
onAdvance={advance}
currentStage={interest.pipelineStage}
isActive={activeMilestone === 'contract'}
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>
)}
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
{/* Lead & Source (editable) */}
@@ -460,19 +715,22 @@ function OverviewTab({
{/* Most-recent threaded note teaser. Saves a click into the Notes
tab when the rep just wants to peek at "what was discussed last."
Hidden when there's nothing to show. */}
{interest.recentNote ? (
<div className="space-y-1 md:col-span-2">
<div className="mb-2 flex items-center justify-between">
<h3 className="text-sm font-medium">Latest note</h3>
<Link
href={`/${portSlug}/interests/${interestId}?tab=notes`}
className="text-xs font-medium text-primary hover:underline"
>
View all
{interest.notesCount && interest.notesCount > 1 ? ` ${interest.notesCount}` : ''}
</Link>
</div>
Always rendered now that the redundant `interests.notes` blob is
gone — falls back to an empty-state prompt so reps still have an
obvious entry point to the Notes tab from Overview. */}
<div className="space-y-1 md:col-span-2">
<div className="mb-2 flex items-center justify-between">
<h3 className="text-sm font-medium">Latest note</h3>
<Link
href={`/${portSlug}/interests/${interestId}?tab=notes`}
className="text-xs font-medium text-primary hover:underline"
>
{interest.recentNote
? `View all${interest.notesCount && interest.notesCount > 1 ? ` ${interest.notesCount}` : ''}`
: 'Add note'}
</Link>
</div>
{interest.recentNote ? (
<div className="rounded-md border border-border bg-muted/30 px-3 py-2 text-sm">
<p className="line-clamp-3 whitespace-pre-wrap text-foreground/90">
{interest.recentNote.content}
@@ -486,18 +744,11 @@ function OverviewTab({
: ''}
</p>
</div>
</div>
) : null}
{/* 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 className="rounded-md border border-dashed border-border bg-muted/10 px-3 py-2 text-xs text-muted-foreground">
No notes yet.
</div>
)}
</div>
{/* Tags */}
@@ -533,14 +784,39 @@ function OverviewTab({
export function getInterestTabs({
interestId,
currentUserId,
clientId = null,
interest,
}: InterestTabsOptions): DetailTab[] {
return [
// The EOI / Contract / Reservation tabs are stage-conditional —
// each appears only at the stages where the rep is likely to act
// on it. Hides clutter from later-stage deals where earlier docs
// are ancient history. Each tab still queries for its own past
// documents; if a deal regresses the past docs remain accessible
// via the generic Documents tab.
const stageIdx = PIPELINE_STAGES.indexOf(interest.pipelineStage as PipelineStage);
const detailsSentIdx = PIPELINE_STAGES.indexOf('details_sent');
const depositIdx = PIPELINE_STAGES.indexOf('deposit_10pct');
const contractSignedIdx = PIPELINE_STAGES.indexOf('contract_signed');
// EOI: from details_sent through contract_signed (the deal's whole life)
const showEoiTab = stageIdx >= detailsSentIdx && stageIdx <= contractSignedIdx;
// Contract: appears once the deposit's been paid (deal is committed)
// and stays visible until the contract is signed
const showContractTab = stageIdx >= depositIdx && stageIdx <= contractSignedIdx;
// Reservation: appears once the contract's signed and stays visible
// through completion (reservation is the post-contract milestone)
const showReservationTab = stageIdx >= contractSignedIdx;
const tabs: DetailTab[] = [
{
id: 'overview',
label: 'Overview',
content: <OverviewTab interestId={interestId} interest={interest} />,
},
{
id: 'contact-log',
label: 'Contact log',
content: <InterestContactLogTab interestId={interestId} />,
},
{
id: 'notes',
label: 'Notes',
@@ -548,16 +824,38 @@ export function getInterestTabs({
<NotesList entityType="interests" entityId={interestId} currentUserId={currentUserId} />
),
},
];
if (showEoiTab) {
tabs.push({
id: 'eoi',
label: 'EOI',
content: <InterestEoiTab interestId={interestId} clientId={clientId} />,
});
}
if (showContractTab) {
tabs.push({
id: 'contract',
label: 'Contract',
content: <InterestContractTab interestId={interestId} clientId={clientId} />,
});
}
if (showReservationTab) {
tabs.push({
id: 'reservation',
label: 'Reservation',
content: <InterestReservationTab interestId={interestId} clientId={clientId} />,
});
}
tabs.push(
{
id: 'documents',
label: 'Documents',
content: <InterestDocumentsTab interestId={interestId} />,
},
{
id: 'files',
label: 'Files',
content: <InterestFilesTab interestId={interestId} />,
},
{
id: 'recommendations',
label: 'Recommendations',
@@ -568,5 +866,7 @@ export function getInterestTabs({
label: 'Activity',
content: <InterestTimeline interestId={interestId} />,
},
];
);
return tabs;
}