Edit Campaign

Update campaign details and metrics

{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 */}

Basic Information

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

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>

<div>
                                <Label htmlFor="campaign_type_id">Campaign Type *</Label>
                                <select
                                    id="campaign_type_id"
                                    name="campaign_type_id"
                                    value={data.campaign_type_id}
                                    onChange={(e) => setData('campaign_type_id', e.target.value)}
                                    className="w-full rounded-md border px-3 py-2"
                                    required
                                >
                                    <option value="">Select Type</option>
                                    {campaignTypes.map((type) => (
                                        <option key={type.id} value={type.id}>
                                            {type.name}
                                        </option>
                                    ))}
                                </select>
                                {errors.campaign_type_id && (
                                    <p className="text-sm text-red-500">
                                        {errors.campaign_type_id}
                                    </p>
                                )}
                            </div>

<div>
                                <Label htmlFor="campaign_status_id">Status *</Label>
                                <select
                                    id="campaign_status_id"
                                    name="campaign_status_id"
                                    value={data.campaign_status_id}
                                    onChange={(e) => setData('campaign_status_id', e.target.value)}
                                    className="w-full rounded-md border px-3 py-2"
                                    required
                                >
                                    <option value="">Select Status</option>
                                    {campaignStatuses.map((status) => (
                                        <option key={status.id} value={status.id}>
                                            {status.name}
                                        </option>
                                    ))}
                                </select>
                                {errors.campaign_status_id && (
                                    <p className="text-sm text-red-500">
                                        {errors.campaign_status_id}
                                    </p>
                                )}
                            </div>

<div>
                                <Label htmlFor="campaign_channel_id">Channel *</Label>
                                <select
                                    id="campaign_channel_id"
                                    name="campaign_channel_id"
                                    value={data.campaign_channel_id}
                                    onChange={(e) => setData('campaign_channel_id', e.target.value)}
                                    className="w-full rounded-md border px-3 py-2"
                                    required
                                >
                                    <option value="">Select Channel</option>
                                    {campaignChannels.map((channel) => (
                                        <option key={channel.id} value={channel.id}>
                                            {channel.name}
                                        </option>
                                    ))}
                                </select>
                                {errors.campaign_channel_id && (
                                    <p className="text-sm text-red-500">
                                        {errors.campaign_channel_id}
                                    </p>
                                )}
                            </div>

<FormField
                                label="Start Date"
                                name="start_date"
                                type="date"
                                value={data.start_date}
                                onChange={(e) => setData('start_date', e.target.value)}
                                error={errors.start_date}
                                required
                            />

<FormField
                                label="End Date"
                                name="end_date"
                                type="date"
                                value={data.end_date}
                                onChange={(e) => setData('end_date', e.target.value)}
                                error={errors.end_date}
                            />
                        </div>
                    </Card>

{/* Expected Metrics */}
                    <Card className="p-6">
                        <h2 className="mb-4 text-lg font-semibold">Expected Metrics (Goals)</h2>
                        <div className="grid gap-4 md:grid-cols-3">
                            <FormField
                                label="Budget ($)"
                                name="expected_budget"
                                type="number"
                                value={data.expected_budget}
                                onChange={(e) => setData('expected_budget', e.target.value)}
                                error={errors.expected_budget}
                            />

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

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

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

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

<FormField
                                label="Conversion Rate (%)"
                                name="expected_conversion_rate"
                                type="number"
                                value={data.expected_conversion_rate}
                                onChange={(e) =>
                                    setData('expected_conversion_rate', e.target.value)
                                }
                                error={errors.expected_conversion_rate}
                            />

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

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

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

<FormField
                                label="CTR (%)"
                                name="expected_ctr"
                                type="number"
                                value={data.expected_ctr}
                                onChange={(e) => setData('expected_ctr', e.target.value)}
                                error={errors.expected_ctr}
                            />
                        </div>
                    </Card>

{/* Actual Metrics */}
                    <Card className="p-6">
                        <h2 className="mb-4 text-lg font-semibold">Actual Metrics (Performance)</h2>
                        <p className="mb-4 text-sm text-neutral-600 dark:text-neutral-400">
                            Track the actual performance against your expected goals
                        </p>
                        <div className="grid gap-4 md:grid-cols-3">
                            <FormField
                                label="Actual Spend ($)"
                                name="actual_spend"
                                type="number"
                                value={data.actual_spend}
                                onChange={(e) => setData('actual_spend', e.target.value)}
                                error={errors.actual_spend}
                            />

<FormField
                                label="Actual ROI (%)"
                                name="actual_roi"
                                type="number"
                                value={data.actual_roi}
                                onChange={(e) => setData('actual_roi', e.target.value)}
                                error={errors.actual_roi}
                            />

<FormField
                                label="Actual Revenue ($)"
                                name="actual_revenue"
                                type="number"
                                value={data.actual_revenue}
                                onChange={(e) => setData('actual_revenue', e.target.value)}
                                error={errors.actual_revenue}
                            />

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

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

<FormField
                                label="Actual Conversion Rate (%)"
                                name="actual_conversion_rate"
                                type="number"
                                value={data.actual_conversion_rate}
                                onChange={(e) =>
                                    setData('actual_conversion_rate', e.target.value)
                                }
                                error={errors.actual_conversion_rate}
                            />

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

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

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

<FormField
                                label="Actual CTR (%)"
                                name="actual_ctr"
                                type="number"
                                value={data.actual_ctr}
                                onChange={(e) => setData('actual_ctr', e.target.value)}
                                error={errors.actual_ctr}
                            />
                        </div>
                    </Card>

{/* Actions */}
                    <div className="flex justify-end gap-4">
                        <Link href={`/marketing/campaigns/${campaign.id}`}>
                            <Button type="button" variant="outline">
                                Cancel
                            </Button>
                        </Link>
                        <Button type="submit" disabled={processing}>
                            {processing ? 'Updating...' : 'Update Campaign'}
                        </Button>
                    </div>
                </form>
            </div>
        </AppLayout>
    );
}