refactor(clients): strip yacht/company/proxy sections from client form
This commit is contained in:
@@ -16,13 +16,7 @@ import {
|
|||||||
SelectTrigger,
|
SelectTrigger,
|
||||||
SelectValue,
|
SelectValue,
|
||||||
} from '@/components/ui/select';
|
} from '@/components/ui/select';
|
||||||
import {
|
import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetFooter } from '@/components/ui/sheet';
|
||||||
Sheet,
|
|
||||||
SheetContent,
|
|
||||||
SheetHeader,
|
|
||||||
SheetTitle,
|
|
||||||
SheetFooter,
|
|
||||||
} from '@/components/ui/sheet';
|
|
||||||
import { Checkbox } from '@/components/ui/checkbox';
|
import { Checkbox } from '@/components/ui/checkbox';
|
||||||
import { Separator } from '@/components/ui/separator';
|
import { Separator } from '@/components/ui/separator';
|
||||||
import { TagPicker } from '@/components/shared/tag-picker';
|
import { TagPicker } from '@/components/shared/tag-picker';
|
||||||
@@ -36,13 +30,7 @@ interface ClientFormProps {
|
|||||||
client?: {
|
client?: {
|
||||||
id: string;
|
id: string;
|
||||||
fullName: string;
|
fullName: string;
|
||||||
companyName?: string | null;
|
|
||||||
nationality?: string | null;
|
nationality?: string | null;
|
||||||
isProxy?: boolean;
|
|
||||||
proxyType?: string | null;
|
|
||||||
actualOwnerName?: string | null;
|
|
||||||
yachtName?: string | null;
|
|
||||||
berthSizeDesired?: string | null;
|
|
||||||
preferredContactMethod?: string | null;
|
preferredContactMethod?: string | null;
|
||||||
preferredLanguage?: string | null;
|
preferredLanguage?: string | null;
|
||||||
timezone?: string | null;
|
timezone?: string | null;
|
||||||
@@ -53,6 +41,7 @@ interface ClientFormProps {
|
|||||||
value: string;
|
value: string;
|
||||||
label?: string | null;
|
label?: string | null;
|
||||||
isPrimary?: boolean;
|
isPrimary?: boolean;
|
||||||
|
notes?: string | null;
|
||||||
}>;
|
}>;
|
||||||
tags?: Array<{ id: string }>;
|
tags?: Array<{ id: string }>;
|
||||||
};
|
};
|
||||||
@@ -75,13 +64,11 @@ export function ClientForm({ open, onOpenChange, client }: ClientFormProps) {
|
|||||||
defaultValues: {
|
defaultValues: {
|
||||||
fullName: '',
|
fullName: '',
|
||||||
contacts: [{ channel: 'email', value: '', isPrimary: true }],
|
contacts: [{ channel: 'email', value: '', isPrimary: true }],
|
||||||
isProxy: false,
|
|
||||||
tagIds: [],
|
tagIds: [],
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
const { fields, append, remove } = useFieldArray({ control, name: 'contacts' });
|
const { fields, append, remove } = useFieldArray({ control, name: 'contacts' });
|
||||||
const isProxy = watch('isProxy');
|
|
||||||
const tagIds = watch('tagIds') ?? [];
|
const tagIds = watch('tagIds') ?? [];
|
||||||
|
|
||||||
// Populate form when editing
|
// Populate form when editing
|
||||||
@@ -89,14 +76,10 @@ export function ClientForm({ open, onOpenChange, client }: ClientFormProps) {
|
|||||||
if (client && open) {
|
if (client && open) {
|
||||||
reset({
|
reset({
|
||||||
fullName: client.fullName,
|
fullName: client.fullName,
|
||||||
companyName: client.companyName ?? undefined,
|
|
||||||
nationality: client.nationality ?? undefined,
|
nationality: client.nationality ?? undefined,
|
||||||
isProxy: client.isProxy ?? false,
|
preferredContactMethod:
|
||||||
proxyType: client.proxyType ?? undefined,
|
(client.preferredContactMethod as CreateClientInput['preferredContactMethod']) ??
|
||||||
actualOwnerName: client.actualOwnerName ?? undefined,
|
undefined,
|
||||||
yachtName: client.yachtName ?? undefined,
|
|
||||||
berthSizeDesired: client.berthSizeDesired ?? undefined,
|
|
||||||
preferredContactMethod: (client.preferredContactMethod as CreateClientInput['preferredContactMethod']) ?? undefined,
|
|
||||||
preferredLanguage: client.preferredLanguage ?? undefined,
|
preferredLanguage: client.preferredLanguage ?? undefined,
|
||||||
timezone: client.timezone ?? undefined,
|
timezone: client.timezone ?? undefined,
|
||||||
source: (client.source as CreateClientInput['source']) ?? undefined,
|
source: (client.source as CreateClientInput['source']) ?? undefined,
|
||||||
@@ -108,6 +91,7 @@ export function ClientForm({ open, onOpenChange, client }: ClientFormProps) {
|
|||||||
value: c.value,
|
value: c.value,
|
||||||
label: c.label ?? undefined,
|
label: c.label ?? undefined,
|
||||||
isPrimary: c.isPrimary ?? false,
|
isPrimary: c.isPrimary ?? false,
|
||||||
|
notes: c.notes ?? undefined,
|
||||||
}))
|
}))
|
||||||
: [{ channel: 'email', value: '', isPrimary: true }],
|
: [{ channel: 'email', value: '', isPrimary: true }],
|
||||||
tagIds: client.tags?.map((t) => t.id) ?? [],
|
tagIds: client.tags?.map((t) => t.id) ?? [],
|
||||||
@@ -116,7 +100,6 @@ export function ClientForm({ open, onOpenChange, client }: ClientFormProps) {
|
|||||||
reset({
|
reset({
|
||||||
fullName: '',
|
fullName: '',
|
||||||
contacts: [{ channel: 'email', value: '', isPrimary: true }],
|
contacts: [{ channel: 'email', value: '', isPrimary: true }],
|
||||||
isProxy: false,
|
|
||||||
tagIds: [],
|
tagIds: [],
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
@@ -151,10 +134,7 @@ export function ClientForm({ open, onOpenChange, client }: ClientFormProps) {
|
|||||||
<SheetTitle>{isEdit ? 'Edit Client' : 'New Client'}</SheetTitle>
|
<SheetTitle>{isEdit ? 'Edit Client' : 'New Client'}</SheetTitle>
|
||||||
</SheetHeader>
|
</SheetHeader>
|
||||||
|
|
||||||
<form
|
<form onSubmit={handleSubmit((data) => mutation.mutate(data))} className="space-y-6 py-6">
|
||||||
onSubmit={handleSubmit((data) => mutation.mutate(data))}
|
|
||||||
className="space-y-6 py-6"
|
|
||||||
>
|
|
||||||
{/* Basic Info */}
|
{/* Basic Info */}
|
||||||
<div className="space-y-4">
|
<div className="space-y-4">
|
||||||
<h3 className="text-sm font-medium text-muted-foreground uppercase tracking-wide">
|
<h3 className="text-sm font-medium text-muted-foreground uppercase tracking-wide">
|
||||||
@@ -170,11 +150,6 @@ export function ClientForm({ open, onOpenChange, client }: ClientFormProps) {
|
|||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="space-y-1">
|
|
||||||
<Label>Company Name</Label>
|
|
||||||
<Input {...register('companyName')} placeholder="Acme Corp" />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="space-y-1">
|
<div className="space-y-1">
|
||||||
<Label>Nationality</Label>
|
<Label>Nationality</Label>
|
||||||
<Input {...register('nationality')} placeholder="British" />
|
<Input {...register('nationality')} placeholder="British" />
|
||||||
@@ -194,9 +169,7 @@ export function ClientForm({ open, onOpenChange, client }: ClientFormProps) {
|
|||||||
type="button"
|
type="button"
|
||||||
variant="outline"
|
variant="outline"
|
||||||
size="sm"
|
size="sm"
|
||||||
onClick={() =>
|
onClick={() => append({ channel: 'email', value: '', isPrimary: false })}
|
||||||
append({ channel: 'email', value: '', isPrimary: false })
|
|
||||||
}
|
|
||||||
>
|
>
|
||||||
<Plus className="mr-1 h-3.5 w-3.5" />
|
<Plus className="mr-1 h-3.5 w-3.5" />
|
||||||
Add Contact
|
Add Contact
|
||||||
@@ -218,7 +191,10 @@ export function ClientForm({ open, onOpenChange, client }: ClientFormProps) {
|
|||||||
<Select
|
<Select
|
||||||
value={watch(`contacts.${index}.channel`)}
|
value={watch(`contacts.${index}.channel`)}
|
||||||
onValueChange={(v) =>
|
onValueChange={(v) =>
|
||||||
setValue(`contacts.${index}.channel`, v as 'email' | 'phone' | 'whatsapp' | 'other')
|
setValue(
|
||||||
|
`contacts.${index}.channel`,
|
||||||
|
v as 'email' | 'phone' | 'whatsapp' | 'other',
|
||||||
|
)
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
<SelectTrigger className="h-8">
|
<SelectTrigger className="h-8">
|
||||||
@@ -254,9 +230,7 @@ export function ClientForm({ open, onOpenChange, client }: ClientFormProps) {
|
|||||||
<div className="col-span-1 flex items-center gap-1 pb-1">
|
<div className="col-span-1 flex items-center gap-1 pb-1">
|
||||||
<Checkbox
|
<Checkbox
|
||||||
checked={watch(`contacts.${index}.isPrimary`)}
|
checked={watch(`contacts.${index}.isPrimary`)}
|
||||||
onCheckedChange={(v) =>
|
onCheckedChange={(v) => setValue(`contacts.${index}.isPrimary`, !!v)}
|
||||||
setValue(`contacts.${index}.isPrimary`, !!v)
|
|
||||||
}
|
|
||||||
/>
|
/>
|
||||||
<Label className="text-xs">Primary</Label>
|
<Label className="text-xs">Primary</Label>
|
||||||
</div>
|
</div>
|
||||||
@@ -281,72 +255,6 @@ export function ClientForm({ open, onOpenChange, client }: ClientFormProps) {
|
|||||||
|
|
||||||
<Separator />
|
<Separator />
|
||||||
|
|
||||||
{/* Proxy */}
|
|
||||||
<div className="space-y-4">
|
|
||||||
<h3 className="text-sm font-medium text-muted-foreground uppercase tracking-wide">
|
|
||||||
Proxy Information
|
|
||||||
</h3>
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<Checkbox
|
|
||||||
id="isProxy"
|
|
||||||
checked={watch('isProxy')}
|
|
||||||
onCheckedChange={(v) => setValue('isProxy', !!v)}
|
|
||||||
/>
|
|
||||||
<Label htmlFor="isProxy">This is a proxy client</Label>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{isProxy && (
|
|
||||||
<div className="grid grid-cols-2 gap-4">
|
|
||||||
<div className="space-y-1">
|
|
||||||
<Label>Proxy Type</Label>
|
|
||||||
<Select
|
|
||||||
value={watch('proxyType') ?? ''}
|
|
||||||
onValueChange={(v) => setValue('proxyType', v)}
|
|
||||||
>
|
|
||||||
<SelectTrigger>
|
|
||||||
<SelectValue placeholder="Select type" />
|
|
||||||
</SelectTrigger>
|
|
||||||
<SelectContent>
|
|
||||||
<SelectItem value="broker">Broker</SelectItem>
|
|
||||||
<SelectItem value="representative">Representative</SelectItem>
|
|
||||||
<SelectItem value="family_member">Family Member</SelectItem>
|
|
||||||
<SelectItem value="legal_counsel">Legal Counsel</SelectItem>
|
|
||||||
<SelectItem value="other">Other</SelectItem>
|
|
||||||
</SelectContent>
|
|
||||||
</Select>
|
|
||||||
</div>
|
|
||||||
<div className="space-y-1">
|
|
||||||
<Label>Actual Owner Name</Label>
|
|
||||||
<Input
|
|
||||||
{...register('actualOwnerName')}
|
|
||||||
placeholder="Actual owner"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<Separator />
|
|
||||||
|
|
||||||
{/* Yacht Details */}
|
|
||||||
<div className="space-y-4">
|
|
||||||
<h3 className="text-sm font-medium text-muted-foreground uppercase tracking-wide">
|
|
||||||
Yacht Details
|
|
||||||
</h3>
|
|
||||||
<div className="grid grid-cols-2 gap-4">
|
|
||||||
<div className="col-span-2 space-y-1">
|
|
||||||
<Label>Yacht Name</Label>
|
|
||||||
<Input {...register('yachtName')} placeholder="My Yacht" />
|
|
||||||
</div>
|
|
||||||
<div className="space-y-1">
|
|
||||||
<Label>Berth Size Desired</Label>
|
|
||||||
<Input {...register('berthSizeDesired')} placeholder="e.g. 30m" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<Separator />
|
|
||||||
|
|
||||||
{/* Source & Preferences */}
|
{/* Source & Preferences */}
|
||||||
<div className="space-y-4">
|
<div className="space-y-4">
|
||||||
<h3 className="text-sm font-medium text-muted-foreground uppercase tracking-wide">
|
<h3 className="text-sm font-medium text-muted-foreground uppercase tracking-wide">
|
||||||
@@ -357,7 +265,9 @@ export function ClientForm({ open, onOpenChange, client }: ClientFormProps) {
|
|||||||
<Label>Source</Label>
|
<Label>Source</Label>
|
||||||
<Select
|
<Select
|
||||||
value={watch('source') ?? ''}
|
value={watch('source') ?? ''}
|
||||||
onValueChange={(v) => setValue('source', v as 'website' | 'manual' | 'referral' | 'broker')}
|
onValueChange={(v) =>
|
||||||
|
setValue('source', v as 'website' | 'manual' | 'referral' | 'broker')
|
||||||
|
}
|
||||||
>
|
>
|
||||||
<SelectTrigger>
|
<SelectTrigger>
|
||||||
<SelectValue placeholder="Select source" />
|
<SelectValue placeholder="Select source" />
|
||||||
@@ -374,7 +284,9 @@ export function ClientForm({ open, onOpenChange, client }: ClientFormProps) {
|
|||||||
<Label>Preferred Contact Method</Label>
|
<Label>Preferred Contact Method</Label>
|
||||||
<Select
|
<Select
|
||||||
value={watch('preferredContactMethod') ?? ''}
|
value={watch('preferredContactMethod') ?? ''}
|
||||||
onValueChange={(v) => setValue('preferredContactMethod', v as 'email' | 'phone' | 'whatsapp')}
|
onValueChange={(v) =>
|
||||||
|
setValue('preferredContactMethod', v as 'email' | 'phone' | 'whatsapp')
|
||||||
|
}
|
||||||
>
|
>
|
||||||
<SelectTrigger>
|
<SelectTrigger>
|
||||||
<SelectValue placeholder="Select method" />
|
<SelectValue placeholder="Select method" />
|
||||||
@@ -396,10 +308,7 @@ export function ClientForm({ open, onOpenChange, client }: ClientFormProps) {
|
|||||||
</div>
|
</div>
|
||||||
<div className="col-span-2 space-y-1">
|
<div className="col-span-2 space-y-1">
|
||||||
<Label>Source Details</Label>
|
<Label>Source Details</Label>
|
||||||
<Input
|
<Input {...register('sourceDetails')} placeholder="Referred by John Doe" />
|
||||||
{...register('sourceDetails')}
|
|
||||||
placeholder="Referred by John Doe"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -409,18 +318,11 @@ export function ClientForm({ open, onOpenChange, client }: ClientFormProps) {
|
|||||||
{/* Tags */}
|
{/* Tags */}
|
||||||
<div className="space-y-2">
|
<div className="space-y-2">
|
||||||
<Label>Tags</Label>
|
<Label>Tags</Label>
|
||||||
<TagPicker
|
<TagPicker selectedIds={tagIds} onChange={(ids) => setValue('tagIds', ids)} />
|
||||||
selectedIds={tagIds}
|
|
||||||
onChange={(ids) => setValue('tagIds', ids)}
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<SheetFooter>
|
<SheetFooter>
|
||||||
<Button
|
<Button type="button" variant="outline" onClick={() => onOpenChange(false)}>
|
||||||
type="button"
|
|
||||||
variant="outline"
|
|
||||||
onClick={() => onOpenChange(false)}
|
|
||||||
>
|
|
||||||
Cancel
|
Cancel
|
||||||
</Button>
|
</Button>
|
||||||
<Button type="submit" disabled={isSubmitting || mutation.isPending}>
|
<Button type="submit" disabled={isSubmitting || mutation.isPending}>
|
||||||
|
|||||||
Reference in New Issue
Block a user