feat(ui): add company-form for create/edit with 409 handling
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Matt Ciaccio
262
src/components/companies/company-form.tsx
Normal file
262
src/components/companies/company-form.tsx
Normal file
@@ -0,0 +1,262 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import { useEffect, useState } from 'react';
|
||||||
|
import { useForm } from 'react-hook-form';
|
||||||
|
import { zodResolver } from '@hookform/resolvers/zod';
|
||||||
|
import { useMutation, useQueryClient } from '@tanstack/react-query';
|
||||||
|
import { Loader2 } from 'lucide-react';
|
||||||
|
import { z } from 'zod';
|
||||||
|
|
||||||
|
import { Button } from '@/components/ui/button';
|
||||||
|
import { Input } from '@/components/ui/input';
|
||||||
|
import { Label } from '@/components/ui/label';
|
||||||
|
import { Textarea } from '@/components/ui/textarea';
|
||||||
|
import {
|
||||||
|
Select,
|
||||||
|
SelectContent,
|
||||||
|
SelectItem,
|
||||||
|
SelectTrigger,
|
||||||
|
SelectValue,
|
||||||
|
} from '@/components/ui/select';
|
||||||
|
import { Sheet, SheetContent, SheetFooter, SheetHeader, SheetTitle } from '@/components/ui/sheet';
|
||||||
|
import { Separator } from '@/components/ui/separator';
|
||||||
|
import { TagPicker } from '@/components/shared/tag-picker';
|
||||||
|
import { apiFetch } from '@/lib/api/client';
|
||||||
|
import { createCompanySchema, type CreateCompanyInput } from '@/lib/validators/companies';
|
||||||
|
|
||||||
|
type CompanyStatus = 'active' | 'dissolved';
|
||||||
|
|
||||||
|
type CompanyFormValues = z.input<typeof createCompanySchema>;
|
||||||
|
|
||||||
|
interface CompanyFormProps {
|
||||||
|
open: boolean;
|
||||||
|
onOpenChange: (open: boolean) => void;
|
||||||
|
/** If provided, form is in edit mode */
|
||||||
|
company?: {
|
||||||
|
id: string;
|
||||||
|
name: string;
|
||||||
|
legalName: string | null;
|
||||||
|
taxId: string | null;
|
||||||
|
registrationNumber: string | null;
|
||||||
|
incorporationCountry: string | null;
|
||||||
|
incorporationDate: string | null;
|
||||||
|
status: string;
|
||||||
|
billingEmail: string | null;
|
||||||
|
notes: string | null;
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
export function CompanyForm({ open, onOpenChange, company }: CompanyFormProps) {
|
||||||
|
const queryClient = useQueryClient();
|
||||||
|
const isEdit = !!company;
|
||||||
|
const [formError, setFormError] = useState<string | null>(null);
|
||||||
|
|
||||||
|
const {
|
||||||
|
register,
|
||||||
|
handleSubmit,
|
||||||
|
watch,
|
||||||
|
setValue,
|
||||||
|
reset,
|
||||||
|
formState: { errors, isSubmitting },
|
||||||
|
} = useForm<CompanyFormValues>({
|
||||||
|
resolver: zodResolver(createCompanySchema),
|
||||||
|
defaultValues: {
|
||||||
|
name: '',
|
||||||
|
status: 'active',
|
||||||
|
tagIds: [],
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const tagIds = watch('tagIds') ?? [];
|
||||||
|
const status = watch('status') ?? 'active';
|
||||||
|
|
||||||
|
// Populate form when editing, or reset to defaults in create mode.
|
||||||
|
useEffect(() => {
|
||||||
|
if (company && open) {
|
||||||
|
reset({
|
||||||
|
name: company.name,
|
||||||
|
legalName: company.legalName ?? undefined,
|
||||||
|
taxId: company.taxId ?? undefined,
|
||||||
|
registrationNumber: company.registrationNumber ?? undefined,
|
||||||
|
incorporationCountry: company.incorporationCountry ?? undefined,
|
||||||
|
incorporationDate: company.incorporationDate
|
||||||
|
? new Date(company.incorporationDate)
|
||||||
|
: undefined,
|
||||||
|
status: (company.status as CompanyStatus) ?? 'active',
|
||||||
|
billingEmail: company.billingEmail ?? undefined,
|
||||||
|
notes: company.notes ?? undefined,
|
||||||
|
tagIds: [],
|
||||||
|
});
|
||||||
|
} else if (!company && open) {
|
||||||
|
reset({ name: '', status: 'active', tagIds: [] });
|
||||||
|
}
|
||||||
|
setFormError(null);
|
||||||
|
}, [company, open, reset]);
|
||||||
|
|
||||||
|
const mutation = useMutation({
|
||||||
|
mutationFn: async (data: CreateCompanyInput) => {
|
||||||
|
if (isEdit) {
|
||||||
|
// updateCompanySchema omits tagIds — strip them from PATCH body.
|
||||||
|
const { tagIds: _tIds, ...rest } = data;
|
||||||
|
void _tIds;
|
||||||
|
await apiFetch(`/api/v1/companies/${company!.id}`, {
|
||||||
|
method: 'PATCH',
|
||||||
|
body: rest,
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
await apiFetch('/api/v1/companies', { method: 'POST', body: data });
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onSuccess: () => {
|
||||||
|
queryClient.invalidateQueries({ queryKey: ['companies'] });
|
||||||
|
onOpenChange(false);
|
||||||
|
},
|
||||||
|
onError: (err: unknown) => {
|
||||||
|
const msg = err instanceof Error ? err.message : 'Failed to save company';
|
||||||
|
setFormError(msg);
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Sheet open={open} onOpenChange={onOpenChange}>
|
||||||
|
<SheetContent className="w-full sm:max-w-2xl overflow-y-auto">
|
||||||
|
<SheetHeader>
|
||||||
|
<SheetTitle>{isEdit ? 'Edit Company' : 'New Company'}</SheetTitle>
|
||||||
|
</SheetHeader>
|
||||||
|
|
||||||
|
<form
|
||||||
|
onSubmit={handleSubmit((data) => {
|
||||||
|
setFormError(null);
|
||||||
|
mutation.mutate(data as CreateCompanyInput);
|
||||||
|
})}
|
||||||
|
className="space-y-6 py-6"
|
||||||
|
>
|
||||||
|
{/* Basics */}
|
||||||
|
<div className="space-y-4">
|
||||||
|
<h3 className="text-sm font-medium text-muted-foreground uppercase tracking-wide">
|
||||||
|
Basics
|
||||||
|
</h3>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-2 gap-4">
|
||||||
|
<div className="col-span-2 space-y-1">
|
||||||
|
<Label>Name *</Label>
|
||||||
|
<Input {...register('name')} placeholder="Acme Holdings Ltd" />
|
||||||
|
{errors.name && <p className="text-xs text-destructive">{errors.name.message}</p>}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="col-span-2 space-y-1">
|
||||||
|
<Label>Legal Name</Label>
|
||||||
|
<Input {...register('legalName')} placeholder="Acme Holdings Limited" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Separator />
|
||||||
|
|
||||||
|
{/* Registration */}
|
||||||
|
<div className="space-y-4">
|
||||||
|
<h3 className="text-sm font-medium text-muted-foreground uppercase tracking-wide">
|
||||||
|
Registration
|
||||||
|
</h3>
|
||||||
|
<div className="grid grid-cols-2 gap-4">
|
||||||
|
<div className="space-y-1">
|
||||||
|
<Label>Tax ID</Label>
|
||||||
|
<Input {...register('taxId')} placeholder="VAT / EIN" />
|
||||||
|
</div>
|
||||||
|
<div className="space-y-1">
|
||||||
|
<Label>Registration Number</Label>
|
||||||
|
<Input {...register('registrationNumber')} placeholder="Company #" />
|
||||||
|
</div>
|
||||||
|
<div className="space-y-1">
|
||||||
|
<Label>Incorporation Country</Label>
|
||||||
|
<Input {...register('incorporationCountry')} placeholder="e.g. MT" />
|
||||||
|
</div>
|
||||||
|
<div className="space-y-1">
|
||||||
|
<Label>Incorporation Date</Label>
|
||||||
|
<Input type="date" {...register('incorporationDate')} />
|
||||||
|
{errors.incorporationDate && (
|
||||||
|
<p className="text-xs text-destructive">{errors.incorporationDate.message}</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Separator />
|
||||||
|
|
||||||
|
{/* Contact & Status */}
|
||||||
|
<div className="space-y-4">
|
||||||
|
<h3 className="text-sm font-medium text-muted-foreground uppercase tracking-wide">
|
||||||
|
Contact & Status
|
||||||
|
</h3>
|
||||||
|
<div className="grid grid-cols-2 gap-4">
|
||||||
|
<div className="space-y-1">
|
||||||
|
<Label>Billing Email</Label>
|
||||||
|
<Input
|
||||||
|
type="email"
|
||||||
|
{...register('billingEmail')}
|
||||||
|
placeholder="billing@example.com"
|
||||||
|
/>
|
||||||
|
{errors.billingEmail && (
|
||||||
|
<p className="text-xs text-destructive">{errors.billingEmail.message}</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<div className="space-y-1">
|
||||||
|
<Label>Status</Label>
|
||||||
|
<Select
|
||||||
|
value={status}
|
||||||
|
onValueChange={(v) => setValue('status', v as CompanyStatus)}
|
||||||
|
>
|
||||||
|
<SelectTrigger>
|
||||||
|
<SelectValue placeholder="Select status" />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
<SelectItem value="active">Active</SelectItem>
|
||||||
|
<SelectItem value="dissolved">Dissolved</SelectItem>
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Separator />
|
||||||
|
|
||||||
|
{/* Notes */}
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label>Notes</Label>
|
||||||
|
<Textarea
|
||||||
|
{...register('notes')}
|
||||||
|
placeholder="Internal notes about this company"
|
||||||
|
rows={4}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Separator />
|
||||||
|
|
||||||
|
{/* Tags */}
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label>Tags</Label>
|
||||||
|
<TagPicker selectedIds={tagIds} onChange={(ids) => setValue('tagIds', ids)} />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{formError && (
|
||||||
|
<p className="text-sm text-destructive" role="alert">
|
||||||
|
{formError}
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<SheetFooter>
|
||||||
|
<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" />
|
||||||
|
)}
|
||||||
|
{isEdit ? 'Save Changes' : 'Create Company'}
|
||||||
|
</Button>
|
||||||
|
</SheetFooter>
|
||||||
|
</form>
|
||||||
|
</SheetContent>
|
||||||
|
</Sheet>
|
||||||
|
);
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user