8699f81879
Replaces every em-dash and en-dash with regular ASCII hyphens across comments, JSX strings, and dev-facing logs. Mostly cosmetic but stops the inconsistent mix that crept in over the last few months (some files used em-dashes in comments, others didn't, some used both). Bundles two small dashboard-layout tweaks that touch a couple of already-modified files: - (dashboard)/layout.tsx main padding goes from p-6 to pt-3 px-6 pb-6 so page content sits closer to the topbar. - Sidebar now receives the ports list it needs for the footer port switcher. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
82 lines
3.4 KiB
TypeScript
82 lines
3.4 KiB
TypeScript
'use client';
|
|
|
|
import { useQuery } from '@tanstack/react-query';
|
|
|
|
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
|
|
import { useFeatureFlag } from '@/hooks/use-feature-flag';
|
|
import { apiFetch } from '@/lib/api/client';
|
|
import type { InterestScore } from '@/lib/services/interest-scoring.service';
|
|
|
|
// ─── Score tier helpers ───────────────────────────────────────────────────────
|
|
|
|
function getScoreTier(score: number): { label: string; className: string } {
|
|
if (score >= 80)
|
|
return { label: 'Hot', className: 'bg-green-100 text-green-800 border-green-200' };
|
|
if (score >= 60)
|
|
return { label: 'Warm', className: 'bg-yellow-100 text-yellow-800 border-yellow-200' };
|
|
if (score >= 40)
|
|
return { label: 'Cool', className: 'bg-orange-100 text-orange-800 border-orange-200' };
|
|
return { label: 'Cold', className: 'bg-gray-100 text-gray-700 border-gray-200' };
|
|
}
|
|
|
|
// ─── Component ────────────────────────────────────────────────────────────────
|
|
|
|
interface InterestScoreBadgeProps {
|
|
interestId: string;
|
|
}
|
|
|
|
export function InterestScoreBadge({ interestId }: InterestScoreBadgeProps) {
|
|
const featureEnabled = useFeatureFlag('ai_interest_scoring');
|
|
|
|
const { data, isLoading } = useQuery<{ data: InterestScore }>({
|
|
queryKey: ['interest-score', interestId],
|
|
queryFn: () => apiFetch(`/api/v1/ai/interest-score?interestId=${interestId}`),
|
|
enabled: featureEnabled,
|
|
staleTime: 60 * 60 * 1000, // 1 hour - mirrors server-side cache TTL
|
|
});
|
|
|
|
if (!featureEnabled) return null;
|
|
if (isLoading || !data) return null;
|
|
|
|
const score = data.data;
|
|
const { label, className } = getScoreTier(score.totalScore);
|
|
const { breakdown } = score;
|
|
|
|
return (
|
|
<TooltipProvider>
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>
|
|
<span
|
|
className={`inline-flex items-center gap-1 rounded-full border px-2 py-0.5 text-xs font-semibold cursor-default select-none ${className}`}
|
|
>
|
|
{label}
|
|
<span className="opacity-70">{score.totalScore}</span>
|
|
</span>
|
|
</TooltipTrigger>
|
|
<TooltipContent className="p-3 space-y-1 text-left min-w-[180px]">
|
|
<p className="font-semibold text-sm mb-2">Interest Score Breakdown</p>
|
|
<ScoreRow label="Pipeline Age" value={breakdown.pipelineAge} max={100} />
|
|
<ScoreRow label="Stage Speed" value={breakdown.stageSpeed} max={100} />
|
|
<ScoreRow label="Documents" value={breakdown.documentCompleteness} max={100} />
|
|
<ScoreRow label="Engagement" value={breakdown.engagement} max={100} />
|
|
<ScoreRow label="Berth Linked" value={breakdown.berthLinked} max={25} />
|
|
<p className="text-xs opacity-60 pt-1 border-t border-primary-foreground/20">
|
|
Total: {score.totalScore}/100
|
|
</p>
|
|
</TooltipContent>
|
|
</Tooltip>
|
|
</TooltipProvider>
|
|
);
|
|
}
|
|
|
|
function ScoreRow({ label, value, max }: { label: string; value: number; max: number }) {
|
|
return (
|
|
<div className="flex items-center justify-between gap-4 text-xs">
|
|
<span>{label}</span>
|
|
<span className="font-medium">
|
|
{value}/{max}
|
|
</span>
|
|
</div>
|
|
);
|
|
}
|