feat(ui): broad consistency sweep — sources, dates, comboboxes, milestones
Mobile + responsive - berth-form full-width on phones (was 480px fixed → overflowed iPhone) - currency-input switched to inputMode=decimal with live thousands separator - client-form Country/Timezone/Source/Preferred-Contact full-width <sm - contacts row restructured so Primary toggle + Remove get their own strip - customize-dashboard footer stacks vertically on mobile; Done full-width - interest-form client/berth pickers no longer cmdk-filter on UUID (typing "Carlos" now returns Carlos Vega instead of "No clients found") Data + consistency - SOURCES + SOURCE_LABELS + formatSource() in lib/constants; 9 surfaces now resolve interest/client source from one place - INTEREST_OUTCOMES adds lost_other (picker, badge, timeline) - Berth options natural-sort A1 → A2 → … → A10 via lib/utils/mooring-sort - archiver downgraded ^8 → ^7.0.1 so the GDPR export route compiles - TableBody last-row uses border-b-0 (not border-0); colored left-accent on the bottom berth row now renders - Hide Invite-to-Portal until port setting === true (was !== false default-show) - OwnerPicker primer query resolves entity name on first paint (no more UUID flash before the popover opens) Terminology - Replaced user-facing "Documenso" with "signing service" / "Generated EOI" / "Manual EOI" in 8 components (admin/internal references kept) - Plainer status-change copy on berth-detail-header Forms + editing - InlineEditableField gained a `date` variant (native picker); applied to company incorporation date and ready for other YYYY-MM-DD plaintext fields - Inline source picker on interest-tabs detail (was free text) - TagPicker self-hides when port has no tags AND nothing is selected - New ReminderDaysInput with preset chips (1d / 3d / 1wk / 2wk / 1mo / custom) - Compose dialog follow-up is now a toggle that reveals datetime picker Pipeline milestones - changeStageSchema accepts optional milestoneDate; service stamps it on the matching date column instead of always using now - MilestoneAdvanceButton popover collects a back-date before stage advance - Applied to every "Mark X manually" surface on the interest overview EOI / linked-berths polish - Add-bypass row aligned inline with toggle descriptions - Tooltips on "Specifically pitching" / "Mark in EOI bundle" explain their legal vs. public-map consequences Surfaces - Companies list now has the column picker + persisted hidden-column prefs - NotesList aggregate flag enabled on clients, companies, residential_clients (yachts already aggregated) ft/m unit toggle (interim, before drift fix) - "Berth size desired" gets a section-level ft/m toggle; per-field hint shows the converted value. Storage stays canonical-ft for now; the drift-safe persistence migration is the next step. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -1,6 +1,6 @@
|
||||
'use client';
|
||||
|
||||
import { Activity, Anchor, MapPin, MoreHorizontal, Pencil } from 'lucide-react';
|
||||
import { Activity, MoreHorizontal, Pencil } from 'lucide-react';
|
||||
import { useRouter, useParams } from 'next/navigation';
|
||||
|
||||
import { Button } from '@/components/ui/button';
|
||||
@@ -45,18 +45,51 @@ export function BerthCard({ berth }: BerthCardProps) {
|
||||
// already conveyed by the pill below, so the stripe is dock-keyed.
|
||||
const accentClass = mooringLetterDot(berth.mooringNumber) ?? 'bg-slate-300';
|
||||
|
||||
// Dimensions string
|
||||
let dimText: string | null = null;
|
||||
if (berth.lengthM || berth.widthM) {
|
||||
const l = berth.lengthM ?? '?';
|
||||
const w = berth.widthM ?? '?';
|
||||
dimText = `${l}m × ${w}m`;
|
||||
// Dimensions string — Length × Width × Draft (each segment is optional).
|
||||
// The avatar already conveys the mooring number, so this becomes the
|
||||
// primary "what is this berth" line.
|
||||
const dimParts: string[] = [];
|
||||
if (berth.lengthM) dimParts.push(`${berth.lengthM}m`);
|
||||
if (berth.widthM) dimParts.push(`${berth.widthM}m`);
|
||||
if (berth.draftM) dimParts.push(`${berth.draftM}m draft`);
|
||||
const dimText = dimParts.length > 0 ? dimParts.join(' × ') : null;
|
||||
|
||||
// Recommended boat size — the most rep-actionable signal in a glance
|
||||
// ("can my client's yacht park here?"). Tenure was previously here but
|
||||
// dropped: tenure is set per EOI/contract, not per berth, so showing
|
||||
// it as a berth property was misleading.
|
||||
let boatCapacityText: string | null = null;
|
||||
if (berth.nominalBoatSizeM) {
|
||||
boatCapacityText = `Fits up to ${berth.nominalBoatSizeM}m`;
|
||||
} else if (berth.nominalBoatSize) {
|
||||
boatCapacityText = `Fits up to ${berth.nominalBoatSize}ft`;
|
||||
}
|
||||
|
||||
// Water depth — operational; matters for deep-keel yachts.
|
||||
let waterDepthText: string | null = null;
|
||||
if (berth.waterDepthM) {
|
||||
const prefix = berth.waterDepthIsMinimum ? '≥ ' : '';
|
||||
waterDepthText = `${prefix}${berth.waterDepthM}m deep`;
|
||||
}
|
||||
|
||||
// Power label: combine capacity + voltage when both present.
|
||||
let powerText: string | null = null;
|
||||
if (berth.powerCapacity && berth.voltage) {
|
||||
powerText = `${berth.powerCapacity}A / ${berth.voltage}V`;
|
||||
} else if (berth.powerCapacity) {
|
||||
powerText = `${berth.powerCapacity}A`;
|
||||
} else if (berth.voltage) {
|
||||
powerText = `${berth.voltage}V`;
|
||||
}
|
||||
|
||||
// Secondary meta: boat-capacity · water-depth · price · power. All
|
||||
// optional; order favours the highest-utility scan signals first.
|
||||
const metaParts: string[] = [];
|
||||
if (dimText) metaParts.push(dimText);
|
||||
if (boatCapacityText) metaParts.push(boatCapacityText);
|
||||
if (waterDepthText) metaParts.push(waterDepthText);
|
||||
if (berth.price)
|
||||
metaParts.push(formatCurrency(berth.price, berth.priceCurrency, { maxFractionDigits: 0 }));
|
||||
if (powerText) metaParts.push(powerText);
|
||||
|
||||
const tags = berth.tags ?? [];
|
||||
|
||||
@@ -101,26 +134,27 @@ export function BerthCard({ berth }: BerthCardProps) {
|
||||
</DropdownMenu>
|
||||
}
|
||||
>
|
||||
<div className="flex items-start gap-3">
|
||||
<ListCardAvatar icon={<Anchor className="h-5 w-5" />} />
|
||||
<div className="flex items-center gap-3">
|
||||
{/* The mooring number IS the avatar — recognisable at a glance
|
||||
(A1, B12, …) and eliminates the duplicate berth-number heading
|
||||
that previously sat to the right of an anchor icon. */}
|
||||
<ListCardAvatar
|
||||
initials={berth.mooringNumber}
|
||||
className="text-base font-bold tracking-tight"
|
||||
/>
|
||||
<div className="min-w-0 flex-1">
|
||||
{/* Title row + spacer for actions button */}
|
||||
<div className="flex items-start justify-between gap-2">
|
||||
<h3 className="truncate text-base font-semibold tracking-tight text-foreground">
|
||||
{berth.mooringNumber}
|
||||
</h3>
|
||||
{/* Primary line: dimensions (L × W × Draft). The avatar
|
||||
already carries the area letter, so this slot becomes the
|
||||
"what fits here" answer. Falls back gracefully when
|
||||
dimensions aren't recorded yet. */}
|
||||
<div className="flex items-center justify-between gap-2">
|
||||
<p className="min-w-0 truncate text-sm font-semibold text-foreground">
|
||||
{dimText ?? <span className="font-normal text-muted-foreground">No dimensions</span>}
|
||||
</p>
|
||||
<span aria-hidden className="block h-9 w-9 shrink-0" />
|
||||
</div>
|
||||
|
||||
{/* Area subtitle */}
|
||||
{berth.area ? (
|
||||
<p className="mt-0.5 inline-flex items-center gap-1 truncate text-sm text-muted-foreground">
|
||||
<MapPin className="h-3.5 w-3.5 shrink-0 text-muted-foreground/70" aria-hidden />
|
||||
<span className="truncate">{berth.area}</span>
|
||||
</p>
|
||||
) : null}
|
||||
|
||||
{/* Dimensions · Price meta line */}
|
||||
{/* Meta line: tenure · price · power. All optional. */}
|
||||
{metaParts.length > 0 ? (
|
||||
<div className="mt-0.5 flex flex-wrap items-center gap-x-1.5 text-xs text-muted-foreground">
|
||||
{metaParts.map((part, i) => (
|
||||
@@ -132,8 +166,8 @@ export function BerthCard({ berth }: BerthCardProps) {
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
{/* Status pill */}
|
||||
<div className="mt-1.5">
|
||||
{/* Status pill + tags */}
|
||||
<div className="mt-1.5 flex flex-wrap items-center gap-1.5">
|
||||
<span
|
||||
className={cn(
|
||||
'inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-medium',
|
||||
@@ -142,21 +176,15 @@ export function BerthCard({ berth }: BerthCardProps) {
|
||||
>
|
||||
{statusLabel}
|
||||
</span>
|
||||
{tags.slice(0, 2).map((tag) => (
|
||||
<TagBadge key={tag.id} name={tag.name} color={tag.color} />
|
||||
))}
|
||||
{tags.length > 2 ? (
|
||||
<span className="inline-flex items-center rounded-full bg-secondary px-2 py-0.5 text-xs text-secondary-foreground">
|
||||
+{tags.length - 2}
|
||||
</span>
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
{/* Tags */}
|
||||
{tags.length > 0 ? (
|
||||
<div className="mt-2 flex flex-wrap gap-1">
|
||||
{tags.slice(0, 2).map((tag) => (
|
||||
<TagBadge key={tag.id} name={tag.name} color={tag.color} />
|
||||
))}
|
||||
{tags.length > 2 ? (
|
||||
<span className="inline-flex items-center rounded-full bg-secondary px-2 py-0.5 text-xs text-secondary-foreground">
|
||||
+{tags.length - 2}
|
||||
</span>
|
||||
) : null}
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
</ListCard>
|
||||
|
||||
@@ -222,8 +222,9 @@ function StatusChangeDialog({
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Picking an interest auto-creates a primary berth link if one doesn't already
|
||||
exist, so the deal timeline + heat scorer attribute the change correctly.
|
||||
Link this status change to the prospect (interest) it relates to. The change will
|
||||
appear on that interest's timeline, and the berth gets attached to the prospect
|
||||
automatically if it wasn't already.
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
@@ -31,7 +31,7 @@ export function BerthDetail({ berthId }: BerthDetailProps) {
|
||||
});
|
||||
|
||||
const { setChrome } = useMobileChrome();
|
||||
const titleForChrome: string | null = data?.mooringNumber ?? null;
|
||||
const titleForChrome: string | null = data?.mooringNumber ? `Berth ${data.mooringNumber}` : null;
|
||||
useEffect(() => {
|
||||
setChrome({ title: titleForChrome, showBackButton: true });
|
||||
return () => setChrome({ title: null, showBackButton: false });
|
||||
|
||||
@@ -192,7 +192,7 @@ export function BerthForm({ berth, open, onOpenChange }: BerthFormProps) {
|
||||
|
||||
return (
|
||||
<Sheet open={open} onOpenChange={onOpenChange}>
|
||||
<SheetContent className="w-[480px] sm:w-[540px] overflow-y-auto">
|
||||
<SheetContent className="w-full sm:w-[540px] sm:max-w-none overflow-y-auto">
|
||||
<SheetHeader>
|
||||
<SheetTitle>Edit Berth {berth.mooringNumber}</SheetTitle>
|
||||
</SheetHeader>
|
||||
|
||||
@@ -19,7 +19,7 @@ import {
|
||||
import { TableSkeleton } from '@/components/shared/loading-skeleton';
|
||||
import { EmptyState } from '@/components/shared/empty-state';
|
||||
import { Bookmark } from 'lucide-react';
|
||||
import { PIPELINE_STAGES, stageLabel } from '@/lib/constants';
|
||||
import { PIPELINE_STAGES, stageLabel, formatSource } from '@/lib/constants';
|
||||
import type { InterestRow } from '@/components/interests/interest-columns';
|
||||
|
||||
interface BerthInterestsTabProps {
|
||||
@@ -46,13 +46,6 @@ const CATEGORY_LABELS: Record<string, string> = {
|
||||
general_interest: 'General Interest',
|
||||
};
|
||||
|
||||
const SOURCE_LABELS: Record<string, string> = {
|
||||
website: 'Website',
|
||||
manual: 'Manual',
|
||||
referral: 'Referral',
|
||||
broker: 'Broker',
|
||||
};
|
||||
|
||||
interface ListResponse {
|
||||
data: InterestRow[];
|
||||
total: number;
|
||||
@@ -179,9 +172,7 @@ export function BerthInterestsTab({ berthId }: BerthInterestsTabProps) {
|
||||
<td className="px-3 py-2 text-muted-foreground">
|
||||
{i.leadCategory ? (CATEGORY_LABELS[i.leadCategory] ?? i.leadCategory) : '-'}
|
||||
</td>
|
||||
<td className="px-3 py-2 text-muted-foreground">
|
||||
{i.source ? (SOURCE_LABELS[i.source] ?? i.source) : '-'}
|
||||
</td>
|
||||
<td className="px-3 py-2 text-muted-foreground">{formatSource(i.source) ?? '-'}</td>
|
||||
<td className="px-3 py-2 text-xs text-muted-foreground">
|
||||
{new Date(i.createdAt).toLocaleDateString()}
|
||||
</td>
|
||||
|
||||
@@ -8,6 +8,7 @@ import { FilterBar } from '@/components/shared/filter-bar';
|
||||
import { PageHeader } from '@/components/shared/page-header';
|
||||
import { SavedViewsDropdown } from '@/components/shared/saved-views-dropdown';
|
||||
import { ColumnPicker } from '@/components/shared/column-picker';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { EmptyState } from '@/components/shared/empty-state';
|
||||
import { usePaginatedQuery } from '@/hooks/use-paginated-query';
|
||||
import { useRealtimeInvalidation } from '@/hooks/use-realtime-invalidation';
|
||||
@@ -63,11 +64,27 @@ export function BerthList() {
|
||||
|
||||
<div className="flex items-center gap-2 flex-wrap">
|
||||
<FilterBar
|
||||
filters={berthFilterDefinitions}
|
||||
// Search is hoisted out of the popover into the inline input
|
||||
// below — keeps the daily "find by mooring/area" lookup one
|
||||
// tap away instead of buried behind the Filters dropdown.
|
||||
filters={berthFilterDefinitions.filter((d) => d.key !== 'search')}
|
||||
values={filters}
|
||||
onChange={setFilter}
|
||||
onClear={clearFilters}
|
||||
/>
|
||||
<Input
|
||||
type="search"
|
||||
inputMode="search"
|
||||
placeholder="Search mooring or area…"
|
||||
aria-label="Search berths"
|
||||
value={(filters.search as string | undefined) ?? ''}
|
||||
onChange={(e) => setFilter('search', e.target.value || undefined)}
|
||||
// flex-1 + min-w-0 lets the input expand to fill the row's
|
||||
// remaining width on mobile (where space is at a premium).
|
||||
// sm:max-w-xs caps it at 320px on desktop so it doesn't grow
|
||||
// absurdly wide on a 2k monitor.
|
||||
className="h-8 min-w-0 flex-1 sm:max-w-xs"
|
||||
/>
|
||||
<div className="ml-auto flex items-center gap-2">
|
||||
<SavedViewsDropdown
|
||||
entityType="berths"
|
||||
@@ -101,6 +118,11 @@ export function BerthList() {
|
||||
onRowClick={(row) => router.push(`/${params.portSlug}/berths/${row.id}`)}
|
||||
getRowClassName={(row) => mooringLetterTone(row.mooringNumber)}
|
||||
cardRender={(row) => <BerthCard berth={row.original} />}
|
||||
// Group adjacent cards by dock letter (area) on mobile — adds a
|
||||
// dim divider + uppercased label above the first card of each
|
||||
// group. Data is already sorted by mooringNumber (A1, A2, …, B1,
|
||||
// B2, …) so consecutive rows naturally share dock letters.
|
||||
mobileGroupBy={(row) => row.area ?? 'Unassigned'}
|
||||
emptyState={
|
||||
<EmptyState
|
||||
icon={Anchor}
|
||||
|
||||
@@ -1,13 +1,17 @@
|
||||
'use client';
|
||||
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useMutation, useQueryClient } from '@tanstack/react-query';
|
||||
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
import { type DetailTab } from '@/components/shared/detail-layout';
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { EntityActivityFeed } from '@/components/shared/entity-activity-feed';
|
||||
import { InlineEditableField } from '@/components/shared/inline-editable-field';
|
||||
import { InlineTagEditor } from '@/components/shared/inline-tag-editor';
|
||||
import { apiFetch } from '@/lib/api/client';
|
||||
import { formatCurrency } from '@/lib/utils/currency';
|
||||
import {
|
||||
BERTH_ACCESS_OPTIONS,
|
||||
BERTH_BOLLARD_CAPACITIES,
|
||||
@@ -64,6 +68,40 @@ type BerthData = {
|
||||
tags: Array<{ id: string; name: string; color: string }>;
|
||||
};
|
||||
|
||||
/**
|
||||
* Compact ft/m segmented control for the Specifications card. Two
|
||||
* tappable pills with `min-h-[36px]` for an Apple-HIG-friendly touch
|
||||
* target. The active option gets the brand primary background; the
|
||||
* other reads as muted.
|
||||
*/
|
||||
function UnitToggle({ value, onChange }: { value: 'ft' | 'm'; onChange: (v: 'ft' | 'm') => void }) {
|
||||
return (
|
||||
<div
|
||||
role="tablist"
|
||||
aria-label="Display unit"
|
||||
className="inline-flex items-center gap-0.5 rounded-md border bg-muted/40 p-0.5 text-xs"
|
||||
>
|
||||
{(['ft', 'm'] as const).map((opt) => (
|
||||
<button
|
||||
key={opt}
|
||||
type="button"
|
||||
role="tab"
|
||||
aria-selected={value === opt}
|
||||
onClick={() => onChange(opt)}
|
||||
className={cn(
|
||||
'min-h-[28px] min-w-[40px] rounded px-2 font-medium transition-colors',
|
||||
value === opt
|
||||
? 'bg-background text-foreground shadow-sm'
|
||||
: 'text-muted-foreground hover:text-foreground',
|
||||
)}
|
||||
>
|
||||
{opt}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function SpecRow({ label, value }: { label: string; value: React.ReactNode }) {
|
||||
if (!value && value !== 0 && value !== false) return null;
|
||||
// Mobile-first: stack vertically with label on top so long values
|
||||
@@ -104,6 +142,7 @@ function useBerthPatch(berthId: string) {
|
||||
function EditableSpec({
|
||||
label,
|
||||
value,
|
||||
displayValue,
|
||||
field,
|
||||
patch,
|
||||
numeric = false,
|
||||
@@ -113,6 +152,9 @@ function EditableSpec({
|
||||
}: {
|
||||
label: string;
|
||||
value: string | null;
|
||||
/** Optional formatted version for display only (currency, percent,
|
||||
* unit-suffixed). The edit input still works against the raw `value`. */
|
||||
displayValue?: string | null;
|
||||
field: string;
|
||||
patch: ReturnType<typeof useBerthPatch>;
|
||||
numeric?: boolean;
|
||||
@@ -142,6 +184,7 @@ function EditableSpec({
|
||||
) : (
|
||||
<InlineEditableField
|
||||
value={value}
|
||||
displayValue={displayValue}
|
||||
onSave={async (next) => {
|
||||
if (numeric) {
|
||||
if (next === null || next.trim() === '') {
|
||||
@@ -170,30 +213,33 @@ function EditableSpec({
|
||||
);
|
||||
}
|
||||
|
||||
// Conversion factors between feet and meters. 0.3048 is the exact
|
||||
// definition (1 ft = 0.3048 m by international agreement).
|
||||
const FT_TO_M = 0.3048;
|
||||
const M_TO_FT = 1 / FT_TO_M;
|
||||
|
||||
function OverviewTab({ berth }: { berth: BerthData }) {
|
||||
const patch = useBerthPatch(berth.id);
|
||||
// Round to at most 2 decimals; trim trailing zeros so "5.00" -> "5".
|
||||
const fmt = (v: string | null, fractionDigits = 2): string | null => {
|
||||
if (v == null || v === '') return null;
|
||||
const n = Number(v);
|
||||
if (Number.isNaN(n)) return v;
|
||||
return n.toLocaleString('en-US', {
|
||||
minimumFractionDigits: 0,
|
||||
maximumFractionDigits: fractionDigits,
|
||||
});
|
||||
};
|
||||
// User-selected display unit for dimensions. Persisted in localStorage
|
||||
// so reps' preferred unit sticks across navigations + sessions.
|
||||
const [units, setUnits] = useState<'ft' | 'm'>('ft');
|
||||
useEffect(() => {
|
||||
const stored = localStorage.getItem('berth-overview-units');
|
||||
if (stored === 'ft' || stored === 'm') setUnits(stored);
|
||||
}, []);
|
||||
useEffect(() => {
|
||||
localStorage.setItem('berth-overview-units', units);
|
||||
}, [units]);
|
||||
|
||||
// Read-only display helper for the metric column on dimensions —
|
||||
// mirrors the pre-edit "X ft / Y m" rendering for fields where only
|
||||
// the foot value is editable today.
|
||||
const formatNominalBoatSize = (ft: string | null, m: string | null): string | null => {
|
||||
const ftFmt = fmt(ft, 0);
|
||||
const mFmt = fmt(m);
|
||||
const parts: string[] = [];
|
||||
if (ftFmt) parts.push(`${ftFmt} ft`);
|
||||
if (mFmt) parts.push(`${mFmt} m`);
|
||||
return parts.length > 0 ? parts.join(' / ') : null;
|
||||
};
|
||||
const u = units;
|
||||
// For each dimension, pick the column matching the selected unit and
|
||||
// point linkedUnit at the opposite column so edits keep both in sync.
|
||||
const dim = (ftField: string, mField: string) =>
|
||||
units === 'ft'
|
||||
? { field: ftField, linkedUnit: { field: mField, multiplier: FT_TO_M } }
|
||||
: { field: mField, linkedUnit: { field: ftField, multiplier: M_TO_FT } };
|
||||
const dimValue = (ftValue: string | null, mValue: string | null) =>
|
||||
units === 'ft' ? ftValue : mValue;
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
@@ -204,62 +250,50 @@ function OverviewTab({ berth }: { berth: BerthData }) {
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
{/* Specifications */}
|
||||
<Card>
|
||||
<CardHeader className="pb-3">
|
||||
<CardHeader className="flex flex-row items-center justify-between gap-2 pb-3">
|
||||
<CardTitle className="text-sm font-medium">Specifications</CardTitle>
|
||||
<UnitToggle value={units} onChange={setUnits} />
|
||||
</CardHeader>
|
||||
<CardContent className="pt-0 divide-y">
|
||||
<EditableSpec
|
||||
label="Length (ft)"
|
||||
value={berth.lengthFt}
|
||||
field="lengthFt"
|
||||
label={`Length (${u})`}
|
||||
value={dimValue(berth.lengthFt, berth.lengthM)}
|
||||
{...dim('lengthFt', 'lengthM')}
|
||||
patch={patch}
|
||||
numeric
|
||||
suffix="ft"
|
||||
linkedUnit={{ field: 'lengthM', multiplier: 0.3048 }}
|
||||
suffix={u}
|
||||
/>
|
||||
<EditableSpec
|
||||
label="Width (ft)"
|
||||
value={berth.widthFt}
|
||||
field="widthFt"
|
||||
label={`Width (${u})`}
|
||||
value={dimValue(berth.widthFt, berth.widthM)}
|
||||
{...dim('widthFt', 'widthM')}
|
||||
patch={patch}
|
||||
numeric
|
||||
suffix="ft"
|
||||
linkedUnit={{ field: 'widthM', multiplier: 0.3048 }}
|
||||
suffix={u}
|
||||
/>
|
||||
<EditableSpec
|
||||
label="Draft (ft)"
|
||||
value={berth.draftFt}
|
||||
field="draftFt"
|
||||
label={`Draft (${u})`}
|
||||
value={dimValue(berth.draftFt, berth.draftM)}
|
||||
{...dim('draftFt', 'draftM')}
|
||||
patch={patch}
|
||||
numeric
|
||||
suffix="ft"
|
||||
linkedUnit={{ field: 'draftM', multiplier: 0.3048 }}
|
||||
suffix={u}
|
||||
/>
|
||||
<EditableSpec
|
||||
label="Nominal Boat Size (ft)"
|
||||
value={berth.nominalBoatSize}
|
||||
field="nominalBoatSize"
|
||||
label={`Nominal Boat Size (${u})`}
|
||||
value={dimValue(berth.nominalBoatSize, berth.nominalBoatSizeM)}
|
||||
{...dim('nominalBoatSize', 'nominalBoatSizeM')}
|
||||
patch={patch}
|
||||
numeric
|
||||
suffix="ft"
|
||||
linkedUnit={{ field: 'nominalBoatSizeM', multiplier: 0.3048 }}
|
||||
/>
|
||||
<SpecRow
|
||||
label="Nominal Boat Size (m)"
|
||||
value={
|
||||
formatNominalBoatSize(berth.nominalBoatSize, berth.nominalBoatSizeM)?.split(
|
||||
' / ',
|
||||
)[1] ?? null
|
||||
}
|
||||
suffix={u}
|
||||
/>
|
||||
<EditableSpec
|
||||
label="Water Depth (ft)"
|
||||
value={berth.waterDepth}
|
||||
field="waterDepth"
|
||||
label={`Water Depth (${u})`}
|
||||
value={dimValue(berth.waterDepth, berth.waterDepthM)}
|
||||
{...dim('waterDepth', 'waterDepthM')}
|
||||
patch={patch}
|
||||
numeric
|
||||
suffix="ft"
|
||||
linkedUnit={{ field: 'waterDepthM', multiplier: 0.3048 }}
|
||||
suffix={u}
|
||||
/>
|
||||
<EditableSpec
|
||||
label="Mooring Type"
|
||||
@@ -371,6 +405,11 @@ function OverviewTab({ berth }: { berth: BerthData }) {
|
||||
<EditableSpec
|
||||
label={`Price (${berth.priceCurrency || 'USD'})`}
|
||||
value={berth.price}
|
||||
displayValue={
|
||||
berth.price
|
||||
? formatCurrency(berth.price, berth.priceCurrency, { maxFractionDigits: 0 })
|
||||
: null
|
||||
}
|
||||
field="price"
|
||||
patch={patch}
|
||||
numeric
|
||||
|
||||
Reference in New Issue
Block a user