feat(sales-ux): triage signals, reminders, realtime toasts, mobile FAB
Sales-CRM workflow batch — closes audit recommendations #2, #3, #4, #6, #7, #8, #9, #10, #13, #15. Skips #11 (My-pipeline filter — needs a real assignee column on interests, defer until ownership model lands) and #12 (keyboard shortcuts — explicit user call). Interest list (the rep's main triage surface): - Last activity column replaces Created (sortable by dateLastContact). Postgres NULLs-last on DESC means never-contacted leads sort to the bottom — exactly the right triage default. - Comment-icon next to client name when notesCount > 0, with a tooltip showing the count. Cheap, glanceable signal that the lead has correspondence to peek at. - Urgency badges under stage when criteria fire: "Silent Nd" for mid-funnel interests with no contact in 7+ days, "EOI Nd" for EOIs awaiting signature 14+ days, "Deposit Nd" for eoi_signed interests with no deposit after 21 days. Pure derived — no extra fetch, computed from the dates the row already returns. - Bulk select checkbox column with bulk-archive (existing DataTable.bulkActions API; just wired with a confirm-dialog and a Promise.all fan-out). - Mobile FAB (+) for new interest, anchored above the bottom-tab bar with safe-area inset awareness. All four signals mirrored on the mobile InterestCard (comment icon, urgency badges, last-activity footer). Interest detail: - Reminder bell badge in the header showing pending/snoozed reminder count linked to the interest. Surfaced via getInterestById's new `activeReminderCount`. - "Latest note" teaser on the Overview tab — truncated 3-line preview of the most recent threaded note + relative time + "View all" link to the Notes tab. Saves a click for the common "what was discussed last?" peek. - Color-block swatches in InlineStagePicker dropdown (rounded-sm mini-bars in the stage's progressive saturation color, replacing the previous tiny dots). Reads as a visual scan instead of a list. Dashboard: - MyRemindersRail on the right sidebar above the existing AlertRail. Shows pending+snoozed reminders for the current user (overdue first), each with priority pill, relative due time, and click-through to the linked interest/client/berth. Berth detail: - BerthInterestPulse card at the top of the Overview tab, replacing the old "buried in tab" pattern. Shows up to 5 active interests with avatar, stage pill, urgency badges, and last-activity. Mirrors the old Nuxt CRM's beloved "Interested Parties" panel but with the new triage signals. Realtime toasts: - New <RealtimeToasts /> mounted inside SocketProvider in the dashboard layout. Subscribes to interest:stageChanged, document:completed, document:signer:signed, and interest:outcomeSet — fires sonner toasts so reps watching any page learn about pipeline events without refreshing. Service layer: - listInterests: notesCount per row (left join + count + groupBy). - getInterestById: clientPrimaryPhone + clientPrimaryPhoneE164 (for the Email/Call/WhatsApp buttons added last commit; phone pieces were missing), notesCount, recentNote, activeReminderCount. - sortColumn switch handles 'dateLastContact' explicitly; default stays 'updatedAt'. tsc clean. vitest 835/835 pass. 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
163
src/components/interests/inline-stage-picker.tsx
Normal file
163
src/components/interests/inline-stage-picker.tsx
Normal file
@@ -0,0 +1,163 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
import { useMutation, useQueryClient } from '@tanstack/react-query';
|
||||
import { Check, ChevronDown, Loader2 } from 'lucide-react';
|
||||
import { toast } from 'sonner';
|
||||
|
||||
import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
|
||||
import { Textarea } from '@/components/ui/textarea';
|
||||
import { apiFetch } from '@/lib/api/client';
|
||||
import { cn } from '@/lib/utils';
|
||||
import {
|
||||
PIPELINE_STAGES,
|
||||
STAGE_BADGE,
|
||||
STAGE_DOT,
|
||||
STAGE_LABELS,
|
||||
safeStage,
|
||||
type PipelineStage,
|
||||
} from '@/components/clients/pipeline-constants';
|
||||
|
||||
interface InlineStagePickerProps {
|
||||
interestId: string;
|
||||
currentStage: string;
|
||||
/** Whether to render the chevron after the stage label. Default true. */
|
||||
showChevron?: boolean;
|
||||
/** Stop the parent's click propagation when used inside a clickable card. */
|
||||
stopPropagation?: boolean;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* Click-to-change stage chip. Replaces the modal-based InterestStagePicker
|
||||
* for inline editing — user clicks the chip, picks a new stage from the
|
||||
* popover (with optional reason), commits in one click. The popover stays
|
||||
* compact: a small reason field above the stage list, and clicking any stage
|
||||
* fires the mutation immediately.
|
||||
*/
|
||||
export function InlineStagePicker({
|
||||
interestId,
|
||||
currentStage,
|
||||
showChevron = true,
|
||||
stopPropagation = false,
|
||||
className,
|
||||
}: InlineStagePickerProps) {
|
||||
const queryClient = useQueryClient();
|
||||
const [open, setOpen] = useState(false);
|
||||
const [reason, setReason] = useState('');
|
||||
const [pendingStage, setPendingStage] = useState<string | null>(null);
|
||||
|
||||
const stage = safeStage(currentStage);
|
||||
|
||||
const mutation = useMutation({
|
||||
mutationFn: async (next: PipelineStage) =>
|
||||
apiFetch(`/api/v1/interests/${interestId}/stage`, {
|
||||
method: 'PATCH',
|
||||
body: { pipelineStage: next, reason: reason.trim() || undefined },
|
||||
}),
|
||||
onSuccess: (_data, next) => {
|
||||
queryClient.invalidateQueries({ queryKey: ['interests', interestId] });
|
||||
queryClient.invalidateQueries({ queryKey: ['interests'] });
|
||||
setOpen(false);
|
||||
setReason('');
|
||||
setPendingStage(null);
|
||||
toast.success(`Stage moved to ${STAGE_LABELS[next]}`);
|
||||
},
|
||||
onError: (err) => {
|
||||
setPendingStage(null);
|
||||
toast.error(err instanceof Error ? err.message : 'Failed to change stage');
|
||||
},
|
||||
});
|
||||
|
||||
function pick(next: PipelineStage) {
|
||||
if (next === stage) {
|
||||
setOpen(false);
|
||||
return;
|
||||
}
|
||||
setPendingStage(next);
|
||||
mutation.mutate(next);
|
||||
}
|
||||
|
||||
return (
|
||||
<Popover
|
||||
open={open}
|
||||
onOpenChange={(o) => {
|
||||
if (!mutation.isPending) setOpen(o);
|
||||
}}
|
||||
>
|
||||
<PopoverTrigger asChild>
|
||||
<button
|
||||
type="button"
|
||||
onClick={(e) => {
|
||||
if (stopPropagation) e.stopPropagation();
|
||||
}}
|
||||
className={cn(
|
||||
'inline-flex items-center gap-1 rounded-full px-2.5 py-0.5 text-sm font-medium',
|
||||
'transition-colors hover:brightness-95 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
|
||||
STAGE_BADGE[stage],
|
||||
className,
|
||||
)}
|
||||
aria-label={`Pipeline stage: ${STAGE_LABELS[stage]}. Click to change.`}
|
||||
>
|
||||
<span>{STAGE_LABELS[stage]}</span>
|
||||
{mutation.isPending ? (
|
||||
<Loader2 className="size-3 animate-spin" />
|
||||
) : showChevron ? (
|
||||
<ChevronDown className="size-3 opacity-70" />
|
||||
) : null}
|
||||
</button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent
|
||||
align="start"
|
||||
className="w-64 p-0"
|
||||
onClick={(e) => stopPropagation && e.stopPropagation()}
|
||||
>
|
||||
<div className="border-b px-2 py-1">
|
||||
<Textarea
|
||||
value={reason}
|
||||
onChange={(e) => setReason(e.target.value)}
|
||||
placeholder="Reason (optional)…"
|
||||
rows={1}
|
||||
className="min-h-0 resize-none border-none bg-transparent px-0 py-0.5 text-xs leading-tight shadow-none focus-visible:ring-0"
|
||||
disabled={mutation.isPending}
|
||||
/>
|
||||
</div>
|
||||
<ul role="listbox" aria-label="Pipeline stages" className="py-1">
|
||||
{PIPELINE_STAGES.map((s) => {
|
||||
const isCurrent = s === stage;
|
||||
const isPending = pendingStage === s && mutation.isPending;
|
||||
return (
|
||||
<li key={s}>
|
||||
<button
|
||||
type="button"
|
||||
role="option"
|
||||
aria-selected={isCurrent}
|
||||
disabled={mutation.isPending}
|
||||
onClick={() => pick(s)}
|
||||
className={cn(
|
||||
'flex w-full items-center gap-2 px-3 py-1.5 text-left text-sm',
|
||||
'transition-colors hover:bg-muted/60 disabled:opacity-60',
|
||||
isCurrent && 'font-medium',
|
||||
)}
|
||||
>
|
||||
{/* Colored chip (mirrors the inline stage badge) — turns
|
||||
the picker into a visual scan rather than just a list. */}
|
||||
<span
|
||||
className={cn('inline-flex h-5 w-3 shrink-0 rounded-sm', STAGE_DOT[s])}
|
||||
aria-hidden
|
||||
/>
|
||||
<span className="flex-1">{STAGE_LABELS[s]}</span>
|
||||
{isPending ? (
|
||||
<Loader2 className="size-3.5 animate-spin text-muted-foreground" />
|
||||
) : isCurrent ? (
|
||||
<Check className="size-3.5 text-muted-foreground" />
|
||||
) : null}
|
||||
</button>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
);
|
||||
}
|
||||
@@ -1,6 +1,7 @@
|
||||
'use client';
|
||||
|
||||
import { Anchor, Archive, Compass, MoreHorizontal, Pencil } from 'lucide-react';
|
||||
import { Anchor, Archive, Compass, MessageSquare, MoreHorizontal, Pencil } from 'lucide-react';
|
||||
import { formatDistanceToNowStrict } from 'date-fns';
|
||||
|
||||
import { Button } from '@/components/ui/button';
|
||||
import {
|
||||
@@ -18,6 +19,7 @@ import {
|
||||
} from '@/components/shared/list-card';
|
||||
import { cn } from '@/lib/utils';
|
||||
import { stageBadgeClass, stageDotClass, stageLabel as toStageLabel } from '@/lib/constants';
|
||||
import { computeUrgencyBadges } from '@/components/interests/urgency';
|
||||
import type { InterestRow } from './interest-columns';
|
||||
|
||||
const CATEGORY_LABELS: Record<string, string> = {
|
||||
@@ -48,9 +50,15 @@ export function InterestCard({ interest, portSlug, onEdit, onArchive }: Interest
|
||||
const categoryLabel = interest.leadCategory ? CATEGORY_LABELS[interest.leadCategory] : null;
|
||||
const sourceLabel = interest.source ? (SOURCE_LABELS[interest.source] ?? interest.source) : null;
|
||||
const tags = interest.tags ?? [];
|
||||
const notesCount = interest.notesCount ?? 0;
|
||||
const urgencyBadges = computeUrgencyBadges(interest);
|
||||
|
||||
const clientName = interest.clientName ?? 'Unknown client';
|
||||
const berthLabel = interest.berthMooringNumber;
|
||||
const lastIso = interest.dateLastContact ?? interest.updatedAt ?? null;
|
||||
const lastActivity = lastIso
|
||||
? formatDistanceToNowStrict(new Date(lastIso), { addSuffix: true })
|
||||
: null;
|
||||
|
||||
return (
|
||||
<ListCard
|
||||
@@ -86,11 +94,22 @@ export function InterestCard({ interest, portSlug, onEdit, onArchive }: Interest
|
||||
<div className="flex items-start gap-3">
|
||||
<ListCardAvatar initials={deriveInitials(clientName)} />
|
||||
<div className="min-w-0 flex-1">
|
||||
{/* Title row: name + spacer for the absolutely-positioned actions menu */}
|
||||
{/* Title row: name + comment-icon when notes exist + spacer for actions */}
|
||||
<div className="flex items-start justify-between gap-2">
|
||||
<h3 className="truncate text-base font-semibold tracking-tight text-foreground">
|
||||
{clientName}
|
||||
</h3>
|
||||
<div className="flex min-w-0 items-center gap-1.5">
|
||||
<h3 className="truncate text-base font-semibold tracking-tight text-foreground">
|
||||
{clientName}
|
||||
</h3>
|
||||
{notesCount > 0 ? (
|
||||
<span
|
||||
title={`${notesCount} note${notesCount === 1 ? '' : 's'}`}
|
||||
aria-label={`${notesCount} note${notesCount === 1 ? '' : 's'}`}
|
||||
className="inline-flex shrink-0 items-center text-muted-foreground"
|
||||
>
|
||||
<MessageSquare className="size-3.5" />
|
||||
</span>
|
||||
) : null}
|
||||
</div>
|
||||
<span aria-hidden className="block h-9 w-9 shrink-0" />
|
||||
</div>
|
||||
|
||||
@@ -135,6 +154,23 @@ export function InterestCard({ interest, portSlug, onEdit, onArchive }: Interest
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
{urgencyBadges.length > 0 ? (
|
||||
<div className="mt-1.5 flex flex-wrap gap-1">
|
||||
{urgencyBadges.map((b) => (
|
||||
<span
|
||||
key={b.id}
|
||||
title={b.detail}
|
||||
className={cn(
|
||||
'inline-flex items-center rounded-full px-1.5 py-0.5 text-[10px] font-medium',
|
||||
b.className,
|
||||
)}
|
||||
>
|
||||
{b.label}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
{tags.length > 0 ? (
|
||||
<div className="mt-2 flex flex-wrap gap-1">
|
||||
{tags.slice(0, 2).map((tag) => (
|
||||
@@ -147,6 +183,12 @@ export function InterestCard({ interest, portSlug, onEdit, onArchive }: Interest
|
||||
) : null}
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
{lastActivity ? (
|
||||
<p className="mt-1.5 text-[11px] text-muted-foreground tabular-nums">
|
||||
Last activity {lastActivity}
|
||||
</p>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
</ListCard>
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
'use client';
|
||||
|
||||
import Link from 'next/link';
|
||||
import { format } from 'date-fns';
|
||||
import { MoreHorizontal, Pencil, Archive } from 'lucide-react';
|
||||
import { format, formatDistanceToNowStrict } from 'date-fns';
|
||||
import { MoreHorizontal, Pencil, Archive, MessageSquare } from 'lucide-react';
|
||||
import type { ColumnDef } from '@tanstack/react-table';
|
||||
|
||||
import { Button } from '@/components/ui/button';
|
||||
@@ -15,6 +15,7 @@ import {
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { TagBadge } from '@/components/shared/tag-badge';
|
||||
import { stageBadgeClass, stageLabel } from '@/lib/constants';
|
||||
import { computeUrgencyBadges, type InterestUrgencyInput } from '@/components/interests/urgency';
|
||||
|
||||
export interface InterestRow {
|
||||
id: string;
|
||||
@@ -27,6 +28,15 @@ export interface InterestRow {
|
||||
source: string | null;
|
||||
archivedAt: string | null;
|
||||
createdAt: string;
|
||||
/** Surfaced by listInterests for the row-level sales-triage signals
|
||||
* (last-activity relative time, comment-icon, urgency badges). */
|
||||
updatedAt?: string;
|
||||
dateLastContact?: string | null;
|
||||
dateEoiSent?: string | null;
|
||||
dateDepositReceived?: string | null;
|
||||
eoiStatus?: string | null;
|
||||
outcome?: string | null;
|
||||
notesCount?: number;
|
||||
tags?: Array<{ id: string; name: string; color: string }>;
|
||||
}
|
||||
|
||||
@@ -59,15 +69,29 @@ export function getInterestColumns({
|
||||
id: 'clientName',
|
||||
accessorKey: 'clientName',
|
||||
header: 'Client',
|
||||
cell: ({ row }) => (
|
||||
<Link
|
||||
href={`/${portSlug}/clients/${row.original.clientId}`}
|
||||
className="font-medium text-primary hover:underline"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
{row.original.clientName ?? '—'}
|
||||
</Link>
|
||||
),
|
||||
cell: ({ row }) => {
|
||||
const notesCount = row.original.notesCount ?? 0;
|
||||
return (
|
||||
<div className="flex items-center gap-1.5 min-w-0">
|
||||
<Link
|
||||
href={`/${portSlug}/clients/${row.original.clientId}`}
|
||||
className="truncate font-medium text-primary hover:underline"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
{row.original.clientName ?? '—'}
|
||||
</Link>
|
||||
{notesCount > 0 ? (
|
||||
<span
|
||||
title={`${notesCount} note${notesCount === 1 ? '' : 's'}`}
|
||||
aria-label={`${notesCount} note${notesCount === 1 ? '' : 's'}`}
|
||||
className="inline-flex items-center text-muted-foreground"
|
||||
>
|
||||
<MessageSquare className="size-3.5" />
|
||||
</span>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'berthMooringNumber',
|
||||
@@ -92,14 +116,31 @@ export function getInterestColumns({
|
||||
id: 'pipelineStage',
|
||||
accessorKey: 'pipelineStage',
|
||||
header: 'Stage',
|
||||
cell: ({ getValue }) => {
|
||||
const stage = getValue() as string;
|
||||
cell: ({ row }) => {
|
||||
const stage = row.original.pipelineStage;
|
||||
const badges = computeUrgencyBadges(row.original satisfies InterestUrgencyInput);
|
||||
return (
|
||||
<span
|
||||
className={`inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium ${stageBadgeClass(stage)}`}
|
||||
>
|
||||
{stageLabel(stage)}
|
||||
</span>
|
||||
<div className="flex flex-col gap-1 items-start">
|
||||
<span
|
||||
className={`inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium ${stageBadgeClass(stage)}`}
|
||||
>
|
||||
{stageLabel(stage)}
|
||||
</span>
|
||||
{badges.length > 0 ? (
|
||||
<div className="flex flex-wrap gap-1">
|
||||
{badges.map((b) => (
|
||||
<span
|
||||
key={b.id}
|
||||
title={b.detail}
|
||||
aria-label={b.detail}
|
||||
className={`inline-flex items-center rounded-full px-1.5 py-0.5 text-[10px] font-medium ${b.className}`}
|
||||
>
|
||||
{b.label}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
},
|
||||
},
|
||||
@@ -153,14 +194,24 @@ export function getInterestColumns({
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'createdAt',
|
||||
accessorKey: 'createdAt',
|
||||
header: 'Created',
|
||||
cell: ({ getValue }) => (
|
||||
<span className="text-muted-foreground text-sm">
|
||||
{format(new Date(getValue() as string), 'MMM d, yyyy')}
|
||||
</span>
|
||||
),
|
||||
// Sales-triage default: prefer the explicit dateLastContact, fall back
|
||||
// to updatedAt. Sortable on dateLastContact server-side; the column
|
||||
// header label ("Last activity") makes the fallback semantics clear.
|
||||
id: 'dateLastContact',
|
||||
accessorKey: 'dateLastContact',
|
||||
header: 'Last activity',
|
||||
cell: ({ row }) => {
|
||||
const lastIso = row.original.dateLastContact ?? row.original.updatedAt ?? null;
|
||||
if (!lastIso) {
|
||||
return <span className="text-muted-foreground text-sm">—</span>;
|
||||
}
|
||||
const d = new Date(lastIso);
|
||||
return (
|
||||
<span className="text-muted-foreground text-sm tabular-nums" title={format(d, 'PPpp')}>
|
||||
{formatDistanceToNowStrict(d, { addSuffix: true })}
|
||||
</span>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'actions',
|
||||
|
||||
@@ -12,6 +12,7 @@ import {
|
||||
Mail,
|
||||
MessageCircle,
|
||||
Phone,
|
||||
AlarmClock,
|
||||
} from 'lucide-react';
|
||||
import Link from 'next/link';
|
||||
|
||||
@@ -53,6 +54,10 @@ interface InterestDetailHeaderProps {
|
||||
clientPrimaryEmail?: string | null;
|
||||
clientPrimaryPhone?: string | null;
|
||||
clientPrimaryPhoneE164?: string | null;
|
||||
/** Pending/snoozed reminders attached to this interest. Drives the
|
||||
* alarm-bell badge on the header — surfaces follow-ups so the rep
|
||||
* doesn't have to remember to check /reminders. */
|
||||
activeReminderCount?: number;
|
||||
berthId: string | null;
|
||||
berthMooringNumber: string | null;
|
||||
pipelineStage: string;
|
||||
@@ -203,6 +208,17 @@ export function InterestDetailHeader({ portSlug, interest }: InterestDetailHeade
|
||||
/>
|
||||
</PermissionGate>
|
||||
)}
|
||||
{(interest.activeReminderCount ?? 0) > 0 ? (
|
||||
<span
|
||||
className="inline-flex items-center gap-1 rounded-full border border-amber-200 bg-amber-50 px-2 py-0.5 text-[11px] font-medium text-amber-800"
|
||||
title={`${interest.activeReminderCount} pending reminder${
|
||||
interest.activeReminderCount === 1 ? '' : 's'
|
||||
}`}
|
||||
>
|
||||
<AlarmClock className="size-3" />
|
||||
{interest.activeReminderCount}
|
||||
</span>
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
{meta.length > 0 ? (
|
||||
|
||||
@@ -28,6 +28,17 @@ interface InterestData {
|
||||
/** True when the linked client has any primary address row. Used by
|
||||
* the EOI prereq checklist on the Documents tab. */
|
||||
clientHasAddress: boolean;
|
||||
/** Surfaced for the bell badge on the detail header (pending/snoozed
|
||||
* reminders linked to this interest). */
|
||||
activeReminderCount?: number;
|
||||
/** Surfaced for the most-recent-note teaser on the Overview tab. */
|
||||
notesCount?: number;
|
||||
recentNote?: {
|
||||
id: string;
|
||||
content: string;
|
||||
authorId: string;
|
||||
createdAt: string;
|
||||
} | null;
|
||||
berthId: string | null;
|
||||
berthMooringNumber: string | null;
|
||||
pipelineStage: string;
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
|
||||
import { useState } from 'react';
|
||||
import { useParams } from 'next/navigation';
|
||||
import { Plus, LayoutList, Kanban } from 'lucide-react';
|
||||
import { Plus, LayoutList, Kanban, Archive } from 'lucide-react';
|
||||
import { useMutation, useQueryClient } from '@tanstack/react-query';
|
||||
|
||||
import { Button } from '@/components/ui/button';
|
||||
@@ -69,6 +69,18 @@ export function InterestList() {
|
||||
},
|
||||
});
|
||||
|
||||
const bulkArchiveMutation = useMutation({
|
||||
mutationFn: async (ids: string[]) => {
|
||||
// Concurrent fan-out — small batches in practice (page size cap = 100).
|
||||
// If a single delete fails the others still run; the rejected one
|
||||
// surfaces a toast via the standard apiFetch error path.
|
||||
await Promise.all(ids.map((id) => apiFetch(`/api/v1/interests/${id}`, { method: 'DELETE' })));
|
||||
},
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ['interests'] });
|
||||
},
|
||||
});
|
||||
|
||||
const columns = getInterestColumns({
|
||||
portSlug,
|
||||
onEdit: (interest) => setEditInterest(interest),
|
||||
@@ -146,6 +158,24 @@ export function InterestList() {
|
||||
onSortChange={setSort}
|
||||
isLoading={isFetching && !isLoading}
|
||||
getRowId={(row) => row.id}
|
||||
bulkActions={[
|
||||
{
|
||||
label: 'Archive',
|
||||
icon: Archive,
|
||||
variant: 'destructive',
|
||||
onClick: (ids) => {
|
||||
if (ids.length === 0) return;
|
||||
if (
|
||||
!window.confirm(
|
||||
`Archive ${ids.length} interest${ids.length === 1 ? '' : 's'}? This can be undone from the archived list.`,
|
||||
)
|
||||
) {
|
||||
return;
|
||||
}
|
||||
bulkArchiveMutation.mutate(ids);
|
||||
},
|
||||
},
|
||||
]}
|
||||
cardRender={(row) => (
|
||||
<InterestCard
|
||||
interest={row.original}
|
||||
@@ -164,6 +194,20 @@ export function InterestList() {
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Mobile FAB — primary "New interest" affordance for the bottom-tab UX.
|
||||
Sits above the bottom nav (pb-safe-bottom + 70px tab height + 16px
|
||||
gap). Hidden on lg+ where the header button already does the job. */}
|
||||
<PermissionGate resource="interests" action="create">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setCreateOpen(true)}
|
||||
aria-label="New interest"
|
||||
className="fixed bottom-[calc(env(safe-area-inset-bottom)+86px)] right-4 z-40 inline-flex h-12 w-12 items-center justify-center rounded-full bg-primary text-primary-foreground shadow-lg transition-transform hover:scale-105 active:scale-95 lg:hidden"
|
||||
>
|
||||
<Plus className="h-6 w-6" />
|
||||
</button>
|
||||
</PermissionGate>
|
||||
|
||||
<InterestForm open={createOpen} onOpenChange={setCreateOpen} />
|
||||
|
||||
{editInterest && (
|
||||
|
||||
@@ -48,6 +48,15 @@ interface InterestTabsOptions {
|
||||
reminderDays: number | null;
|
||||
reminderLastFired: string | null;
|
||||
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. */
|
||||
notesCount?: number;
|
||||
recentNote?: {
|
||||
id: string;
|
||||
content: string;
|
||||
authorId: string;
|
||||
createdAt: string;
|
||||
} | null;
|
||||
tags?: Array<{ id: string; name: string; color: string }>;
|
||||
};
|
||||
}
|
||||
@@ -431,6 +440,37 @@ function OverviewTab({
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 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>
|
||||
<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}
|
||||
</p>
|
||||
<p className="mt-1 text-xs text-muted-foreground">
|
||||
{formatDistanceToNowStrict(new Date(interest.recentNote.createdAt), {
|
||||
addSuffix: true,
|
||||
})}
|
||||
{interest.recentNote.authorId
|
||||
? ` · ${interest.recentNote.authorId === 'system' ? 'system' : interest.recentNote.authorId}`
|
||||
: ''}
|
||||
</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>
|
||||
|
||||
91
src/components/interests/urgency.ts
Normal file
91
src/components/interests/urgency.ts
Normal file
@@ -0,0 +1,91 @@
|
||||
/**
|
||||
* Sales-triage urgency badges for interest list rows + cards.
|
||||
*
|
||||
* Derived purely from the dates we already return on the row, so this is a
|
||||
* pure function — no DB hits, no extra fetch. Mirrors the logic the
|
||||
* server-side alert-rules engine uses, but for at-a-glance rendering on
|
||||
* the list itself.
|
||||
*/
|
||||
|
||||
const SILENT_DAYS_THRESHOLD = 7;
|
||||
const EOI_AWAITING_DAYS_THRESHOLD = 14;
|
||||
const DEPOSIT_PENDING_DAYS_THRESHOLD = 21;
|
||||
|
||||
const ACTIVE_MID_FUNNEL_STAGES = new Set(['details_sent', 'in_communication']);
|
||||
|
||||
export interface InterestUrgencyInput {
|
||||
pipelineStage: string;
|
||||
outcome?: string | null;
|
||||
archivedAt?: string | null;
|
||||
dateLastContact?: string | null;
|
||||
updatedAt?: string;
|
||||
dateEoiSent?: string | null;
|
||||
eoiStatus?: string | null;
|
||||
dateDepositReceived?: string | null;
|
||||
}
|
||||
|
||||
export interface UrgencyBadge {
|
||||
/** Stable id for keying. */
|
||||
id: 'silent' | 'eoi_awaiting' | 'deposit_pending';
|
||||
label: string;
|
||||
/** Long form for tooltip / aria-label. */
|
||||
detail: string;
|
||||
/** Tailwind classes for the pill. */
|
||||
className: string;
|
||||
}
|
||||
|
||||
function daysSince(iso: string | null | undefined): number | null {
|
||||
if (!iso) return null;
|
||||
const t = new Date(iso).getTime();
|
||||
if (Number.isNaN(t)) return null;
|
||||
return Math.floor((Date.now() - t) / 86_400_000);
|
||||
}
|
||||
|
||||
export function computeUrgencyBadges(row: InterestUrgencyInput): UrgencyBadge[] {
|
||||
// Closed / archived interests don't need triage signals.
|
||||
if (row.archivedAt || row.outcome) return [];
|
||||
|
||||
const badges: UrgencyBadge[] = [];
|
||||
|
||||
// Silent in mid-funnel stages — most actionable.
|
||||
if (ACTIVE_MID_FUNNEL_STAGES.has(row.pipelineStage)) {
|
||||
const lastTouchIso = row.dateLastContact ?? row.updatedAt ?? null;
|
||||
const days = daysSince(lastTouchIso);
|
||||
if (days !== null && days >= SILENT_DAYS_THRESHOLD) {
|
||||
badges.push({
|
||||
id: 'silent',
|
||||
label: `Silent ${days}d`,
|
||||
detail: `No contact in ${days} days`,
|
||||
className: 'bg-amber-100 text-amber-800 border border-amber-200',
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// EOI sent but not signed for too long.
|
||||
if (row.eoiStatus === 'waiting_for_signatures') {
|
||||
const days = daysSince(row.dateEoiSent);
|
||||
if (days !== null && days >= EOI_AWAITING_DAYS_THRESHOLD) {
|
||||
badges.push({
|
||||
id: 'eoi_awaiting',
|
||||
label: `EOI ${days}d`,
|
||||
detail: `EOI awaiting signature for ${days} days`,
|
||||
className: 'bg-orange-100 text-orange-800 border border-orange-200',
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// EOI signed but deposit not received.
|
||||
if (row.pipelineStage === 'eoi_signed' && !row.dateDepositReceived && row.dateEoiSent) {
|
||||
const days = daysSince(row.dateEoiSent);
|
||||
if (days !== null && days >= DEPOSIT_PENDING_DAYS_THRESHOLD) {
|
||||
badges.push({
|
||||
id: 'deposit_pending',
|
||||
label: `Deposit ${days}d`,
|
||||
detail: `Awaiting deposit for ${days} days since EOI sent`,
|
||||
className: 'bg-rose-100 text-rose-800 border border-rose-200',
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
return badges;
|
||||
}
|
||||
Reference in New Issue
Block a user