{/* Back + title */}

Edit Customer

{/* Hero identity card */}

{initials}

{(data.name ?? '').trim() || Company name…}

{data.city || customer.city || 'Customer'}

{isActive ? ( Active ) : ( Inactive )}

{inp('name')}

{ e.preventDefault(); put(`/customers/${customer.id}`); }} className="space-y-5"> {/* Contact */}

{inp('contact_name')} {inp('phone', 'tel')} {inp('email', 'email')}

{/* Address */}

{inp('address')} {inp('address2')} {inp('address3')} {inp('city')} {inp('postcode')} {inp('state')} {inp('country')}

{/* Legal */}

{inp('company_reg_no')} {inp('tax_id')}

{/* Notes */}

setData('notes' as any, e.target.value)}
                                rows={3} placeholder="Any additional notes about this customer…"
                                className={cls + ' resize-y'} />
                        </Field>
                    </Section>

<div className="flex items-center gap-3">
                        <Button type="submit" disabled={processing} className="bg-slate-900 hover:bg-slate-800 text-white">
                            {processing ? 'Saving…' : 'Save Changes'}
                        </Button>
                        <LinkButton href={`/customers/${customer.id}`} variant="outline">Cancel</LinkButton>
                        <button type="button"
                            onClick={() => { if (confirm('Delete this customer? This cannot be undone.')) router.delete(`/customers/${customer.id}`); }}
                            className="ml-auto flex items-center gap-1.5 text-sm text-red-600 hover:text-red-700 transition-colors">
                            <Trash2 className="w-3.5 h-3.5" /> Delete Customer
                        </button>
                    </div>
                </form>
            </div>
        </AuthenticatedLayout>
    );
}

{title}

Edit Customer