letsbe/pn-new-crm
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

feat(interests): EOI/contract/reservation tabs + contact log + berth interest milestone + interest list overhaul

Browse Source 
Major interest workflow expansion driven by the rapid-fire UX session.

EOI / Contract / Reservation tabs replace the generic Documents tab when
the deal is at the relevant stage — workspace pattern with active-doc
hero, signing progress, paper-signed upload, and history strip. Stage-
conditional visibility wired through interest-tabs.tsx so the tab set
shrinks/expands as the deal moves through the pipeline.

Contact log: per-interaction structured log (channel/direction/summary/
optional follow-up reminder). New `interest_contact_log` table + service
+ tab UI (timeline with channel-coded icons + compose dialog).
auto-creates a reminder when followUpAt is set.

Berth Interest milestone: first milestone in the OverviewTab's pipeline
strip, completes the moment any berth is linked via the junction. Drives
the "have we captured what they want?" sanity check for general_interest
leads before they move to EOI.

Stage-conditional milestones: past phases collapse into a one-liner
strip, current phase expands, future phases hide behind a "Show
upcoming" toggle. Inline stage picker now defers reason capture to an
override-confirm view (only required for illegal transitions, not the
default flow).

Notes blob → threaded: dropped `interests.notes` column entirely; the
threaded `interest_notes` table is the single source of truth. Latest-
note teaser on Overview links into the dedicated Notes tab. Polymorphic
notes service gains aggregated client view (unions client + interest +
yacht notes with source chips and group-by-source toggle).

Berth interest list overhaul:
  - Configurable columns via ColumnPicker (18 toggleable, 5 default-on)
  - Natural-sort SQL ORDER BY on mooring number (A1, A2, A10 not A10, A2)
  - Per-letter row tinting via colored left-border accent + dot in cell
  - Documents tab merged Files (single attachments section)

Topbar improvements:
  - Always-visible back arrow on detail pages (path depth > 2)
  - Breadcrumb-hint store + useBreadcrumbHint hook so detail pages can
    push their entity hierarchy (Clients › Mary Smith › Interest › B17)
  - Tighter spacing, softer separators, 160px crumb truncation

DataTable upgrades:
  - Page-size selector with All option (validator cap raised to 1000)
  - getRowClassName slot for per-row styling (used by berth tinting)
  - Fixed Radix SelectItem crash on empty-string values via __any__
    sentinel (was crashing every list page that opened a select filter)

Interest list:
  - Configurable columns picker
  - Stage cell clickable into detail
  - TagPicker + SavedViewsDropdown sized h-8 to match adjacent buttons
  - Save view moved into ColumnPicker menu; Views button hidden when
    no views are saved
  - Pipeline kanban board endpoint at /api/v1/interests/board with
    minimal projection, 5000-row cap + truncated banner, filter
    pass-through

Mobile chrome + sidebar collapse removed (always-expanded design choice).

User management lists super-admins (was inner-joined on user_port_roles
which excluded global super-admins).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Matt
2026-05-07 20:59:28 +02:00
parent 267c2b6d1f
commit 3e4d9d6310
87 changed files with 5593 additions and 902 deletions
Download Patch File Download Diff File Expand all files Collapse all files

76
src/components/layout/breadcrumbs.tsx
View File

@@ -13,7 +13,8 @@ import {
BreadcrumbPage,
BreadcrumbSeparator,
} from '@/components/ui/breadcrumb';
import { usePortContext } from '@/providers/port-provider';
import { useUIStore } from '@/stores/ui-store';
import { useBreadcrumbStore } from '@/stores/breadcrumb-store';
// Human-readable labels for route segments
const SEGMENT_LABELS: Record<string, string> = {
@@ -51,7 +52,8 @@ function formatSegment(segment: string): string {
export function Breadcrumbs() {
const pathname = usePathname();
const { currentPort, currentPortSlug } = usePortContext();
const currentPortSlug = useUIStore((s) => s.currentPortSlug);
const hint = useBreadcrumbStore((s) => s.hints[pathname]);
// Split pathname and filter empty segments
const rawSegments = pathname.split('/').filter(Boolean);
@@ -62,22 +64,10 @@ export function Breadcrumbs() {
currentPortSlug ? rawSegments.filter((seg) => seg !== currentPortSlug) : rawSegments
).filter((seg) => !isIdSegment(seg));
if (segments.length === 0) {
return (
<Breadcrumb>
<BreadcrumbList>
<BreadcrumbItem>
<BreadcrumbPage className="text-foreground font-medium">
{currentPort?.name ?? 'Port Nimara CRM'}
</BreadcrumbPage>
</BreadcrumbItem>
</BreadcrumbList>
</Breadcrumb>
);
}
if (segments.length === 0) return null;
// Build href for each segment
const crumbs = segments.map((segment, index) => {
// Build href for each segment from the URL.
const urlCrumbs = segments.map((segment, index) => {
const segmentsUpToHere = rawSegments.slice(0, rawSegments.indexOf(segment, index) + 1);
const href = '/' + segmentsUpToHere.join('/');
const label = formatSegment(segment);
@@ -86,35 +76,37 @@ export function Breadcrumbs() {
return { label, href, isLast };
});
// When a detail page registered a hint, splice in the parent crumbs
// (e.g. the parent client name) and replace the trailing label with
// the entity's actual name (e.g. "B17"). This turns the URL-only
// "Clients › Interests" into "Clients › Mary Smith › Interest › B17"
// when the rep clicked from a client page. URL-only renders untouched
// when no hint is registered.
const crumbs = (() => {
if (!hint) return urlCrumbs;
const head = urlCrumbs.slice(0, -1).map((c) => ({ ...c, isLast: false }));
const parents = hint.parents.map((p) => ({
label: p.label,
href: p.href ?? pathname,
isLast: false,
}));
const lastUrlCrumb = urlCrumbs[urlCrumbs.length - 1];
const tail = {
label: hint.current,
href: lastUrlCrumb?.href ?? pathname,
isLast: true,
};
return [...head, ...parents, tail];
})();
return (
<Breadcrumb>
<BreadcrumbList>
{currentPort && (
<>
<BreadcrumbItem>
<BreadcrumbLink asChild>
<Link
// eslint-disable-next-line @typescript-eslint/no-explicit-any
href={`/${currentPortSlug}/dashboard` as any}
className="text-muted-foreground hover:text-foreground transition-colors"
>
{currentPort.name}
</Link>
</BreadcrumbLink>
</BreadcrumbItem>
{crumbs.length > 0 && (
<BreadcrumbSeparator>
<ChevronRight className="w-3 h-3" />
</BreadcrumbSeparator>
)}
</>
)}
<BreadcrumbList className="text-sm gap-1.5">
{crumbs.map((crumb, _index) => (
<Fragment key={crumb.href}>
<BreadcrumbItem>
{crumb.isLast ? (
<BreadcrumbPage className="font-medium text-foreground">
<BreadcrumbPage className="font-medium text-foreground truncate max-w-[160px]">
{crumb.label}
</BreadcrumbPage>
) : (
@@ -122,7 +114,7 @@ export function Breadcrumbs() {
<Link
// eslint-disable-next-line @typescript-eslint/no-explicit-any
href={crumb.href as any}
className="text-muted-foreground hover:text-foreground transition-colors"
className="text-muted-foreground hover:text-foreground transition-colors rounded px-1 -mx-1 truncate max-w-[160px]"
>
{crumb.label}
</Link>
@@ -130,7 +122,7 @@ export function Breadcrumbs() {
)}
</BreadcrumbItem>
{!crumb.isLast && (
<BreadcrumbSeparator>
<BreadcrumbSeparator className="text-muted-foreground/40">
<ChevronRight className="w-3 h-3" />
</BreadcrumbSeparator>
)}

2
src/components/layout/mobile/more-sheet.tsx
View File

@@ -9,7 +9,6 @@ import {
BellRing,
Bookmark,
Building2,
FileText,
Globe,
Home,
Mail,
@@ -43,7 +42,6 @@ const MORE_ITEMS: MoreItem[] = [
{ label: 'Interests', icon: Bookmark, segment: 'interests' },
{ label: 'Yachts', icon: Ship, segment: 'yachts' },
{ label: 'Companies', icon: Building2, segment: 'companies' },
{ label: 'Invoices', icon: FileText, segment: 'invoices' },
{ label: 'Expenses', icon: Receipt, segment: 'expenses' },
{ label: 'Inbox', icon: Mail, segment: 'email' },
{ label: 'Reservations', icon: Anchor, segment: 'berth-reservations' },

28
src/components/layout/sidebar.tsx
View File

@@ -123,7 +123,10 @@ function buildNavSections(portSlug: string | undefined): NavSection[] {
marinaRequired: true,
items: [
{ href: `${base}/expenses`, label: 'Expenses', icon: Receipt },
{ href: `${base}/invoices`, label: 'Invoices', icon: FileText },
// Invoices nav entry removed — the expense-to-PDF flow is the
// only invoicing surface now (employee expense reports). The
// standalone /invoices route still exists for any back-compat
// links but is no longer surfaced in nav.
// Dedicated explainer page covers "Add to Home Screen" install
// + walkthrough; the mobile-only scanner UI itself lives at /scan
// and is reached via the install or the explainer page button.
@@ -224,6 +227,7 @@ function SidebarContent({
collapsed,
portSlug,
portRoles,
isSuperAdmin,
hasAdminAccess,
hasMarinaAccess,
hasResidentialAccess,
@@ -234,6 +238,7 @@ function SidebarContent({
collapsed: boolean;
portSlug: string | undefined;
portRoles: SidebarProps['portRoles'];
isSuperAdmin: boolean;
hasAdminAccess: boolean;
hasMarinaAccess: boolean;
hasResidentialAccess: boolean;
@@ -246,6 +251,14 @@ function SidebarContent({
const [adminExpanded, setAdminExpanded] = useState(true);
const sections = buildNavSections(portSlug);
// Small label under the user identity when the user has access to more
// than one port — disambiguates which port is currently active without
// pulling the port name back into the breadcrumbs.
const showPortLabel = !!ports && ports.length > 1;
const currentPortName = showPortLabel
? (ports.find((p) => p.slug === portSlug)?.name ?? null)
: null;
// Pre-compute every nav href the sidebar offers across all sections so
// the active-state check can do longest-prefix-match. Without this,
// /invoices/upload-receipts would highlight both "Invoices" and "How to
@@ -403,8 +416,11 @@ function SidebarContent({
variant="outline"
className="text-[10px] px-1.5 py-0 text-[#83aab1] border-[#474e66] mt-0.5"
>
{humanizeRole(portRoles[0]?.role?.name)}
{isSuperAdmin ? 'Super Admin' : humanizeRole(portRoles[0]?.role?.name)}
</Badge>
{currentPortName && (
<p className="mt-1 text-[10px] text-[#71768a] truncate">{currentPortName}</p>
)}
</div>
</button>
}
@@ -417,8 +433,10 @@ function SidebarContent({
}
export function Sidebar({ portRoles, isSuperAdmin = false, user, ports }: SidebarProps) {
const sidebarCollapsed = useUIStore((s) => s.sidebarCollapsed);
const toggleSidebar = useUIStore((s) => s.toggleSidebar);
// Sidebar collapse removed — design preference is the always-expanded
// form. Forcibly false; the store flag stays for backwards-compat with
// any code still reading it.
const sidebarCollapsed = false;
const currentPortSlug = useUIStore((s) => s.currentPortSlug);
// Super admins see every section regardless of role rows.
@@ -448,12 +466,12 @@ export function Sidebar({ portRoles, isSuperAdmin = false, user, ports }: Sideba
collapsed={sidebarCollapsed}
portSlug={currentPortSlug ?? undefined}
portRoles={portRoles}
isSuperAdmin={isSuperAdmin}
hasAdminAccess={hasAdminAccess}
hasMarinaAccess={hasMarinaAccess}
hasResidentialAccess={hasResidentialAccess}
user={user}
ports={ports}
onToggleCollapse={toggleSidebar}
/>
</aside>
);

48
src/components/layout/topbar.tsx
View File

@@ -1,9 +1,11 @@
'use client';
import { Plus } from 'lucide-react';
import { useRouter } from 'next/navigation';
import { ChevronLeft, Plus } from 'lucide-react';
import { useRouter, usePathname } from 'next/navigation';
import { useUIStore } from '@/stores/ui-store';
import { useMobileChrome } from '@/components/layout/mobile/mobile-layout-provider';
import { cn } from '@/lib/utils';
import { Button } from '@/components/ui/button';
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
import { Separator } from '@/components/ui/separator';
@@ -28,16 +30,46 @@ interface TopbarProps {
export function Topbar({ ports, user }: TopbarProps) {
const router = useRouter();
const pathname = usePathname();
const currentPortSlug = useUIStore((s) => s.currentPortSlug);
const base = currentPortSlug ? `/${currentPortSlug}` : '';
// Reuse the existing per-page chrome state (originally built for the
// mobile topbar) so any detail page that already declares
// `showBackButton: true` automatically gets the back affordance on
// desktop too. Saves duplicating the wiring across N detail headers.
const { showBackButton: mobileShowBack } = useMobileChrome();
// Auto-show on entity-detail pages: `/[portSlug]/[section]/[id]` and
// deeper. Top-level lists like `/[portSlug]/clients` stay clean.
// The mobile-chrome flag still wins when a page explicitly opts in.
// Pages that already render their own "back to X" link inline
// (residential interest detail, expense scan flow, etc.) opt OUT
// by setting the chrome flag to false on mount — the flag override
// path here lets them suppress this auto-show.
const segments = pathname.split('/').filter(Boolean);
const isDeepPage = segments.length > 2;
const showBackButton = mobileShowBack || isDeepPage;
return (
// Three-column grid: breadcrumbs left, search center, actions right.
// The brand logo lives in the sidebar header (per design feedback) so the
// topbar center is dedicated to the global search bar.
<header className="grid h-14 grid-cols-[minmax(0,1fr)_minmax(360px,640px)_minmax(0,1fr)] items-center border-b border-border bg-background gap-3 px-4 shrink-0">
{/* LEFT: breadcrumbs / page title */}
<div className="min-w-0">
{/* LEFT: optional back button + breadcrumbs / page title */}
<div className="min-w-0 flex items-center gap-1.5">
{showBackButton && (
<button
type="button"
onClick={() => router.back()}
aria-label="Go back"
title="Go back"
className={cn(
'inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-md',
'text-muted-foreground hover:text-foreground hover:bg-accent transition-colors',
)}
>
<ChevronLeft className="h-4 w-4" />
</button>
)}
<Breadcrumbs />
</div>
@@ -100,8 +132,12 @@ export function Topbar({ ports, user }: TopbarProps) {
user={user}
ports={ports}
trigger={
<Button variant="ghost" size="icon" className="rounded-full">
<Avatar className="w-7 h-7 shadow-sm ring-2 ring-background">
// Button shrunk to match the Avatar's visible footprint so
// the hover halo lands as a tight circle behind the avatar
// (was h-11 w-11 default — the rounded-full halo extended
// well past the visible avatar and read as a square glow).
<Button variant="ghost" className="rounded-full h-9 w-9 p-0">
<Avatar className="w-7 h-7">
<AvatarImage src={undefined} />
<AvatarFallback className="bg-brand text-white text-xs font-semibold">
{(user?.name ?? 'U').slice(0, 1).toUpperCase()}