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:
@@ -164,7 +164,7 @@ export function BulkArchiveWizard({ open, onOpenChange, clientIds, onSuccess }:
|
||||
|
||||
<div className="rounded-md border bg-muted/30 p-3 text-xs text-muted-foreground">
|
||||
Low-stakes defaults: release available/under-offer berths, keep sold ones, cancel
|
||||
reservations, leave invoices/Documenso envelopes alone. Yachts stay on the
|
||||
reservations, leave invoices/signing envelopes alone. Yachts stay on the
|
||||
archived client. To customise per-client, archive that client individually
|
||||
instead.
|
||||
</div>
|
||||
|
||||
@@ -17,16 +17,9 @@ import {
|
||||
deriveInitials,
|
||||
} from '@/components/shared/list-card';
|
||||
import { getCountryName } from '@/lib/i18n/countries';
|
||||
import { stageBadgeClass, stageLabel } from '@/lib/constants';
|
||||
import { stageBadgeClass, stageLabel, formatSource } from '@/lib/constants';
|
||||
import type { ClientRow } from './client-columns';
|
||||
|
||||
const SOURCE_LABELS: Record<string, string> = {
|
||||
website: 'Website',
|
||||
manual: 'Manual',
|
||||
referral: 'Referral',
|
||||
broker: 'Broker',
|
||||
};
|
||||
|
||||
interface ClientCardProps {
|
||||
client: ClientRow;
|
||||
portSlug: string;
|
||||
@@ -38,7 +31,7 @@ export function ClientCard({ client, portSlug, onEdit, onArchive }: ClientCardPr
|
||||
// Card display: prefer email, fall back to phone.
|
||||
const primaryContactValue = client.primaryEmail ?? client.primaryPhone ?? null;
|
||||
const nationality = client.nationalityIso ? getCountryName(client.nationalityIso, 'en') : null;
|
||||
const sourceLabel = client.source ? (SOURCE_LABELS[client.source] ?? client.source) : null;
|
||||
const sourceLabel = formatSource(client.source);
|
||||
const tags = client.tags ?? [];
|
||||
|
||||
const meta = [nationality, sourceLabel].filter(Boolean) as string[];
|
||||
|
||||
@@ -15,7 +15,7 @@ import {
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
|
||||
import { getCountryName } from '@/lib/i18n/countries';
|
||||
import { stageDotClass, stageLabel } from '@/lib/constants';
|
||||
import { stageDotClass, stageLabel, formatSource } from '@/lib/constants';
|
||||
import { cn } from '@/lib/utils';
|
||||
import type { ColumnPickerOption } from '@/components/shared/column-picker';
|
||||
|
||||
@@ -81,13 +81,6 @@ export const CLIENT_COLUMN_OPTIONS: ColumnPickerOption[] = [
|
||||
*/
|
||||
export const CLIENT_DEFAULT_HIDDEN: string[] = ['latestStage'];
|
||||
|
||||
const SOURCE_LABELS: Record<string, string> = {
|
||||
website: 'Website',
|
||||
manual: 'Manual',
|
||||
referral: 'Referral',
|
||||
broker: 'Broker',
|
||||
};
|
||||
|
||||
interface GetColumnsOptions {
|
||||
portSlug: string;
|
||||
onEdit: (client: ClientRow) => void;
|
||||
@@ -191,10 +184,11 @@ export function getClientColumns({
|
||||
header: 'Source',
|
||||
cell: ({ getValue }) => {
|
||||
const source = getValue() as string | null;
|
||||
if (!source) return <span className="text-muted-foreground">-</span>;
|
||||
const label = formatSource(source);
|
||||
if (!label) return <span className="text-muted-foreground">-</span>;
|
||||
return (
|
||||
<Badge variant="outline" className="capitalize text-xs">
|
||||
{SOURCE_LABELS[source] ?? source}
|
||||
{label}
|
||||
</Badge>
|
||||
);
|
||||
},
|
||||
|
||||
@@ -131,7 +131,7 @@ export function ClientDetailHeader({ client }: ClientDetailHeaderProps) {
|
||||
</a>
|
||||
</Button>
|
||||
) : null}
|
||||
{!isArchived && client.clientPortalEnabled !== false ? (
|
||||
{!isArchived && client.clientPortalEnabled === true ? (
|
||||
<div className="hidden sm:inline-flex">
|
||||
<PortalInviteButton
|
||||
clientId={client.id}
|
||||
|
||||
@@ -23,7 +23,7 @@ export const clientFilterDefinitions: FilterDefinition[] = [
|
||||
key: 'nationality',
|
||||
label: 'Country',
|
||||
type: 'text',
|
||||
placeholder: 'Filter by nationality...',
|
||||
placeholder: 'Filter by country...',
|
||||
},
|
||||
{
|
||||
key: 'includeArchived',
|
||||
|
||||
@@ -26,6 +26,7 @@ import { PhoneInput } from '@/components/shared/phone-input';
|
||||
import { DedupSuggestionPanel } from '@/components/clients/dedup-suggestion-panel';
|
||||
import { apiFetch } from '@/lib/api/client';
|
||||
import { createClientSchema, type CreateClientInput } from '@/lib/validators/clients';
|
||||
import { SOURCES } from '@/lib/constants';
|
||||
import type { CountryCode } from '@/lib/i18n/countries';
|
||||
import { primaryTimezoneFor } from '@/lib/i18n/timezones';
|
||||
|
||||
@@ -188,8 +189,8 @@ export function ClientForm({ open, onOpenChange, client, onUseExistingClient }:
|
||||
Basic Information
|
||||
</h3>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="col-span-2 space-y-1">
|
||||
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
|
||||
<div className="sm:col-span-2 space-y-1">
|
||||
<Label>Full Name *</Label>
|
||||
<Input {...register('fullName')} placeholder="John Smith" />
|
||||
{errors.fullName && (
|
||||
@@ -198,7 +199,7 @@ export function ClientForm({ open, onOpenChange, client, onUseExistingClient }:
|
||||
</div>
|
||||
|
||||
<div className="space-y-1">
|
||||
<Label>Nationality</Label>
|
||||
<Label>Country</Label>
|
||||
<CountryCombobox
|
||||
value={watch('nationalityIso')}
|
||||
onChange={(iso) => setValue('nationalityIso', iso ?? undefined)}
|
||||
@@ -235,102 +236,107 @@ export function ClientForm({ open, onOpenChange, client, onUseExistingClient }:
|
||||
{fields.map((field, index) => (
|
||||
<div
|
||||
key={field.id}
|
||||
className="grid grid-cols-12 gap-2 items-end p-3 rounded-lg border bg-muted/30"
|
||||
className="space-y-3 p-3 rounded-lg border bg-muted/30"
|
||||
>
|
||||
<div className="col-span-3 space-y-1">
|
||||
<Label className="text-xs">Channel</Label>
|
||||
<Select
|
||||
value={watch(`contacts.${index}.channel`)}
|
||||
onValueChange={(v) =>
|
||||
setValue(
|
||||
`contacts.${index}.channel`,
|
||||
v as 'email' | 'phone' | 'whatsapp' | 'other',
|
||||
)
|
||||
}
|
||||
>
|
||||
<SelectTrigger className="h-8">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="email">Email</SelectItem>
|
||||
<SelectItem value="phone">Phone</SelectItem>
|
||||
<SelectItem value="whatsapp">WhatsApp</SelectItem>
|
||||
<SelectItem value="other">Other</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 gap-3 sm:grid-cols-12 sm:items-end sm:gap-2">
|
||||
<div className="space-y-1 sm:col-span-3">
|
||||
<Label className="text-xs">Channel</Label>
|
||||
<Select
|
||||
value={watch(`contacts.${index}.channel`)}
|
||||
onValueChange={(v) =>
|
||||
setValue(
|
||||
`contacts.${index}.channel`,
|
||||
v as 'email' | 'phone' | 'whatsapp' | 'other',
|
||||
)
|
||||
}
|
||||
>
|
||||
<SelectTrigger className="h-9 sm:h-8">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="email">Email</SelectItem>
|
||||
<SelectItem value="phone">Phone</SelectItem>
|
||||
<SelectItem value="whatsapp">WhatsApp</SelectItem>
|
||||
<SelectItem value="other">Other</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<div className="col-span-5 space-y-1">
|
||||
<Label className="text-xs">Value</Label>
|
||||
{(() => {
|
||||
const channel = watch(`contacts.${index}.channel`);
|
||||
if (channel === 'phone' || channel === 'whatsapp') {
|
||||
const e164 = watch(`contacts.${index}.valueE164`) ?? null;
|
||||
const country =
|
||||
(watch(`contacts.${index}.valueCountry`) as CountryCode | undefined) ??
|
||||
undefined;
|
||||
<div className="space-y-1 sm:col-span-5">
|
||||
<Label className="text-xs">Value</Label>
|
||||
{(() => {
|
||||
const channel = watch(`contacts.${index}.channel`);
|
||||
if (channel === 'phone' || channel === 'whatsapp') {
|
||||
const e164 = watch(`contacts.${index}.valueE164`) ?? null;
|
||||
const country =
|
||||
(watch(`contacts.${index}.valueCountry`) as CountryCode | undefined) ??
|
||||
undefined;
|
||||
return (
|
||||
<PhoneInput
|
||||
value={
|
||||
e164 || country
|
||||
? {
|
||||
e164: e164 ?? null,
|
||||
country: country ?? 'US',
|
||||
}
|
||||
: null
|
||||
}
|
||||
onChange={(v) => {
|
||||
setValue(`contacts.${index}.value`, v.e164 ?? '');
|
||||
setValue(`contacts.${index}.valueE164`, v.e164 ?? undefined);
|
||||
setValue(`contacts.${index}.valueCountry`, v.country);
|
||||
}}
|
||||
data-testid={`contact-${index}-phone`}
|
||||
/>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<PhoneInput
|
||||
value={
|
||||
e164 || country
|
||||
? {
|
||||
e164: e164 ?? null,
|
||||
country: country ?? 'US',
|
||||
}
|
||||
: null
|
||||
}
|
||||
onChange={(v) => {
|
||||
setValue(`contacts.${index}.value`, v.e164 ?? '');
|
||||
setValue(`contacts.${index}.valueE164`, v.e164 ?? undefined);
|
||||
setValue(`contacts.${index}.valueCountry`, v.country);
|
||||
}}
|
||||
data-testid={`contact-${index}-phone`}
|
||||
<Input
|
||||
{...register(`contacts.${index}.value`)}
|
||||
className="h-9 sm:h-8"
|
||||
placeholder={channel === 'email' ? 'email@example.com' : 'value'}
|
||||
/>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<Input
|
||||
{...register(`contacts.${index}.value`)}
|
||||
className="h-8"
|
||||
placeholder={channel === 'email' ? 'email@example.com' : 'value'}
|
||||
/>
|
||||
);
|
||||
})()}
|
||||
})()}
|
||||
</div>
|
||||
|
||||
<div className="space-y-1 sm:col-span-4">
|
||||
<Label className="text-xs">
|
||||
{watch(`contacts.${index}.channel`) === 'other' ? 'Specify' : 'Label'}
|
||||
</Label>
|
||||
<Input
|
||||
{...register(`contacts.${index}.label`)}
|
||||
className="h-9 sm:h-8"
|
||||
placeholder={
|
||||
watch(`contacts.${index}.channel`) === 'other'
|
||||
? 'e.g. Telegram, Signal'
|
||||
: 'work'
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-span-2 space-y-1">
|
||||
<Label className="text-xs">
|
||||
{watch(`contacts.${index}.channel`) === 'other' ? 'Specify' : 'Label'}
|
||||
</Label>
|
||||
<Input
|
||||
{...register(`contacts.${index}.label`)}
|
||||
className="h-8"
|
||||
placeholder={
|
||||
watch(`contacts.${index}.channel`) === 'other'
|
||||
? 'e.g. Telegram, Signal'
|
||||
: 'work'
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="col-span-1 flex items-center gap-1 pb-1">
|
||||
<Checkbox
|
||||
checked={watch(`contacts.${index}.isPrimary`)}
|
||||
onCheckedChange={(v) => setValue(`contacts.${index}.isPrimary`, !!v)}
|
||||
/>
|
||||
<Label className="text-xs">Primary</Label>
|
||||
</div>
|
||||
|
||||
<div className="col-span-1 flex justify-end pb-1">
|
||||
{/* Bottom strip: Primary toggle left, delete right. Sits on
|
||||
its own row on every breakpoint so neither control gets
|
||||
squashed by the field columns above. */}
|
||||
<div className="flex items-center justify-between gap-3">
|
||||
<label className="flex items-center gap-2 text-sm cursor-pointer select-none">
|
||||
<Checkbox
|
||||
checked={watch(`contacts.${index}.isPrimary`)}
|
||||
onCheckedChange={(v) => setValue(`contacts.${index}.isPrimary`, !!v)}
|
||||
/>
|
||||
<span className="font-medium">Primary contact</span>
|
||||
</label>
|
||||
{fields.length > 1 && (
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-7 w-7 text-destructive"
|
||||
size="sm"
|
||||
className="h-8 text-destructive hover:text-destructive"
|
||||
onClick={() => remove(index)}
|
||||
>
|
||||
<Trash2 className="h-3.5 w-3.5" />
|
||||
<Trash2 className="mr-1 h-3.5 w-3.5" />
|
||||
Remove
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
@@ -346,7 +352,7 @@ export function ClientForm({ open, onOpenChange, client, onUseExistingClient }:
|
||||
<h3 className="text-sm font-medium text-muted-foreground uppercase tracking-wide">
|
||||
Source & Preferences
|
||||
</h3>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
|
||||
<div className="space-y-1">
|
||||
<Label>Source</Label>
|
||||
<Select
|
||||
@@ -359,11 +365,11 @@ export function ClientForm({ open, onOpenChange, client, onUseExistingClient }:
|
||||
<SelectValue placeholder="Select source" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="website">Website</SelectItem>
|
||||
<SelectItem value="manual">Manual</SelectItem>
|
||||
<SelectItem value="referral">Referral</SelectItem>
|
||||
<SelectItem value="broker">Broker</SelectItem>
|
||||
<SelectItem value="other">Other</SelectItem>
|
||||
{SOURCES.map((s) => (
|
||||
<SelectItem key={s.value} value={s.value}>
|
||||
{s.label}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
@@ -394,7 +400,7 @@ export function ClientForm({ open, onOpenChange, client, onUseExistingClient }:
|
||||
data-testid="client-timezone"
|
||||
/>
|
||||
</div>
|
||||
<div className="col-span-2 space-y-1">
|
||||
<div className="sm:col-span-2 space-y-1">
|
||||
<Label>Source Details</Label>
|
||||
<Input {...register('sourceDetails')} placeholder="Referred by John Doe" />
|
||||
</div>
|
||||
|
||||
@@ -38,6 +38,7 @@ import {
|
||||
type ClientRow,
|
||||
} from '@/components/clients/client-columns';
|
||||
import { ColumnPicker } from '@/components/shared/column-picker';
|
||||
import { useCreateFromUrl } from '@/hooks/use-create-from-url';
|
||||
import { usePaginatedQuery } from '@/hooks/use-paginated-query';
|
||||
import { useRealtimeInvalidation } from '@/hooks/use-realtime-invalidation';
|
||||
import { useTablePreferences } from '@/hooks/use-table-preferences';
|
||||
@@ -49,6 +50,7 @@ export function ClientList() {
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
const [createOpen, setCreateOpen] = useState(false);
|
||||
useCreateFromUrl(() => setCreateOpen(true));
|
||||
const [editClient, setEditClient] = useState<ClientRow | null>(null);
|
||||
const [archiveClient, setArchiveClient] = useState<ClientRow | null>(null);
|
||||
const [tagDialog, setTagDialog] = useState<{ ids: string[]; mode: 'add' | 'remove' } | null>(
|
||||
@@ -141,17 +143,9 @@ export function ClientList() {
|
||||
title="Clients"
|
||||
description="Manage your client records"
|
||||
variant="gradient"
|
||||
actions={
|
||||
<PermissionGate resource="clients" action="create">
|
||||
<Button size="sm" onClick={() => setCreateOpen(true)}>
|
||||
<Plus className="mr-1.5 h-4 w-4" />
|
||||
New Client
|
||||
</Button>
|
||||
</PermissionGate>
|
||||
}
|
||||
/>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
<FilterBar
|
||||
filters={clientFilterDefinitions}
|
||||
values={filters}
|
||||
@@ -171,6 +165,16 @@ export function ClientList() {
|
||||
onChange={setHidden}
|
||||
onSaveView={() => setSaveViewOpen(true)}
|
||||
/>
|
||||
{/* New Client moved out of PageHeader actions and into the
|
||||
filter row. Saves a row on mobile (no more dedicated
|
||||
actions strip). ml-auto keeps the primary action at the
|
||||
far-right edge, which is where reps look first. */}
|
||||
<PermissionGate resource="clients" action="create">
|
||||
<Button size="sm" className="ml-auto" onClick={() => setCreateOpen(true)}>
|
||||
<Plus className="mr-1.5 h-4 w-4" />
|
||||
New Client
|
||||
</Button>
|
||||
</PermissionGate>
|
||||
</div>
|
||||
|
||||
<SaveViewDialog
|
||||
|
||||
@@ -20,6 +20,7 @@ import { ContactsEditor } from '@/components/clients/contacts-editor';
|
||||
import { AddressesEditor, type Address } from '@/components/shared/addresses-editor';
|
||||
import { EntityActivityFeed } from '@/components/shared/entity-activity-feed';
|
||||
import { apiFetch } from '@/lib/api/client';
|
||||
import { SOURCES } from '@/lib/constants';
|
||||
|
||||
type ClientPatchField =
|
||||
| 'fullName'
|
||||
@@ -31,13 +32,7 @@ type ClientPatchField =
|
||||
| 'source'
|
||||
| 'sourceDetails';
|
||||
|
||||
const SOURCE_OPTIONS = [
|
||||
{ value: 'website', label: 'Website' },
|
||||
{ value: 'manual', label: 'Manual' },
|
||||
{ value: 'referral', label: 'Referral' },
|
||||
{ value: 'broker', label: 'Broker' },
|
||||
{ value: 'other', label: 'Other' },
|
||||
];
|
||||
const SOURCE_OPTIONS = SOURCES.map((s) => ({ value: s.value, label: s.label }));
|
||||
|
||||
const CONTACT_METHOD_OPTIONS = [
|
||||
{ value: 'email', label: 'Email' },
|
||||
@@ -289,10 +284,10 @@ export function getClientTabs({ clientId, currentUserId, client }: ClientTabsOpt
|
||||
badge: client.noteCount,
|
||||
content: (
|
||||
<NotesList
|
||||
aggregate
|
||||
entityType="clients"
|
||||
entityId={clientId}
|
||||
currentUserId={currentUserId}
|
||||
aggregate
|
||||
/>
|
||||
),
|
||||
},
|
||||
|
||||
@@ -477,12 +477,12 @@ export function SmartArchiveDialog({ open, onOpenChange, clientId, clientName, o
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* In-flight Documenso envelopes */}
|
||||
{/* In-flight signing envelopes */}
|
||||
{dossier.documents.filter((d) => d.isInFlight).length > 0 && (
|
||||
<Card>
|
||||
<CardHeader className="pb-2">
|
||||
<CardTitle className="text-sm font-medium flex items-center gap-2">
|
||||
<FileText className="h-4 w-4" /> In-flight Documenso envelopes
|
||||
<FileText className="h-4 w-4" /> In-flight signing envelopes
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-2">
|
||||
@@ -502,7 +502,7 @@ export function SmartArchiveDialog({ open, onOpenChange, clientId, clientName, o
|
||||
}
|
||||
>
|
||||
<option value="leave">Leave envelope pending</option>
|
||||
<option value="void_documenso">Void in Documenso</option>
|
||||
<option value="void_documenso">Void the signing envelope</option>
|
||||
</select>
|
||||
</div>
|
||||
))}
|
||||
|
||||
Reference in New Issue
Block a user