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
@@ -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',
|
||||
|
||||
Reference in New Issue
Block a user