Add Contact

Create a new contact

First Name * setData('first_name', e.target.value)} required /> {errors.first_name &&

{errors.first_name}

}

Last Name * setData('last_name', e.target.value)} required /> {errors.last_name &&

{errors.last_name}

}

Phone Number * setData('phone_number', e.target.value)} placeholder="+1234567890" required /> {errors.phone_number &&

{errors.phone_number}

}

Email setData('email', e.target.value)} /> {errors.email &&

{errors.email}

}

Company setData('company', e.target.value)} />

Notes

setData('notes', e.target.value)}
                rows={4}
              />
            </div>

{/* Contact Lists Selection */}
            {lists && lists.length > 0 && (
              <div className="space-y-2">
                <Label>Add to Contact Lists (Optional)</Label>
                <div className="border rounded-md p-4 space-y-3 max-h-48 overflow-y-auto">
                  {lists.map((list) => (
                    <div key={list.id} className="flex items-center space-x-3">
                      <Checkbox
                        id={`list-${list.id}`}
                        checked={data.list_ids.includes(list.id)}
                        onCheckedChange={() => handleListToggle(list.id)}
                      />
                      <Label htmlFor={`list-${list.id}`} className="cursor-pointer font-normal">
                        <div>
                          <p className="font-medium">{list.name}</p>
                          {list.description && (
                            <p className="text-sm text-muted-foreground">{list.description}</p>
                          )}
                        </div>
                      </Label>
                    </div>
                  ))}
                </div>
                {data.list_ids.length > 0 && (
                  <p className="text-sm text-muted-foreground">
                    Contact will be added to {data.list_ids.length} list{data.list_ids.length > 1 ? 's' : ''}
                  </p>
                )}
              </div>
            )}

<div className="flex justify-end gap-2">
              <Button type="button" variant="outline" onClick={() => router.get('/contacts')}>
                Cancel
              </Button>
              <Button type="submit" disabled={processing}>
                {processing ? 'Creating...' : 'Create Contact'}
              </Button>
            </div>
          </form>
        </Card>
      </div>
    </AppLayout>
  );
}