From 88f76b6b04e24dfc360b037a75d607a2461b0dfe Mon Sep 17 00:00:00 2001 From: Matt Ciaccio Date: Sun, 3 May 2026 16:15:37 +0200 Subject: [PATCH] feat(mobile): rework bottom nav (Dashboard/Berths/Clients/Documents/More) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Old order : Dashboard / Clients / Yachts / Berths / More New order : Dashboard / Berths / Clients / Documents / More Reasoning (also captured as in-file comments above each tab list): - Yachts is asset-record traffic — rarely browsed standalone, almost always reached from inside an interest or client. Pulled out of the bottom row, kept available in the More sheet. - Documents (signature tracking / EOI queue) earns a slot at the bottom because reps chase signers as a daily activity. - Interests is intentionally NOT in the bottom row: having both Clients and Interests as peer tabs created a Clients-vs-Interests confusion for sales reps. The new per-client Interests tab + the bottom-sheet drawer (see ClientInterestsTab) cover the day-to-day deal review without needing a dedicated bottom-nav peer. - Clients moves to the center: it's the primary mental anchor for "find this person", with everything else (yachts, companies, interests) reached as a tab on the client detail page. More-sheet reorder mirrors the new priority: Interests / Yachts / Companies first (most-likely overflow targets), then financial (Invoices, Expenses), then Email / Alerts / Reports / Reminders / Settings / Admin. Documents removed from the More sheet (now in the bottom row). Co-Authored-By: Claude Opus 4.7 (1M context) --- .../layout/mobile/mobile-bottom-tabs.tsx | 22 +++++++++++++--- src/components/layout/mobile/more-sheet.tsx | 25 +++++++++++-------- 2 files changed, 34 insertions(+), 13 deletions(-) diff --git a/src/components/layout/mobile/mobile-bottom-tabs.tsx b/src/components/layout/mobile/mobile-bottom-tabs.tsx index 3084763..d9f7169 100644 --- a/src/components/layout/mobile/mobile-bottom-tabs.tsx +++ b/src/components/layout/mobile/mobile-bottom-tabs.tsx @@ -2,7 +2,7 @@ import Link from 'next/link'; import { usePathname } from 'next/navigation'; -import { LayoutDashboard, Users, Ship, Anchor, Menu } from 'lucide-react'; +import { Anchor, FileSignature, LayoutDashboard, Menu, Users } from 'lucide-react'; import { cn } from '@/lib/utils'; @@ -12,11 +12,27 @@ type TabSpec = { segment: string; // route segment after /[portSlug]/ }; +// Bottom nav ordering, left → right: +// Dashboard — daily overview +// Berths — marina inventory grid (touches sales + ops both) +// Clients — the address book / dedup surface (centered: it's the +// primary mental anchor for "find this person", with +// interests living as a tab on the client detail rather +// than a peer in the bottom nav) +// Documents — signature tracking (chase signers, EOI queue) +// More — overflow drawer (Interests, Yachts, Companies, …) +// +// Interests is intentionally NOT in the bottom row — having both Clients +// and Interests as peer tabs created a Clients-vs-Interests confusion +// for sales reps, and the per-client interests tab + the new bottom-sheet +// drawer cover the day-to-day deal review without needing a dedicated tab. +// Yachts stays out for the same reason as before: it's an asset record +// most often reached from inside an interest or client, not browsed. const TABS: TabSpec[] = [ { label: 'Dashboard', icon: LayoutDashboard, segment: 'dashboard' }, - { label: 'Clients', icon: Users, segment: 'clients' }, - { label: 'Yachts', icon: Ship, segment: 'yachts' }, { label: 'Berths', icon: Anchor, segment: 'berths' }, + { label: 'Clients', icon: Users, segment: 'clients' }, + { label: 'Documents', icon: FileSignature, segment: 'documents' }, ]; export function MobileBottomTabs({ onMoreClick }: { onMoreClick: () => void }) { diff --git a/src/components/layout/mobile/more-sheet.tsx b/src/components/layout/mobile/more-sheet.tsx index d0d03d3..8ba595d 100644 --- a/src/components/layout/mobile/more-sheet.tsx +++ b/src/components/layout/mobile/more-sheet.tsx @@ -3,17 +3,17 @@ import Link from 'next/link'; import { usePathname } from 'next/navigation'; import { - Building2, - Bookmark, - Receipt, - FileText, - FolderOpen, - Mail, - Bell, - ShieldAlert, BarChart3, + Bell, + Bookmark, + Building2, + FileText, + Mail, + Receipt, Settings, Shield, + ShieldAlert, + Ship, } from 'lucide-react'; import { @@ -30,12 +30,17 @@ type MoreItem = { segment: string; }; +// Order: most-likely overflow targets first. Interests is here (rather +// than the bottom row) to dodge the Clients-vs-Interests UX confusion; +// reps reach the active deals via the Interests tab on a client detail +// (or via the new bottom-sheet drawer). Yachts is asset-record traffic +// best reached contextually from inside an interest or client. const MORE_ITEMS: MoreItem[] = [ - { label: 'Companies', icon: Building2, segment: 'companies' }, { 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: 'Documents', icon: FolderOpen, segment: 'documents' }, { label: 'Email', icon: Mail, segment: 'email' }, { label: 'Alerts', icon: ShieldAlert, segment: 'alerts' }, { label: 'Reports', icon: BarChart3, segment: 'reports' },