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

feat(launch-readiness-batch): UAT drains, navigation refactor, launch infra, trackers

Browse Source 
Bundles the rest of the in-flight work from this UAT round into one
checkpoint. Each sub-area is independent; see the headings below.

UAT polish (drained 11 findings from active-uat.md):
- Dialog primitive default bumped sm:max-w-xl/lg:max-w-3xl →
  sm:max-w-2xl/lg:max-w-4xl so multi-field forms + PDF previews
  aren't cramped at 1440-1920px.
- Notes tab badge aggregation: new countFor{Client,Yacht,Company}
  Aggregated helpers in notes.service mirror the listFor*Aggregated
  symmetric-reach joins. yacht-tabs + company-tabs render the
  badge; client-tabs already had badge support.
- Supplemental-info form polish bundle: BrandedAuthShell gains a
  `width: 'sm' | 'md'` prop (md uses min-h-dvh scroll instead of
  fixed inset-0 pin so long forms scroll naturally). Form picks up
  port branding (logoUrl + backgroundUrl + appName) via
  loadByToken. Address fields completed (street + city + region +
  postal + country). Port name eyebrow + success-state copy added.
- new-document-menu Upload-file landing toast: per-file completion
  emits toast.success with action link to the destination entity
  or folder.
- interest-tabs OverviewTab "from client" pill on Email + Phone
  rows via new EditableRow `inheritedFrom` prop.
- create-document-wizard subject picker → segmented button strip
  (5 types visible at once).

Launch infra:
- UTM column wiring (Init 1b step 4): migration
  0089_website_submissions_utm.sql adds utm_source/medium/campaign/
  term/content + composite index (port_id, utm_source, received_at)
  for per-campaign rollups. website-inquiries intake accepts the
  five fields. Residential intake intentionally untouched per audit
  scope.
- Invoicing module gate (Init 1c spike): new
  invoices-module.service + invoices layout guard + registry entry
  invoices_module_enabled (default false). Audit conclusion in
  launch-readiness.md: payments table is canonical money path;
  /invoices flow is parallel infrastructure now hidden by default.

Smart-back navigation refactor:
- Replaced breadcrumb component with history-aware Back button.
  New route-labels.ts + use-smart-back hook +
  navigation-history-tracker so back falls through to the parent
  route when there's no prior page in history.
- Sidebar / topbar / mobile-topbar adopt the new pattern; old
  breadcrumb-store kept for back-compat consumers but the
  breadcrumbs component is gone.
- 6 detail pages (admin/errors per-id + codes, invoices/
  upload-receipts, reports kind, tenancies detail, analytics
  metric, client detail) migrated.

Trackers + docs:
- docs/launch-readiness.md — master pre-launch tracker. Includes
  the reports gap audit (cross-cutting filter set, Marketing +
  Financial blockers, custom builder remaining entities, scheduled
  CSV/XLSX, template scope picker).
- docs/superpowers/audits/active-uat.md — 15 findings flipped
  OPEN → SHIPPED locally with fix-applied notes; 4 OPEN remaining
  (each blocked on user input or cross-repo).
- CLAUDE.md — minor session notes carried forward.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Matt
2026-05-27 22:42:37 +02:00
parent 3bdf59e917
commit cb8292464c
62 changed files with 2944 additions and 662 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/admin/admin-sections-browser.tsx
View File

@@ -372,6 +372,14 @@ const GROUPS: AdminGroup[] = [
keywords: [
'client portal',
'client portal enabled',
'tenancies',
'tenancies module',
'tenancy',
'tenancy tracker',
'lease',
'lease windows',
'renewals',
'transfers',
'ai',
'ai interest scoring',
'ai email drafts',

112
src/components/admin/branding/email-preview-card.tsx
View File

@@ -1,22 +1,38 @@
'use client';
import { useState } from 'react';
import { useCallback, useEffect, useState } from 'react';
import Link from 'next/link';
import { useParams } from 'next/navigation';
import type { Route } from 'next';
import { ArrowRight, Eye, Send } from 'lucide-react';
import { ArrowRight, Eye, RefreshCw, Send } from 'lucide-react';
import { toast } from 'sonner';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from '@/components/ui/select';
import { apiFetch } from '@/lib/api/client';
interface PreviewResponse {
data: { subject: string; html: string };
}
interface TemplateRegistryResponse {
data: Array<{ id: string; label: string; description: string }>;
}
// Sentinel value for the Generic preview option. Select forbids empty-string
// values, so we use a literal that the GET handler doesn't recognise as a
// templateId and falls through to the generic sample.
const GENERIC_VALUE = '__generic__';
/**
* Live preview of the branded transactional email shell plus a
* "send a test" affordance. Both use the current port's branding so
@@ -31,18 +47,45 @@ export function EmailPreviewCard() {
const [loadingPreview, setLoadingPreview] = useState(false);
const [testEmail, setTestEmail] = useState('');
const [sending, setSending] = useState(false);
const [templates, setTemplates] = useState<TemplateRegistryResponse['data']>([]);
const [templateId, setTemplateId] = useState<string>(GENERIC_VALUE);
async function refreshPreview() {
setLoadingPreview(true);
try {
const res = await apiFetch<PreviewResponse>('/api/v1/admin/branding/email-preview');
setSubject(res.data.subject);
setHtml(res.data.html);
} catch (err: unknown) {
toast.error(err instanceof Error ? err.message : 'Preview failed');
} finally {
setLoadingPreview(false);
}
// Pull the registry once on mount so the dropdown reflects every
// transactional template the system can emit. The same list backs the
// per-template tester on /admin/email - this card surfaces it inline
// with the branding controls so the visual feedback loop is tight.
useEffect(() => {
apiFetch<TemplateRegistryResponse>('/api/v1/admin/email/test-template')
.then((res) => setTemplates(res.data))
.catch(() => {
/* non-fatal - the generic preview still works without the registry */
});
}, []);
const refreshPreview = useCallback(
async (id: string = templateId) => {
setLoadingPreview(true);
try {
const qs = id === GENERIC_VALUE ? '' : `?templateId=${encodeURIComponent(id)}`;
const res = await apiFetch<PreviewResponse>(`/api/v1/admin/branding/email-preview${qs}`);
setSubject(res.data.subject);
setHtml(res.data.html);
} catch (err: unknown) {
toast.error(err instanceof Error ? err.message : 'Preview failed');
} finally {
setLoadingPreview(false);
}
},
[templateId],
);
function onTemplateChange(next: string) {
setTemplateId(next);
// Auto-refresh when the user picks a different template so they don't
// have to chase a separate "Refresh" click for every selection. Save +
// re-render of branding fields still requires the visible Refresh
// button (we can't auto-detect a save).
void refreshPreview(next);
}
async function sendTest() {
@@ -51,7 +94,10 @@ export function EmailPreviewCard() {
try {
await apiFetch('/api/v1/admin/branding/email-preview', {
method: 'POST',
body: { recipient: testEmail },
body: {
recipient: testEmail,
templateId: templateId === GENERIC_VALUE ? null : templateId,
},
});
toast.success(`Test email queued to ${testEmail}`);
} catch (err: unknown) {
@@ -68,17 +114,45 @@ export function EmailPreviewCard() {
<div>
<CardTitle>Preview & test</CardTitle>
<CardDescription>
Renders a sample transactional email with the current port&apos;s branding. Save
changes first, then refresh the preview to see them.
Renders a sample transactional email with the current port&apos;s branding. Switch
templates to see how each one looks. Save branding changes first, then click Refresh
to pick up the new logo / colour / background.
</CardDescription>
</div>
<Button variant="outline" size="sm" onClick={refreshPreview} disabled={loadingPreview}>
<Eye className="mr-1.5 h-4 w-4" />
{loadingPreview ? 'Loading…' : html ? 'Refresh preview' : 'Show preview'}
<Button
variant="outline"
size="sm"
onClick={() => refreshPreview()}
disabled={loadingPreview}
>
{html ? (
<RefreshCw className="mr-1.5 h-4 w-4" aria-hidden />
) : (
<Eye className="mr-1.5 h-4 w-4" aria-hidden />
)}
{loadingPreview ? 'Loading…' : html ? 'Refresh' : 'Show preview'}
</Button>
</div>
</CardHeader>
<CardContent className="space-y-4">
<div className="flex flex-wrap items-center gap-2">
<Label htmlFor="template-select" className="text-xs font-medium text-muted-foreground">
Template
</Label>
<Select value={templateId} onValueChange={onTemplateChange}>
<SelectTrigger id="template-select" className="w-full sm:w-[320px]">
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectItem value={GENERIC_VALUE}>Generic sample (branding only)</SelectItem>
{templates.map((t) => (
<SelectItem key={t.id} value={t.id}>
{t.label}
</SelectItem>
))}
</SelectContent>
</Select>
</div>
{html ? (
<div className="space-y-2">
<div className="text-xs text-muted-foreground">

8
src/components/admin/settings/settings-manager.tsx
View File

@@ -55,6 +55,14 @@ const KNOWN_SETTINGS: Array<{
type: 'boolean',
defaultValue: false,
},
{
key: 'expenses_module_enabled',
label: 'Expenses Module',
description:
'Enable the expenses + receipt-upload surface for this port. Disabling hides both sidebar entries (Expenses and How to upload receipts) and blocks the routes with a "module disabled" page, so bookmarks land somewhere meaningful instead of 404-ing. Previously-recorded expense rows are preserved if you re-enable.',
type: 'boolean',
defaultValue: true,
},
{
key: 'ai_interest_scoring',
label: 'AI Interest Scoring',

7
src/components/clients/client-detail-header.tsx
View File

@@ -1,6 +1,7 @@
'use client';
import { useRouter } from 'next/navigation';
import { useParams, useRouter } from 'next/navigation';
import type { Route } from 'next';
import { useState } from 'react';
import { Archive, Bell, Mail, Phone, RotateCcw, Trash2 } from 'lucide-react';
import { WhatsAppIcon } from '@/components/icons/whatsapp';
@@ -43,6 +44,8 @@ interface ClientDetailHeaderProps {
export function ClientDetailHeader({ client }: ClientDetailHeaderProps) {
const router = useRouter();
const params = useParams<{ portSlug: string }>();
const portSlug = params?.portSlug ?? '';
const [archiveOpen, setArchiveOpen] = useState(false);
const [hardDeleteOpen, setHardDeleteOpen] = useState(false);
const [reminderOpen, setReminderOpen] = useState(false);
@@ -248,7 +251,7 @@ export function ClientDetailHeader({ client }: ClientDetailHeaderProps) {
onOpenChange={setHardDeleteOpen}
clientId={client.id}
clientName={client.fullName}
onDeleted={() => router.back()}
onDeleted={() => router.push(`/${portSlug}/clients` as Route)}
/>
)}
</>

2
src/components/companies/company-tabs.tsx
View File

@@ -48,6 +48,7 @@ interface CompanyTabsCompany {
notes: string | null;
tags?: Array<{ id: string; name: string; color: string }>;
addresses?: Address[];
noteCount?: number;
}
interface CompanyTabsOptions {
@@ -223,6 +224,7 @@ export function getCompanyTabs({
{
id: 'notes',
label: 'Notes',
badge: company.noteCount,
content: (
<NotesList
aggregate

53
src/components/documents/create-document-wizard.tsx
View File

@@ -298,27 +298,42 @@ export function CreateDocumentWizard({ portSlug }: CreateDocumentWizardProps) {
<Label className="text-xs">Internal notes</Label>
<Input value={notes} onChange={(e) => setNotes(e.target.value)} />
</div>
<div className="grid grid-cols-[max-content_1fr] gap-2">
<Select
value={subjectType}
onValueChange={(v) => {
setSubjectType(v as typeof subjectType);
// Reset subject id when the type changes - pickers are
// type-specific and old ids belong to the wrong table.
setSubjectId('');
}}
<div className="flex flex-col gap-2">
<Label className="text-xs">Subject</Label>
{/* Segmented type picker — all 5 types visible at once so
the rep can scan and click rather than open a dropdown.
Picker below adapts to the chosen type. */}
<div
role="tablist"
aria-label="Subject type"
className="inline-flex flex-wrap gap-1 rounded-md border bg-muted/30 p-0.5"
>
<SelectTrigger className="h-9 w-32">
<SelectValue />
</SelectTrigger>
<SelectContent>
{SUBJECT_TYPES.map((s) => (
<SelectItem key={s.key} value={s.key}>
{SUBJECT_TYPES.map((s) => {
const active = s.key === subjectType;
return (
<button
key={s.key}
type="button"
role="tab"
aria-selected={active}
onClick={() => {
setSubjectType(s.key);
// Reset subject id when the type changes — pickers
// are type-specific and old ids belong to the
// wrong table.
setSubjectId('');
}}
className={`rounded-sm px-2.5 py-1 text-xs font-medium transition-colors ${
active
? 'bg-white text-foreground shadow-sm'
: 'text-muted-foreground hover:text-foreground'
}`}
>
{s.label}
</SelectItem>
))}
</SelectContent>
</Select>
</button>
);
})}
</div>
{subjectType === 'client' ? (
<ClientPicker value={subjectId || null} onChange={(id) => setSubjectId(id ?? '')} />
) : subjectType === 'company' ? (

31
src/components/documents/new-document-menu.tsx
View File

@@ -2,9 +2,11 @@
import { useState } from 'react';
import Link from 'next/link';
import type { Route } from 'next';
import { useRouter } from 'next/navigation';
import { useQueryClient } from '@tanstack/react-query';
import { CheckCircle2, ChevronDown, FileSignature, Pen, Plus, Upload } from 'lucide-react';
import { toast } from 'sonner';
import { Button } from '@/components/ui/button';
import {
@@ -207,7 +209,34 @@ export function NewDocumentMenu({
companyId={entityType === 'company' ? entityId : undefined}
yachtId={entityType === 'yacht' ? entityId : undefined}
onUploadComplete={(file) => {
if (!file) {
if (file) {
// Per-file completion: emit a landing-context toast so
// the rep knows where the file went. Prefer the entity
// page when uploaded under one (clients/Acme), fall
// back to the documents folder view, fall back to a
// bare confirmation. The action link uses router.push
// for client-side nav.
const destination: { label: string; href: Route } | null =
entityType && entityId
? {
label: `View ${entityType}`,
href: `/${portSlug}/${entityType === 'company' ? 'companies' : entityType + 's'}/${entityId}` as Route,
}
: folderId
? {
label: 'Open folder',
href: `/${portSlug}/documents?folderId=${folderId}` as Route,
}
: null;
toast.success(`Uploaded ${file.filename ?? 'file'}`, {
action: destination
? {
label: destination.label,
onClick: () => router.push(destination.href),
}
: undefined,
});
} else {
// Trailing "batch done" call - invalidate hub caches so the
// newly-uploaded file appears in the Recent files / folder
// listings without a manual reload.

20
src/components/interests/interest-tabs.tsx
View File

@@ -250,6 +250,7 @@ function EditableRow({
label,
children,
historyPath,
inheritedFrom,
}: {
label: string;
children: React.ReactNode;
@@ -258,10 +259,23 @@ function EditableRow({
* that opens the field-history popover. The icon renders nothing
* without history, so it's safe to pass on every row. */
historyPath?: string;
/** Optional inheritance hint. Renders a small pill next to the label
* to signal that the value editable here lives on a different entity
* (e.g. `'client'` for primary email/phone, `'yacht'` for hull
* dimensions). Tells the rep that an edit propagates outside the
* deal scope. */
inheritedFrom?: 'client' | 'yacht' | 'company';
}) {
return (
<div className="flex gap-2 py-1.5 border-b last:border-0 items-center">
<dt className="w-44 shrink-0 text-sm text-muted-foreground">{label}</dt>
<dt className="w-44 shrink-0 text-sm text-muted-foreground flex items-center gap-1.5">
<span>{label}</span>
{inheritedFrom ? (
<span className="inline-flex items-center rounded-full border bg-muted px-1.5 py-0 text-[10px] font-medium uppercase tracking-wide text-muted-foreground">
from {inheritedFrom}
</span>
) : null}
</dt>
<dd className="flex-1 min-w-0 flex items-center gap-1">
<div className="flex-1 min-w-0">{children}</div>
{historyPath ? <FieldHistoryIcon fieldPath={historyPath} /> : null}
@@ -1263,7 +1277,7 @@ function OverviewTab({
<div className="space-y-1">
<h3 className="text-sm font-medium mb-2">Contact</h3>
<dl>
<EditableRow label="Email" historyPath="client.primaryEmail">
<EditableRow label="Email" historyPath="client.primaryEmail" inheritedFrom="client">
{interest.clientId ? (
<ClientChannelEditor
clientId={interest.clientId}
@@ -1276,7 +1290,7 @@ function OverviewTab({
<span className="text-muted-foreground">-</span>
)}
</EditableRow>
<EditableRow label="Phone" historyPath="client.primaryPhone">
<EditableRow label="Phone" historyPath="client.primaryPhone" inheritedFrom="client">
{interest.clientId ? (
<ClientChannelEditor
clientId={interest.clientId}

12
src/components/layout/app-shell.tsx
View File

@@ -5,6 +5,7 @@ import { useEffect, useState, type ComponentProps, type ReactNode } from 'react'
import { cn } from '@/lib/utils';
import { Sidebar } from '@/components/layout/sidebar';
import { Topbar } from '@/components/layout/topbar';
import { NavigationHistoryTracker } from '@/components/layout/navigation-history-tracker';
import { MobileLayoutProvider } from '@/components/layout/mobile/mobile-layout-provider';
import { MobileTopbar } from '@/components/layout/mobile/mobile-topbar';
import { MobileBottomTabs } from '@/components/layout/mobile/mobile-bottom-tabs';
@@ -27,6 +28,10 @@ interface AppShellProps {
/** Per-port `tenancies_module_enabled` resolution. Gates the Tenancies
* sidebar entry SSR-side so the nav doesn't flicker in/out. */
tenanciesModuleByPort: Record<string, boolean>;
/** Per-port `expenses_module_enabled` resolution. Gates the Expenses
* + How-to-upload-receipts sidebar entries SSR-side. Defaults to
* true so existing ports keep the feature. */
expensesModuleByPort: Record<string, boolean>;
/**
* Server-rendered form-factor hint (from the request User-Agent). The
* shell mounts the matching tree on first render so we never paint the
@@ -90,6 +95,7 @@ export function AppShell({
ports,
portLogoUrls,
tenanciesModuleByPort,
expensesModuleByPort,
initialFormFactor,
children,
}: AppShellProps) {
@@ -142,6 +148,7 @@ export function AppShell({
ports,
portLogoUrls,
tenanciesModuleByPort,
expensesModuleByPort,
};
// Chrome subtree per tier.
@@ -218,6 +225,11 @@ export function AppShell({
return (
<MobileLayoutProvider>
{/* Records every in-app navigation so useSmartBack can return the
rep to the page they were actually on (e.g. Sarah Doe -> Yacht
-> Back -> Sarah) instead of always falling back to the
logical URL parent. Renders nothing. */}
<NavigationHistoryTracker />
<div
className={cn(
'bg-background',

70
src/components/layout/back-button.tsx Normal file
View File

@@ -0,0 +1,70 @@
'use client';
import Link from 'next/link';
import type { Route } from 'next';
import { ChevronLeft } from 'lucide-react';
import { cn } from '@/lib/utils';
import { useSmartBack } from '@/hooks/use-smart-back';
interface BackButtonProps {
/** Visual treatment. Desktop shows chevron + "Back to X" label;
* mobile shows chevron only with the destination in aria-label so
* the 44px tap target stays uncluttered in the narrow topbar. */
variant: 'desktop' | 'mobile';
}
/**
* Contextual back button. Replaces the legacy breadcrumb chain that
* lived in the desktop topbar and the unconditional `router.back()`
* affordance on mobile. Returns nothing on top-level pages where the
* sidebar is the natural way out.
*
* Resolves its target via `useSmartBack()` - prefers a registered
* detail-page hint, falls back to URL-derived parent route.
*/
export function BackButton({ variant }: BackButtonProps) {
const target = useSmartBack();
if (!target) return null;
// Next typed-routes can't know that hint.href / URL-derived parents
// resolve to a registered route at compile time, so cast.
const href = target.href as Route;
if (variant === 'mobile') {
return (
<Link
href={href}
aria-label={`Back to ${target.label}`}
className={cn(
'size-11 inline-flex items-center justify-center rounded-full -ml-1',
'text-white/95 active:bg-white/10 transition-colors',
)}
>
<ChevronLeft className="size-[22px] stroke-[2.25]" aria-hidden />
</Link>
);
}
return (
<Link
href={href}
aria-label={`Back to ${target.label}`}
className={cn(
'inline-flex h-8 items-center gap-1 rounded-md px-2 -ml-2 min-w-0',
'text-sm font-medium text-muted-foreground hover:text-foreground hover:bg-accent',
'transition-colors',
)}
title={`Back to ${target.label}`}
>
<ChevronLeft className="h-4 w-4 shrink-0" aria-hidden />
{/* Label-only (iOS-style "< Settings"). The chevron already
communicates "back"; doubling up with a "Back to" prefix wastes
horizontal space in a topbar that's already crowded by the
centered search bar. Full intent is preserved in the tooltip
+ aria-label. */}
<span className="truncate max-w-[160px]">{target.label}</span>
</Link>
);
}

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

@@ -1,135 +0,0 @@
'use client';
import Link from 'next/link';
import { usePathname } from 'next/navigation';
import { ChevronRight } from 'lucide-react';
import {
Breadcrumb,
BreadcrumbItem,
BreadcrumbLink,
BreadcrumbList,
BreadcrumbPage,
} from '@/components/ui/breadcrumb';
import { useUIStore } from '@/stores/ui-store';
import { useBreadcrumbStore } from '@/stores/breadcrumb-store';
// Human-readable labels for route segments
const SEGMENT_LABELS: Record<string, string> = {
dashboard: 'Dashboard',
clients: 'Clients',
interests: 'Interests',
berths: 'Berths',
documents: 'Documents',
files: 'Files',
expenses: 'Expenses',
invoices: 'Invoices',
email: 'Email',
reminders: 'Reminders',
settings: 'Settings',
admin: 'Administration',
reports: 'Reports',
new: 'New',
edit: 'Edit',
profile: 'Profile',
};
// UUID v4-ish (or any 36-char hex+dash) - used to skip entity-id segments
// from the breadcrumbs since the page H1 already shows the entity name.
const UUID_RE = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i;
function isIdSegment(segment: string): boolean {
return UUID_RE.test(segment);
}
function formatSegment(segment: string): string {
return (
SEGMENT_LABELS[segment] ?? segment.replace(/-/g, ' ').replace(/\b\w/g, (c) => c.toUpperCase())
);
}
export function Breadcrumbs() {
const pathname = usePathname();
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);
// Remove the portSlug segment and any UUID-ish entity-id segments - the
// page H1 already shows the entity name, no need to leak the raw id.
const segments = (
currentPortSlug ? rawSegments.filter((seg) => seg !== currentPortSlug) : rawSegments
).filter((seg) => !isIdSegment(seg));
if (segments.length === 0) return null;
// 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);
const isLast = index === segments.length - 1;
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 className="text-sm gap-1.5">
{crumbs.map((crumb) => (
// Each crumb + its trailing separator share a single
// inline-flex `<li>` so flex-wrap can't strand the
// separator at end-of-line above the wrapped child crumb.
<BreadcrumbItem key={crumb.href}>
{crumb.isLast ? (
<BreadcrumbPage className="font-medium text-foreground truncate max-w-[160px]">
{crumb.label}
</BreadcrumbPage>
) : (
<>
<BreadcrumbLink asChild>
<Link
// eslint-disable-next-line @typescript-eslint/no-explicit-any
href={crumb.href as any}
className="text-muted-foreground hover:text-foreground transition-colors rounded px-1 -mx-1 truncate max-w-[160px]"
>
{crumb.label}
</Link>
</BreadcrumbLink>
<ChevronRight
className="w-3 h-3 text-muted-foreground/40"
aria-hidden
role="presentation"
/>
</>
)}
</BreadcrumbItem>
))}
</BreadcrumbList>
</Breadcrumb>
);
}

27
src/components/layout/mobile/mobile-topbar.tsx
View File

@@ -1,9 +1,10 @@
'use client';
import { ChevronLeft } from 'lucide-react';
import { useRouter, usePathname } from 'next/navigation';
import { usePathname } from 'next/navigation';
import { cn } from '@/lib/utils';
import { BackButton } from '@/components/layout/back-button';
import { useSmartBack } from '@/hooks/use-smart-back';
import { useMobileChrome } from './mobile-layout-provider';
/**
@@ -17,9 +18,13 @@ import { useMobileChrome } from './mobile-layout-provider';
* URL's last segment is title-cased as a fallback.
*/
export function MobileTopbar() {
const { title, primaryAction, showBackButton } = useMobileChrome();
const router = useRouter();
const { title, primaryAction } = useMobileChrome();
const pathname = usePathname();
// Mobile back affordance now derives from the same smart-back hook as
// the desktop topbar so the destination is consistent across viewports
// (and survives deep-link refresh). When useSmartBack returns null
// (top-level pages) the brand-mark fallback renders in its place.
const backTarget = useSmartBack();
// UUID detection - the URL's last segment on detail pages is the
// entity's UUID, and title-casing it produces an ugly "Abc 123 Uuid"
@@ -63,18 +68,8 @@ export function MobileTopbar() {
'flex items-center gap-2 px-3',
)}
>
{showBackButton ? (
<button
type="button"
onClick={() => router.back()}
aria-label="Go back"
className={cn(
'size-11 inline-flex items-center justify-center rounded-full -ml-1',
'text-white/95 active:bg-white/10 transition-colors',
)}
>
<ChevronLeft className="size-[22px] stroke-[2.25]" aria-hidden />
</button>
{backTarget ? (
<BackButton variant="mobile" />
) : (
<div
aria-label={portTitle || 'Home'}

57
src/components/layout/navigation-history-tracker.tsx Normal file
View File

@@ -0,0 +1,57 @@
'use client';
import { useEffect, useRef } from 'react';
import { usePathname } from 'next/navigation';
import { useBreadcrumbStore } from '@/stores/breadcrumb-store';
/**
* Tracks in-app navigation so `useSmartBack` can return the user to the
* page they were actually on rather than just the logical URL parent.
*
* Push/pop semantics: when the user navigates forward (new pathname,
* not equal to the current top of stack), the PREVIOUS pathname is
* pushed. When the user navigates to whatever's currently on top (i.e.
* pressed the back button or used browser back), the top is popped.
* This prevents the infamous back-button-loop ("press back, end up on
* the page you came from, press back again, return to the page you
* just left").
*
* Mounts once at the app shell so it sees every route change without
* unmounting. The store is in-memory only - a hard refresh clears the
* history and the back button falls through to its other resolution
* tiers (registered hint, then URL-derived parent).
*/
export function NavigationHistoryTracker() {
const pathname = usePathname();
// First render's "previous" is null so we don't push a synthetic
// entry. After the first navigation, this ref holds whatever pathname
// was active just before the latest route change.
const previousRef = useRef<string | null>(null);
useEffect(() => {
const previous = previousRef.current;
previousRef.current = pathname;
// No-op on initial mount and on idempotent renders.
if (previous === null || previous === pathname) return;
// Read the live store outside of React's subscription model so this
// effect doesn't re-fire on every store update (only on route changes).
const state = useBreadcrumbStore.getState();
const top = state.historyStack[state.historyStack.length - 1];
if (top === pathname) {
// The user navigated back to whatever was on top of the stack - pop
// it so the next "back" press uses the next-older entry (or falls
// through to logical parent when the stack is empty).
state.popHistory();
} else {
// Forward navigation: push the previous pathname so the back button
// on the page we just landed on can return to it.
state.pushHistory(previous);
}
}, [pathname]);
return null;
}

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

@@ -14,6 +14,7 @@ import {
Building2,
Receipt,
FileText,
FileBarChart,
Inbox,
Camera,
Globe,
@@ -55,6 +56,11 @@ interface SidebarProps {
/** Per-port `tenancies_module_enabled` resolution. Gates the Tenancies
* sidebar entry. Resolved server-side in the dashboard layout. */
tenanciesModuleByPort?: Record<string, boolean>;
/** Per-port `expenses_module_enabled` resolution. Gates the Expenses
* + How-to-upload-receipts sidebar entries. Resolved server-side in
* the dashboard layout. Defaults to true (feature on) per port when
* the map is missing for the active port. */
expensesModuleByPort?: Record<string, boolean>;
}
interface NavItem {
@@ -80,6 +86,12 @@ interface NavItemGated extends NavItem {
/** When true, only render this item if the tenancies module is enabled
* for the current port. Resolved against `tenanciesModuleByPort`. */
requiresTenanciesModule?: boolean;
/** When true, only render this item if the expenses module is enabled
* for the current port. Resolved against `expensesModuleByPort`. */
requiresExpensesModule?: boolean;
/** When true, only render this item if Umami analytics is wired up
* for the port. */
umamiRequired?: boolean;
}
function buildNavSections(portSlug: string | undefined): NavSection[] {
@@ -123,17 +135,26 @@ function buildNavSections(portSlug: string | undefined): NavSection[] {
{
title: 'Insights',
marinaRequired: true,
umamiRequired: true,
items: [
// Reports surface (dashboard / clients / berths / interests
// builders, plus templates / schedules / runs). Routes existed
// since the report-builder ship but the sidebar entry was never
// wired - reps had to land here via direct link.
{
href: `${base}/reports`,
label: 'Reports',
icon: FileBarChart,
},
// Marketing / Umami integration. Distinct from the main dashboard
// (which is sales-focused) so the audience and the metrics don't
// compete for visual real estate. Whole section is hidden when
// Umami isn't wired up - see SidebarContent.
// compete for visual real estate. Hidden when Umami isn't wired
// up via the per-item umamiRequired flag below.
{
href: `${base}/website-analytics`,
label: 'Website analytics',
icon: Globe,
},
umamiRequired: true,
} as NavItemGated,
],
},
{
@@ -145,7 +166,12 @@ function buildNavSections(portSlug: string | undefined): NavSection[] {
title: 'Financial',
marinaRequired: true,
items: [
{ href: `${base}/expenses`, label: 'Expenses', icon: Receipt },
{
href: `${base}/expenses`,
label: 'Expenses',
icon: Receipt,
requiresExpensesModule: true,
} as NavItemGated,
// 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
@@ -157,7 +183,8 @@ function buildNavSections(portSlug: string | undefined): NavSection[] {
href: `${base}/invoices/upload-receipts`,
label: 'How to upload receipts',
icon: Camera,
},
requiresExpensesModule: true,
} as NavItemGated,
],
},
{
@@ -252,6 +279,7 @@ function SidebarContent({
hasMarinaAccess,
hasResidentialAccess,
tenanciesModuleEnabled,
expensesModuleEnabled,
user,
ports,
currentPort,
@@ -266,6 +294,7 @@ function SidebarContent({
hasMarinaAccess: boolean;
hasResidentialAccess: boolean;
tenanciesModuleEnabled: boolean;
expensesModuleEnabled: boolean;
user?: SidebarProps['user'];
ports?: Port[];
currentPort: Port | null;
@@ -389,6 +418,8 @@ function SidebarContent({
const gated = item as NavItemGated;
if (gated.requiresTenanciesModule && !tenanciesModuleEnabled)
return false;
if (gated.requiresExpensesModule && !expensesModuleEnabled) return false;
if (gated.umamiRequired && !umamiConfigured) return false;
return true;
})
.map((item) => (
@@ -482,6 +513,7 @@ export function Sidebar({
ports,
portLogoUrls,
tenanciesModuleByPort,
expensesModuleByPort,
}: SidebarProps) {
// Sidebar collapse removed - design preference is the always-expanded
// form. Forcibly false; the store flag stays for backwards-compat with
@@ -494,6 +526,12 @@ export function Sidebar({
const tenanciesModuleEnabled = currentPortId
? (tenanciesModuleByPort?.[currentPortId] ?? false)
: false;
// Expenses defaults to enabled when the port's entry is missing - the
// registry default is `true`, so a port that's never explicitly
// toggled the feature should keep it visible.
const expensesModuleEnabled = currentPortId
? (expensesModuleByPort?.[currentPortId] ?? true)
: true;
// Super admins see every section regardless of role rows.
const hasAdminAccess =
@@ -526,6 +564,7 @@ export function Sidebar({
hasMarinaAccess={hasMarinaAccess}
hasResidentialAccess={hasResidentialAccess}
tenanciesModuleEnabled={tenanciesModuleEnabled}
expensesModuleEnabled={expensesModuleEnabled}
user={user}
ports={ports}
currentPort={currentPort}

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

@@ -1,13 +1,11 @@
'use client';
import { ChevronLeft, Plus } from 'lucide-react';
import { useRouter, usePathname } from 'next/navigation';
import { Plus } from 'lucide-react';
import { useRouter } from 'next/navigation';
import type { Route } from 'next';
import type { ReactNode } from 'react';
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';
@@ -19,7 +17,7 @@ import {
DropdownMenuSeparator,
DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu';
import { Breadcrumbs } from '@/components/layout/breadcrumbs';
import { BackButton } from '@/components/layout/back-button';
import { CommandSearch } from '@/components/search/command-search';
import { Inbox } from '@/components/layout/inbox';
import { UserMenu } from '@/components/layout/user-menu';
@@ -36,58 +34,32 @@ interface TopbarProps {
export function Topbar({ ports, user, leadingSlot }: 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.
// Three-column grid: smart back button left, search center, actions right.
// The brand logo lives in the sidebar header so the topbar center is
// dedicated to the global search bar.
//
// Grid is `auto auto 1fr` instead of three fr-tracks: the left + right
// columns size to their actual content (logo trigger + breadcrumbs on
// the left; New / Inbox / Avatar on the right), and the search column
// soaks up the rest. The earlier `minmax(280px,800px)` center column
// auto-grew to the search bar's intrinsic `max-w-2xl` (672px), which
// squeezed the right column below the width of "+ New + Inbox +
// Avatar" and pushed the New button off-screen at every tablet +
// narrow-desktop width. With the center as a single fr-track, the
// right column always gets the space it needs.
// Grid is `auto auto 1fr` so the left + right columns size to their
// actual content (back-button label on the left; New / Inbox / Avatar
// on the right) and the search column soaks up the rest.
//
// Wayfinding model: the legacy breadcrumb chain was removed in favor
// of a single contextual back button ("Back to Clients", "Back to
// Sarah Doe"). Detail pages register their parent via
// `useBreadcrumbHint` so the label is entity-aware; everything else
// is URL-derived. See src/hooks/use-smart-back.ts.
<header className="relative grid h-14 grid-cols-[auto_1fr_auto] items-center border-b border-border bg-background gap-3 px-4 shrink-0">
{/* LEFT: optional sidebar trigger (tablet) + optional back button + breadcrumbs */}
<div className="min-w-0 flex items-center gap-1.5">
{/* LEFT: optional sidebar trigger (tablet) + smart back button.
Hard-capped width so the column never extends into the
absolutely-positioned search bar's footprint. The cap is
conservative on smaller widths to leave the search bar
breathing room, more generous at xl. */}
<div className="min-w-0 flex items-center gap-1.5 max-w-[180px] lg:max-w-[220px] xl:max-w-[260px]">
{leadingSlot}
{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" aria-hidden />
</button>
)}
<Breadcrumbs />
<BackButton variant="desktop" />
</div>
{/* CENTER (spacer): the search bar is absolutely positioned below
@@ -105,14 +77,17 @@ export function Topbar({ ports, user, leadingSlot }: TopbarProps) {
viewport, so plain `left: 50%` is already correct.
Caps scale by viewport tier so the bar doesn't crowd the side
columns:
columns. The previous max-w-2xl (672px) at xl ate so much of
the topbar that the back-button column on the left got
visually clipped by the search bar; tightened to max-w-xl so
a "Back to Administration"-class label can render in full:
base: max-w-md (28rem)
lg: max-w-xl (36rem)
xl: max-w-2xl (42rem)
lg: max-w-lg (32rem)
xl: max-w-xl (36rem)
The wrapper is pointer-events-none so it doesn't capture
clicks meant for the left/right columns underneath; only the
input itself receives pointer events. */}
<div className="pointer-events-none absolute inset-y-0 left-1/2 lg:left-[calc(50%-var(--width-sidebar)/2)] flex w-full max-w-md -translate-x-1/2 items-center px-4 lg:max-w-xl xl:max-w-2xl">
<div className="pointer-events-none absolute inset-y-0 left-1/2 lg:left-[calc(50%-var(--width-sidebar)/2)] flex w-full max-w-md -translate-x-1/2 items-center px-4 lg:max-w-lg xl:max-w-xl">
<div className="pointer-events-auto w-full min-w-0">
<CommandSearch />
</div>

32
src/components/shared/branded-auth-shell.tsx
View File

@@ -13,6 +13,13 @@ interface BrandedAuthShellProps {
backgroundUrl?: string | null;
appName?: string | null;
};
/** Card width preset. Default (`'sm'`) caps at max-w-md to match the
* CRM/portal login surfaces; `'md'` opens to max-w-xl for forms that
* carry a dozen+ fields (supplemental info, EOI prefill). Wider
* variants also relax the fixed-viewport pin so long forms scroll
* naturally on mobile instead of getting clipped under the rubber-
* band cap. */
width?: 'sm' | 'md';
}
/**
@@ -25,7 +32,7 @@ interface BrandedAuthShellProps {
* explicit prop; otherwise the surrounding `<AuthBrandingProvider>` is
* the source of truth.
*/
export function BrandedAuthShell({ children, branding }: BrandedAuthShellProps) {
export function BrandedAuthShell({ children, branding, width = 'sm' }: BrandedAuthShellProps) {
const ctx = useAuthBranding();
const logoUrl = branding?.logoUrl ?? ctx?.logoUrl ?? null;
const backgroundUrl = branding?.backgroundUrl ?? ctx?.backgroundUrl ?? null;
@@ -34,17 +41,22 @@ export function BrandedAuthShell({ children, branding }: BrandedAuthShellProps)
// itself isn't a sign-in surface (e.g. password reset, set-password).
const appName = branding?.appName ?? ctx?.appName ?? null;
const altText = appName ?? '';
// fixed inset-0 anchors the auth surface to the viewport directly -
// iOS Safari ignores overflow-hidden on inner divs for body-level
// scrolling, so a regular `h-dvh overflow-hidden` wrapper doesn't
// stop the rubber-band bounce. Pinning to the viewport via position
// fixed does. The fixed-position shell then uses flex to center the
// card within the visible area.
const widthClass = width === 'md' ? 'max-w-xl' : 'max-w-md';
// Wide variant uses a normal document scroll (`min-h-dvh`) instead of
// the fixed-viewport pin so a 20+ field form scrolls instead of
// getting clipped. The narrow login-grade variant keeps the original
// fixed/centered behaviour to stop iOS rubber-banding on short forms.
const layoutClass =
width === 'md'
? 'relative min-h-dvh flex items-start sm:items-center justify-center px-4 py-8'
: 'fixed inset-0 flex items-center justify-center px-4 py-8 overscroll-none';
return (
<div className="fixed inset-0 flex items-center justify-center px-4 py-8 overscroll-none">
<div className={layoutClass}>
<div
aria-hidden
className="absolute inset-0 -z-10"
className="fixed inset-0 -z-10"
style={{
backgroundImage: backgroundUrl ? `url('${backgroundUrl}')` : undefined,
backgroundSize: 'cover',
@@ -54,7 +66,7 @@ export function BrandedAuthShell({ children, branding }: BrandedAuthShellProps)
backgroundColor: '#f2f2f2',
}}
/>
<div className="w-full max-w-md">
<div className={`w-full ${widthClass}`}>
<div className="bg-white rounded-lg shadow-lg p-8">
{logoUrl ? (
<div className="flex justify-center mb-6">

68
src/components/shared/module-disabled-page.tsx Normal file
View File

@@ -0,0 +1,68 @@
import Link from 'next/link';
import type { Route } from 'next';
import { PowerOff } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Card, CardContent } from '@/components/ui/card';
interface ModuleDisabledPageProps {
/** Human-readable name for the disabled feature, e.g. "Expenses". */
moduleName: string;
/** Optional short sentence explaining what the module does, shown
* below the headline. Defaults to a generic message when omitted. */
description?: string;
/** Admin settings href used for the "Enable in System Settings" CTA.
* Pass the full URL including portSlug. The CTA is hidden when no
* href is supplied (e.g. for users who lack admin permissions; the
* page renderer should pass null in that case). */
settingsHref?: string | null;
/** Optional fallback href for non-admin users (e.g. take them home).
* Defaults to the dashboard route derived from settingsHref's port. */
fallbackHref?: string;
}
/**
* Friendly "this module is off for your port" page rendered in place of
* a real feature surface when the per-port toggle is disabled. Used
* instead of a 404 so that bookmarks land somewhere meaningful and the
* admin can re-enable from one click.
*/
export function ModuleDisabledPage({
moduleName,
description,
settingsHref,
fallbackHref,
}: ModuleDisabledPageProps) {
return (
<div className="flex min-h-[60vh] items-center justify-center">
<Card className="max-w-md text-center shadow-sm">
<CardContent className="p-8 space-y-4">
<div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-slate-100 text-slate-500">
<PowerOff className="h-6 w-6" aria-hidden />
</div>
<div className="space-y-2">
<h1 className="text-xl font-semibold text-foreground">
{moduleName} is turned off for this port
</h1>
<p className="text-sm text-muted-foreground">
{description ??
`An administrator has disabled the ${moduleName} module for this port. Previously-saved data is preserved and will reappear when the module is re-enabled.`}
</p>
</div>
<div className="flex flex-wrap items-center justify-center gap-2 pt-2">
{settingsHref ? (
<Button asChild>
<Link href={settingsHref as Route}>Enable in System Settings</Link>
</Button>
) : null}
{fallbackHref ? (
<Button asChild variant="outline">
<Link href={fallbackHref as Route}>Back to dashboard</Link>
</Button>
) : null}
</div>
</CardContent>
</Card>
</div>
);
}

16
src/components/tenancies/tenancy-detail.tsx
View File

@@ -30,6 +30,7 @@ import { DatePicker } from '@/components/ui/date-picker';
import { PageHeader } from '@/components/shared/page-header';
import { StatusPill, type StatusPillStatus } from '@/components/ui/status-pill';
import { EmptyState } from '@/components/ui/empty-state';
import { useBreadcrumbHint } from '@/hooks/use-breadcrumb-hint';
import { useRealtimeInvalidation } from '@/hooks/use-realtime-invalidation';
import { apiFetch } from '@/lib/api/client';
import { toastError } from '@/lib/api/toast-error';
@@ -135,6 +136,13 @@ export function TenancyDetail({ tenancyId, portSlug }: TenancyDetailProps) {
const [editDialogOpen, setEditDialogOpen] = useState(false);
const [renewDialogOpen, setRenewDialogOpen] = useState(false);
const [transferDialogOpen, setTransferDialogOpen] = useState(false);
// Smart-back target: tenancies are reached via berths in this UI -
// sending the user back to /berths matches the navigation they took
// to get here, rather than the generic /tenancies list.
useBreadcrumbHint({
parents: [{ label: 'Berths', href: `/${portSlug}/berths` }],
current: 'Tenancy',
});
const tenancy = useQuery<{ data: TenancyData }>({
queryKey: ['tenancy', tenancyId],
queryFn: () => apiFetch(`/api/v1/tenancies/${tenancyId}`),
@@ -321,11 +329,9 @@ export function TenancyDetail({ tenancyId, portSlug }: TenancyDetailProps) {
</Button>
</>
)}
<Button asChild variant="outline">
<Link href={`/${portSlug}/berths`}>
<ArrowLeft className="mr-1.5 h-4 w-4" aria-hidden /> Back to berths
</Link>
</Button>
{/* Topbar smart-back covers "Back to Berths" via the
useBreadcrumbHint registration above; no duplicate
action-bar button needed. */}
</div>
}
variant="gradient"

14
src/components/ui/dialog.tsx
View File

@@ -50,13 +50,13 @@ const DialogContent = React.forwardRef<
'fixed top-0 right-0 bottom-0 left-0 z-50 grid w-full gap-4 border-0 bg-background p-4 shadow-lg duration-200 sm:p-6',
'max-h-dvh overflow-y-auto sm:max-h-[calc(100dvh-2rem)]',
'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
// Default width: bumped 2026-05-26 from `sm:max-w-lg` (32rem) to
// `sm:max-w-xl lg:max-w-3xl` so every Dialog has a generous
// desktop default. Confirm dialogs override DOWN with
// `sm:max-w-md`; content-heavy dialogs (file preview, signing
// details, EOI generate) override UP with `lg:max-w-5xl` or
// `lg:max-w-[min(95vw,1400px)]`.
'sm:top-[50%] sm:right-auto sm:bottom-auto sm:left-[50%] sm:max-w-xl lg:max-w-3xl sm:translate-x-[-50%] sm:translate-y-[-50%] sm:border sm:rounded-lg',
// Default width: bumped 2026-05-27 from `sm:max-w-xl lg:max-w-3xl`
// to `sm:max-w-2xl lg:max-w-4xl` so multi-field forms and PDF
// previews aren't cramped on 1440-1920px desktops. Confirm
// dialogs override DOWN with `sm:max-w-md`; content-heavy
// dialogs (file preview, signing details, EOI generate)
// override UP with `lg:max-w-5xl` or `lg:max-w-[min(95vw,1400px)]`.
'sm:top-[50%] sm:right-auto sm:bottom-auto sm:left-[50%] sm:max-w-2xl lg:max-w-4xl sm:translate-x-[-50%] sm:translate-y-[-50%] sm:border sm:rounded-lg',
// Desktop animation: subtle centered fade + zoom (no slide-from-
// corner so the dialog appears in place rather than flying in
// from top-right). The base fade-in/out classes above provide

32
src/components/website-analytics/metric-detail-shell.tsx
View File

@@ -11,9 +11,7 @@
*/
import { useState } from 'react';
import Link from 'next/link';
import { useRouter } from 'next/navigation';
import { ArrowLeft } from 'lucide-react';
import { PageHeader } from '@/components/shared/page-header';
import { Card, CardContent } from '@/components/ui/card';
@@ -21,6 +19,7 @@ import { Skeleton } from '@/components/ui/skeleton';
import { DateRangePicker } from '@/components/dashboard/date-range-picker';
import { isCustomRange, type DateRange } from '@/lib/analytics/range';
import { useUIStore } from '@/stores/ui-store';
import { useBreadcrumbHint } from '@/hooks/use-breadcrumb-hint';
import { getCountryName } from '@/lib/i18n/countries';
import { apiFetch } from '@/lib/api/client';
import { useQuery } from '@tanstack/react-query';
@@ -89,6 +88,23 @@ export function MetricDetailShell({ metric, initialRange, initialFrom, initialTo
parseInitialRange(initialRange, initialFrom, initialTo),
);
// Smart-back target: preserve the active date range qs so reps land
// on the parent dashboard with the same time window they were
// exploring on the detail page.
useBreadcrumbHint(
portSlug
? {
parents: [
{
label: 'Website Analytics',
href: `/${portSlug}/website-analytics?${rangeToQuery(range)}`,
},
],
current: METRIC_CONFIG[metric]?.title ?? metric,
}
: null,
);
function handleRangeChange(next: DateRange) {
setRange(next);
// Mirror the picker choice back into the URL so refresh / share / back
@@ -123,15 +139,9 @@ export function MetricDetailShell({ metric, initialRange, initialFrom, initialTo
return (
<div className="space-y-6">
<div className="flex items-center justify-start">
<Link
href={`/${portSlug}/website-analytics?${rangeToQuery(range)}` as never}
className="inline-flex items-center gap-1 text-xs font-medium uppercase tracking-wide text-muted-foreground hover:text-foreground"
>
<ArrowLeft className="size-3" aria-hidden />
Back to website analytics
</Link>
</div>
{/* Topbar smart-back covers "Back to Website Analytics" with the
active date range preserved via the useBreadcrumbHint above,
so the previous inline link is no longer needed. */}
<PageHeader
title={cfg.title}
eyebrow="Website analytics"

2
src/components/yachts/yacht-tabs.tsx
View File

@@ -65,6 +65,7 @@ interface YachtTabsYacht {
status: string;
notes: string | null;
tags?: Array<{ id: string; name: string; color: string }>;
noteCount?: number;
}
interface YachtTabsOptions {
@@ -397,6 +398,7 @@ export function getYachtTabs({
{
id: 'notes',
label: 'Notes',
badge: yacht.noteCount,
content: (
<NotesList
entityType="yachts"