Edit Lead Status

Update lead status information

{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

setData('name', e.target.value)} error={errors.name} required />

setData('slug', e.target.value)} error={errors.slug} />

Description

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

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

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

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

<Card className="p-6">
                        <h2 className="mb-4 text-lg font-semibold">Lead Status Duration</h2>
                        <p className="mb-4 text-sm text-neutral-600 dark:text-neutral-400">
                            After this duration from when the lead entered this status, automatically change to the selected status. Duration is calculated from the last time the lead's status was set to this one.
                        </p>
                        <div className="grid gap-4 md:grid-cols-2">
                            <div>
                                <Label htmlFor="duration_value">Duration (number)</Label>
                                <input
                                    id="duration_value"
                                    name="duration_value"
                                    type="number"
                                    min={0}
                                    value={data.duration_value}
                                    onChange={(e) => setData('duration_value', e.target.value ? parseInt(e.target.value, 10) : '')}
                                    className="w-full rounded-md border px-3 py-2 dark:border-neutral-600 dark:bg-neutral-800"
                                    placeholder="e.g. 3"
                                />
                                {errors.duration_value && (
                                    <p className="text-sm text-red-500">{errors.duration_value}</p>
                                )}
                            </div>
                            <div>
                                <Label htmlFor="duration_unit">Unit</Label>
                                <select
                                    id="duration_unit"
                                    name="duration_unit"
                                    value={data.duration_unit}
                                    onChange={(e) => setData('duration_unit', e.target.value)}
                                    className="w-full rounded-md border px-3 py-2 dark:border-neutral-600 dark:bg-neutral-800"
                                >
                                    <option value="">—</option>
                                    {DURATION_UNITS.map((u) => (
                                        <option key={u.value} value={u.value}>{u.label}</option>
                                    ))}
                                </select>
                                {errors.duration_unit && (
                                    <p className="text-sm text-red-500">{errors.duration_unit}</p>
                                )}
                            </div>
                            <div className="md:col-span-2">
                                <Label htmlFor="change_to_lead_status_id">Change Lead Status After Duration</Label>
                                <select
                                    id="change_to_lead_status_id"
                                    name="change_to_lead_status_id"
                                    value={data.change_to_lead_status_id}
                                    onChange={(e) => setData('change_to_lead_status_id', e.target.value)}
                                    className="w-full rounded-md border px-3 py-2 dark:border-neutral-600 dark:bg-neutral-800"
                                >
                                    <option value="">— Do not change —</option>
                                    {availableLeadStatuses.map((ls) => (
                                        <option key={ls.id} value={ls.id}>{ls.name}</option>
                                    ))}
                                </select>
                                {errors.change_to_lead_status_id && (
                                    <p className="text-sm text-red-500">{errors.change_to_lead_status_id}</p>
                                )}
                            </div>
                        </div>
                    </Card>

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