77 lines
2.6 KiB
TypeScript
77 lines
2.6 KiB
TypeScript
|
'use client';
|
||
|
|
|
||
|
|
import { AlertCircle } from 'lucide-react';
|
||
|
|
|
||
|
|
import { PIPELINE_STAGES, type PipelineStage } from '@/lib/constants';
|
||
|
|
|
||
|
|
interface SkipAheadInterest {
|
||
|
|
pipelineStage: string;
|
||
|
|
dateEoiSent?: string | null;
|
||
|
|
dateEoiSigned?: string | null;
|
||
|
|
dateReservationSigned?: string | null;
|
||
|
|
dateDepositReceived?: string | null;
|
||
|
|
dateContractSent?: string | null;
|
||
|
|
dateContractSigned?: string | null;
|
||
|
|
eoiDocStatus?: string | null;
|
||
|
|
reservationDocStatus?: string | null;
|
||
|
|
contractDocStatus?: string | null;
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Soft banner that fires when a rep skip-advanced a deal past earlier
|
||
|
|
* milestones without backfilling the matching dates / doc-status badges.
|
||
|
|
*
|
||
|
|
* Why we care: the funnel/conversion analytics rely on these timestamps to
|
||
|
|
* compute how long deals sit in each stage. A deal that jumped straight to
|
||
|
|
* deposit_paid with no dateEoiSent looks like a 0-day-EOI in the report,
|
||
|
|
* which skews the cohort.
|
||
|
|
*
|
||
|
|
* The banner is informational only — no enforcement. Reps still have the
|
||
|
|
* override path; we just nudge them to fill in the gaps.
|
||
|
|
*/
|
||
|
|
export function SkipAheadBanner({ interest }: { interest: SkipAheadInterest }) {
|
||
|
|
const stageIdx = PIPELINE_STAGES.indexOf(interest.pipelineStage as PipelineStage);
|
||
|
|
if (stageIdx < 0) return null;
|
||
|
|
const eoiIdx = PIPELINE_STAGES.indexOf('eoi');
|
||
|
|
const reservationIdx = PIPELINE_STAGES.indexOf('reservation');
|
||
|
|
const depositIdx = PIPELINE_STAGES.indexOf('deposit_paid');
|
||
|
|
|
||
|
|
const gaps: string[] = [];
|
||
|
|
// Past EOI but never stamped sent → likely a skip.
|
||
|
|
if (stageIdx > eoiIdx && !interest.dateEoiSent) gaps.push('EOI sent date');
|
||
|
|
if (stageIdx > eoiIdx && interest.eoiDocStatus !== 'signed' && !interest.dateEoiSigned) {
|
||
|
|
gaps.push('EOI signed date');
|
||
|
|
}
|
||
|
|
if (
|
||
|
|
stageIdx > reservationIdx &&
|
||
|
|
interest.reservationDocStatus !== 'signed' &&
|
||
|
|
!interest.dateReservationSigned
|
||
|
|
) {
|
||
|
|
gaps.push('Reservation signed date');
|
||
|
|
}
|
||
|
|
if (stageIdx > depositIdx && !interest.dateDepositReceived) {
|
||
|
|
gaps.push('Deposit received date');
|
||
|
|
}
|
||
|
|
|
||
|
|
if (gaps.length === 0) return null;
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div
|
||
|
|
role="status"
|
||
|
|
className="flex items-start gap-2 rounded-md border border-amber-200 bg-amber-50 px-3 py-2 text-xs text-amber-900"
|
||
|
|
>
|
||
|
|
<AlertCircle className="size-3.5 mt-0.5 shrink-0" aria-hidden />
|
||
|
|
<div>
|
||
|
|
<p className="font-medium">
|
||
|
|
{gaps.length === 1
|
||
|
|
? 'A past milestone is missing its date.'
|
||
|
|
: `${gaps.length} past milestones are missing their dates.`}
|
||
|
|
</p>
|
||
|
|
<p className="mt-0.5 text-amber-800">
|
||
|
|
Backfill {gaps.join(' · ')} below so reports show accurate cycle times.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|