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>

src/components/berths/berth-tabs.tsx

@@ -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