feat(ui): add-membership dialog for company members
This commit is contained in:
Matt Ciaccio
220
src/components/companies/add-membership-dialog.tsx
Normal file
220
src/components/companies/add-membership-dialog.tsx
Normal file
@@ -0,0 +1,220 @@
|
||||
'use client';
|
||||
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useForm } from 'react-hook-form';
|
||||
import { useMutation, useQueryClient } from '@tanstack/react-query';
|
||||
import { Loader2 } from 'lucide-react';
|
||||
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from '@/components/ui/dialog';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Checkbox } from '@/components/ui/checkbox';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Label } from '@/components/ui/label';
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from '@/components/ui/select';
|
||||
import { Textarea } from '@/components/ui/textarea';
|
||||
import { ClientPicker } from '@/components/shared/client-picker';
|
||||
import { apiFetch } from '@/lib/api/client';
|
||||
import { ROLES } from '@/lib/validators/company-memberships';
|
||||
|
||||
type RoleEnum = (typeof ROLES)[number];
|
||||
|
||||
type FormValues = {
|
||||
clientId: string | null;
|
||||
role: RoleEnum;
|
||||
roleDetail?: string;
|
||||
startDate: string; // YYYY-MM-DD
|
||||
isPrimary: boolean;
|
||||
notes?: string;
|
||||
};
|
||||
|
||||
interface AddMembershipDialogProps {
|
||||
open: boolean;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
companyId: string;
|
||||
}
|
||||
|
||||
const todayIso = (): string => new Date().toISOString().slice(0, 10);
|
||||
|
||||
const ROLE_LABEL: Record<RoleEnum, string> = {
|
||||
director: 'Director',
|
||||
officer: 'Officer',
|
||||
broker: 'Broker',
|
||||
representative: 'Representative',
|
||||
legal_counsel: 'Legal counsel',
|
||||
employee: 'Employee',
|
||||
shareholder: 'Shareholder',
|
||||
other: 'Other',
|
||||
};
|
||||
|
||||
export function AddMembershipDialog({ open, onOpenChange, companyId }: AddMembershipDialogProps) {
|
||||
const queryClient = useQueryClient();
|
||||
const [formError, setFormError] = useState<string | null>(null);
|
||||
|
||||
const {
|
||||
register,
|
||||
handleSubmit,
|
||||
watch,
|
||||
setValue,
|
||||
reset,
|
||||
formState: { errors, isSubmitting },
|
||||
} = useForm<FormValues>({
|
||||
defaultValues: {
|
||||
clientId: null,
|
||||
role: 'director',
|
||||
roleDetail: '',
|
||||
startDate: todayIso(),
|
||||
isPrimary: false,
|
||||
notes: '',
|
||||
},
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
if (open) {
|
||||
setFormError(null);
|
||||
reset({
|
||||
clientId: null,
|
||||
role: 'director',
|
||||
roleDetail: '',
|
||||
startDate: todayIso(),
|
||||
isPrimary: false,
|
||||
notes: '',
|
||||
});
|
||||
}
|
||||
}, [open, reset]);
|
||||
|
||||
const clientId = watch('clientId');
|
||||
const role = watch('role');
|
||||
const isPrimary = watch('isPrimary');
|
||||
|
||||
const mutation = useMutation({
|
||||
mutationFn: async (data: FormValues) => {
|
||||
if (!data.clientId) {
|
||||
throw new Error('Please select a client');
|
||||
}
|
||||
await apiFetch(`/api/v1/companies/${companyId}/members`, {
|
||||
method: 'POST',
|
||||
body: {
|
||||
clientId: data.clientId,
|
||||
role: data.role,
|
||||
roleDetail: data.roleDetail?.trim() || undefined,
|
||||
startDate: data.startDate,
|
||||
isPrimary: data.isPrimary,
|
||||
notes: data.notes?.trim() || undefined,
|
||||
},
|
||||
});
|
||||
},
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ['companies', companyId, 'members'] });
|
||||
onOpenChange(false);
|
||||
},
|
||||
onError: (err: unknown) => {
|
||||
let msg = err instanceof Error ? err.message : 'Failed to add membership';
|
||||
// Detect 409 — service returns a "membership already exists" message
|
||||
if (/already exists/i.test(msg)) {
|
||||
msg = 'This membership already exists (same client + role + start date).';
|
||||
}
|
||||
setFormError(msg);
|
||||
},
|
||||
});
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
<DialogContent className="max-w-md">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Add member</DialogTitle>
|
||||
<DialogDescription>
|
||||
Associate a client with this company in a specific role.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<form
|
||||
onSubmit={handleSubmit((data) => {
|
||||
setFormError(null);
|
||||
mutation.mutate(data);
|
||||
})}
|
||||
className="space-y-4"
|
||||
>
|
||||
<div className="space-y-2">
|
||||
<Label>Client</Label>
|
||||
<ClientPicker value={clientId} onChange={(id) => setValue('clientId', id)} />
|
||||
{!clientId && errors.clientId && <p className="text-xs text-destructive">Required</p>}
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label>Role</Label>
|
||||
<Select value={role} onValueChange={(v) => setValue('role', v as RoleEnum)}>
|
||||
<SelectTrigger>
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{ROLES.map((r) => (
|
||||
<SelectItem key={r} value={r}>
|
||||
{ROLE_LABEL[r]}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="roleDetail">Role detail (optional)</Label>
|
||||
<Input
|
||||
id="roleDetail"
|
||||
{...register('roleDetail')}
|
||||
placeholder="e.g. Chief Investment Officer"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="startDate">Start date</Label>
|
||||
<Input id="startDate" type="date" {...register('startDate', { required: true })} />
|
||||
{errors.startDate && <p className="text-xs text-destructive">Required</p>}
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<Checkbox
|
||||
id="isPrimary"
|
||||
checked={isPrimary}
|
||||
onCheckedChange={(v) => setValue('isPrimary', v === true)}
|
||||
/>
|
||||
<Label htmlFor="isPrimary" className="cursor-pointer">
|
||||
Set as primary contact
|
||||
</Label>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="notes">Notes (optional)</Label>
|
||||
<Textarea id="notes" rows={2} {...register('notes')} />
|
||||
</div>
|
||||
|
||||
{formError && <p className="text-sm text-destructive">{formError}</p>}
|
||||
|
||||
<DialogFooter>
|
||||
<Button type="button" variant="outline" onClick={() => onOpenChange(false)}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button type="submit" disabled={isSubmitting || mutation.isPending}>
|
||||
{(isSubmitting || mutation.isPending) && (
|
||||
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
|
||||
)}
|
||||
Add member
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</form>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
@@ -8,14 +8,6 @@ import { toast } from 'sonner';
|
||||
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from '@/components/ui/dialog';
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
@@ -33,6 +25,7 @@ import {
|
||||
import { EmptyState } from '@/components/shared/empty-state';
|
||||
import { PermissionGate } from '@/components/shared/permission-gate';
|
||||
import { apiFetch } from '@/lib/api/client';
|
||||
import { AddMembershipDialog } from './add-membership-dialog';
|
||||
|
||||
interface MembershipRow {
|
||||
id: string;
|
||||
@@ -267,22 +260,7 @@ export function CompanyMembersTab({ companyId, portSlug }: CompanyMembersTabProp
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* TODO: Task 6.4 — replace this stub with the real AddMembershipDialog. */}
|
||||
<Dialog open={addOpen} onOpenChange={setAddOpen}>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>Add Member</DialogTitle>
|
||||
<DialogDescription>
|
||||
The add-membership dialog is coming in the next step. For now this is a placeholder.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<DialogFooter>
|
||||
<Button variant="outline" onClick={() => setAddOpen(false)}>
|
||||
Close
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
<AddMembershipDialog open={addOpen} onOpenChange={setAddOpen} companyId={companyId} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user