Create Campaign Status

Create a new campaign workflow status

{Object.keys(errors).length > 0 && (

There {Object.keys(errors).length === 1 ? 'is' : 'are'}{' '} {Object.keys(errors).length} error {Object.keys(errors).length === 1 ? '' : 's'} with your submission

{message}

)}

Basic Information

{companies && !selectedCompany && (

Company * {errors.company_id && (

{errors.company_id}

)}

)} {(selectedCompany || company) && ( )}

setData('name', e.target.value)} error={errors.name} required placeholder="e.g., Active, Paused, Completed" />

setData('slug', e.target.value)} error={errors.slug} placeholder="e.g., active, paused (auto-generated if empty)" helpText="Leave empty to auto-generate from name" />

Description

setData('description', e.target.value)}
                                    className="w-full rounded-md border px-3 py-2"
                                    rows={3}
                                    placeholder="Status description..."
                                />
                                {errors.description && (
                                    <p className="text-sm text-red-500">{errors.description}</p>
                                )}
                            </div>

<FormField
                                label="Color"
                                name="color"
                                type="color"
                                value={data.color || '#3b82f6'}
                                onChange={(e) => setData('color', e.target.value)}
                                error={errors.color}
                            />

<FormField
                                label="Sort Order"
                                name="sort_order"
                                type="number"
                                value={data.sort_order}
                                onChange={(e) => setData('sort_order', parseInt(e.target.value) || 0)}
                                error={errors.sort_order}
                            />

<div>
                                <Label htmlFor="is_active" className="flex items-center gap-2">
                                    <input
                                        type="checkbox"
                                        id="is_active"
                                        name="is_active"
                                        checked={data.is_active}
                                        onChange={(e) => setData('is_active', e.target.checked)}
                                        className="rounded border-gray-300"
                                    />
                                    <span>Active</span>
                                </Label>
                                {errors.is_active && (
                                    <p className="text-sm text-red-500">{errors.is_active}</p>
                                )}
                            </div>

<div>
                                <Label htmlFor="is_final" className="flex items-center gap-2">
                                    <input
                                        type="checkbox"
                                        id="is_final"
                                        name="is_final"
                                        checked={data.is_final}
                                        onChange={(e) => setData('is_final', e.target.checked)}
                                        className="rounded border-gray-300"
                                    />
                                    <span>Final Status</span>
                                </Label>
                                <p className="text-xs text-neutral-500">
                                    Final statuses cannot be changed (e.g., Completed, Cancelled)
                                </p>
                                {errors.is_final && (
                                    <p className="text-sm text-red-500">{errors.is_final}</p>
                                )}
                            </div>
                        </div>
                    </Card>

<div className="flex justify-end gap-4">
                        <Link href="/marketing/campaign-statuses">
                            <Button type="button" variant="outline">
                                Cancel
                            </Button>
                        </Link>
                        <Button type="submit" disabled={processing}>
                            {processing ? 'Creating...' : 'Create Status'}
                        </Button>
                    </div>
                </form>
            </div>
        </AppLayout>
    );
}