a767652d74
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>
86 lines
2.8 KiB
TypeScript
86 lines
2.8 KiB
TypeScript
'use client';
|
|
|
|
import { useState } from 'react';
|
|
|
|
import { useRealtimeInvalidation } from '@/hooks/use-realtime-invalidation';
|
|
import { PageHeader } from '@/components/shared/page-header';
|
|
import { KpiCardsWithBoundary } from './kpi-cards';
|
|
import { ActivityFeed } from './activity-feed';
|
|
import { DateRangePicker } from './date-range-picker';
|
|
import { PipelineFunnelChart } from './pipeline-funnel-chart';
|
|
import { OccupancyTimelineChart } from './occupancy-timeline-chart';
|
|
import { RevenueBreakdownChart } from './revenue-breakdown-chart';
|
|
import { LeadSourceChart } from './lead-source-chart';
|
|
import { MyRemindersRail } from './my-reminders-rail';
|
|
import { WidgetErrorBoundary } from './widget-error-boundary';
|
|
import { AlertRail } from '@/components/alerts/alert-rail';
|
|
import type { DateRange } from '@/lib/services/analytics.service';
|
|
|
|
const RANGE_LABELS: Record<DateRange, string> = {
|
|
today: 'Today',
|
|
'7d': 'Last 7 days',
|
|
'30d': 'Last 30 days',
|
|
'90d': 'Last 90 days',
|
|
};
|
|
|
|
export function DashboardShell() {
|
|
const [range, setRange] = useState<DateRange>('30d');
|
|
|
|
useRealtimeInvalidation({
|
|
'interest:stageChanged': [
|
|
['analytics', 'pipeline_funnel', range],
|
|
['analytics', 'lead_source_attribution', range],
|
|
['dashboard', 'kpis'],
|
|
],
|
|
'client:created': [['dashboard', 'kpis']],
|
|
'berth:statusChanged': [
|
|
['analytics', 'occupancy_timeline', range],
|
|
['dashboard', 'kpis'],
|
|
],
|
|
});
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
<PageHeader
|
|
title="Dashboard"
|
|
eyebrow="Overview"
|
|
description="Live snapshot of your marina activity"
|
|
kpiLine={<span>{RANGE_LABELS[range]}</span>}
|
|
variant="gradient"
|
|
actions={<DateRangePicker value={range} onChange={setRange} />}
|
|
/>
|
|
|
|
<div className="grid gap-3 grid-cols-2 sm:gap-4 lg:grid-cols-4">
|
|
<KpiCardsWithBoundary />
|
|
</div>
|
|
|
|
<div className="grid gap-4 grid-cols-1 xl:grid-cols-[minmax(0,1fr)_320px]">
|
|
<div className="grid gap-4 grid-cols-1 lg:grid-cols-2">
|
|
<WidgetErrorBoundary>
|
|
<PipelineFunnelChart range={range} />
|
|
</WidgetErrorBoundary>
|
|
<WidgetErrorBoundary>
|
|
<OccupancyTimelineChart range={range} />
|
|
</WidgetErrorBoundary>
|
|
<WidgetErrorBoundary>
|
|
<RevenueBreakdownChart range={range} />
|
|
</WidgetErrorBoundary>
|
|
<WidgetErrorBoundary>
|
|
<LeadSourceChart range={range} />
|
|
</WidgetErrorBoundary>
|
|
</div>
|
|
<aside className="min-w-0 space-y-4">
|
|
<WidgetErrorBoundary>
|
|
<MyRemindersRail />
|
|
</WidgetErrorBoundary>
|
|
<WidgetErrorBoundary>
|
|
<AlertRail />
|
|
</WidgetErrorBoundary>
|
|
</aside>
|
|
</div>
|
|
|
|
<ActivityFeed />
|
|
</div>
|
|
);
|
|
}
|