{brands.map((brand) => (

{brand.name} {!brand.is_active && (inactive)}

{brand.industry || 'No industry'} · {brand.website || 'No website'}

{brand.description &&

{brand.description}

}

{canManage && ( )}

{canManage && }

))} {brands.length === 0 &&

No brands yet.

}

{canManage && (

{ event.preventDefault(); form.post('/settings/brands', { onSuccess: () => form.reset('name', 'description', 'website', 'industry') }); }}>

New brand

form.setData('name', event.target.value)} required /> form.setData('industry', event.target.value)} /> form.setData('website', event.target.value)} placeholder="https://" />

form.setData('description', event.target.value)} /></Field>
                    <label className="flex items-center gap-2 text-sm"><input type="checkbox" checked={form.data.is_active} onChange={(event) => form.setData('is_active', event.target.checked)} /> Active</label>
                    <Button type="submit" disabled={form.processing}>Create brand</Button>
                </form>
            )}
        </div>
    );
}

function BrandEditor({ brand }: { brand: Brand }) {
    const form = useForm({
        name: brand.name,
        description: brand.description ?? '',
        website: brand.website ?? '',
        industry: brand.industry ?? '',
        is_active: brand.is_active,
    });

return (
        <details className="mt-2">
            <summary className="cursor-pointer text-brand-700">Edit brand</summary>
            <form className="mt-2 grid gap-2" onSubmit={(event) => { event.preventDefault(); form.put(`/settings/brands/${brand.id}`, { preserveScroll: true }); }}>
                <Field label="Name" error={form.errors.name}><Input value={form.data.name} onChange={(event) => form.setData('name', event.target.value)} required /></Field>
                <Field label="Industry"><Input value={form.data.industry} onChange={(event) => form.setData('industry', event.target.value)} /></Field>
                <Field label="Website" error={form.errors.website}><Input value={form.data.website} onChange={(event) => form.setData('website', event.target.value)} placeholder="https://" /></Field>
                <Field label="Description"><Textarea value={form.data.description} onChange={(event) => form.setData('description', event.target.value)} /></Field>
                <label className="flex items-center gap-2 text-sm"><input type="checkbox" checked={form.data.is_active} onChange={(event) => form.setData('is_active', event.target.checked)} /> Active</label>
                <Button type="submit" size="sm" disabled={form.processing}>Save brand</Button>
            </form>
        </details>
    );
}

function startEdit(platform: PlatformRow) {
        setEditing(platform);
        editForm.setData({
            name: platform.name,
            color: platform.color || 'zinc',
            is_active: platform.is_active,
            sort_order: platform.sort_order,
        });
        editForm.clearErrors();
    }

return (
        <div className="grid gap-4 lg:grid-cols-[1fr_20rem]">
            <div className="space-y-3">
                <ul className="divide-y divide-zinc-100 rounded-xl border border-zinc-200 bg-white">
                    {platforms.map((platform) => (
                        <li key={platform.id} className="flex items-center justify-between gap-3 px-4 py-3">
                            <div className="flex min-w-0 items-center gap-3">
                                <PlatformIcon slug={platform.slug} name={platform.name} color={platform.color} />
                                <div className="min-w-0">
                                    <p className="truncate text-sm font-medium text-zinc-900">{platform.name}</p>
                                    <p className="text-xs text-zinc-500">
                                        {platform.is_active ? 'Active' : 'Hidden'}
                                        {platform.is_custom ? ' · Custom' : ''}
                                        {' · '}
                                        <span className="capitalize">{platform.color}</span>
                                    </p>
                                </div>
                            </div>
                            <span className="flex shrink-0 items-center gap-0.5">
                                <button
                                    type="button"
                                    aria-label={`Edit ${platform.name}`}
                                    className="rounded-md p-1.5 text-zinc-500 hover:bg-zinc-100 hover:text-zinc-900"
                                    onClick={() => startEdit(platform)}
                                >
                                    <Pencil className="h-4 w-4" />
                                </button>
                                {platform.is_custom && (
                                    <button
                                        type="button"
                                        aria-label={`Delete ${platform.name}`}
                                        className="rounded-md p-1.5 text-zinc-500 hover:bg-rose-50 hover:text-rose-700"
                                        onClick={async () => {
                                            const ok = await confirmAction({
                                                title: 'Delete platform?',
                                                message: `Delete “${platform.name}”? This cannot be undone.`,
                                                confirmLabel: 'Delete',
                                            });
                                            if (ok) router.delete(`/settings/platforms/${platform.id}`, { preserveScroll: true });
                                        }}
                                    >
                                        <Trash2 className="h-4 w-4" />
                                    </button>
                                )}
                            </span>
                        </li>
                    ))}
                    {platforms.length === 0 && <li className="px-4 py-6 text-sm text-zinc-500">No platforms yet.</li>}
                </ul>
                {editing && (
                    <form className="space-y-3 rounded-xl border border-zinc-200 bg-zinc-50 p-4" onSubmit={saveEdit}>
                        <div className="flex items-center gap-3">
                            <PlatformIcon slug={editing.slug} name={editForm.data.name || editing.name} color={editForm.data.color} />
                            <p className="text-sm font-medium text-zinc-800">Editing {editing.name}</p>
                        </div>
                        <Field label="Name" error={editForm.errors.name}>
                            <Input value={editForm.data.name} onChange={(event) => editForm.setData('name', event.target.value)} required />
                        </Field>
                        <Field label="Color">
                            <div className="flex items-center gap-2">
                                <Select
                                    value={colorOptions.includes(editForm.data.color) ? editForm.data.color : 'zinc'}
                                    onChange={(event) => editForm.setData('color', event.target.value)}
                                >
                                    {colorOptions.map((color) => <option key={color} value={color}>{color}</option>)}
                                </Select>
                                <span className={`shrink-0 rounded-full px-2.5 py-1 text-xs font-medium capitalize ${tone[editForm.data.color] ?? tone.zinc}`}>
                                    {editForm.data.color}
                                </span>
                            </div>
                        </Field>
                        <Field label="Order">
                            <Input
                                type="number"
                                value={editForm.data.sort_order}
                                onChange={(event) => editForm.setData('sort_order', Number(event.target.value))}
                            />
                        </Field>
                        <label className="flex items-center gap-2 text-sm">
                            <input
                                type="checkbox"
                                checked={editForm.data.is_active}
                                onChange={(event) => editForm.setData('is_active', event.target.checked)}
                            />
                            Active (shown in content filters)
                        </label>
                        {(editForm.errors.is_active || editForm.errors.sort_order) && (
                            <p className="text-sm text-rose-700">{editForm.errors.is_active || editForm.errors.sort_order}</p>
                        )}
                        <div className="flex gap-2">
                            <Button type="submit" size="sm" disabled={editForm.processing}>Save platform</Button>
                            <Button type="button" size="sm" variant="secondary" onClick={() => setEditing(null)}>Cancel</Button>
                        </div>
                    </form>
                )}
            </div>
            <form className="h-fit space-y-3 rounded-xl border border-zinc-200 bg-white p-4" onSubmit={(event) => { event.preventDefault(); form.post('/settings/platforms', { onSuccess: () => form.reset('name') }); }}>
                <h2 className="font-semibold">Custom platform</h2>
                <Field label="Name" error={form.errors.name}><Input value={form.data.name} onChange={(event) => form.setData('name', event.target.value)} required /></Field>
                <Field label="Color">
                    <div className="flex items-center gap-2">
                        <Select value={form.data.color} onChange={(event) => form.setData('color', event.target.value)}>
                            {colorOptions.map((color) => <option key={color} value={color}>{color}</option>)}
                        </Select>
                        <PlatformIcon slug="custom" name={form.data.name || 'New'} color={form.data.color} size="sm" />
                    </div>
                </Field>
                <Button type="submit" disabled={form.processing}>Add platform</Button>
            </form>
        </div>
    );
}

function WorkflowSection({ statuses }: { statuses: StatusRow[] }) {
    return (
        <div className="space-y-3">
            <p className="text-sm text-zinc-600">Moving a card still checks the destination permission and required fields. Changing the graph here does not grant approval or publishing rights.</p>
            {statuses.map((status) => <WorkflowRow key={status.id} status={status} statuses={statuses} />)}
        </div>
    );
}

function WorkflowRow({ status, statuses }: { status: StatusRow; statuses: StatusRow[] }) {
    const form = useForm({
        name: status.name,
        color: status.color,
        sort_order: status.sort_order,
        allowed_transitions: status.allowed_transitions ?? [],
    });

return (
        <form className="rounded-xl border border-zinc-200 bg-white p-4" onSubmit={(event) => { event.preventDefault(); form.put(`/settings/workflow/${status.id}`); }}>
            <div className="grid gap-3 md:grid-cols-3">
                <Field label={`${status.slug} label`}><Input value={form.data.name} onChange={(event) => form.setData('name', event.target.value)} /></Field>
                <Field label="Color">
                    <div className="flex items-center gap-2">
                        <Select
                            value={colorOptions.includes(form.data.color) ? form.data.color : 'zinc'}
                            onChange={(event) => form.setData('color', event.target.value)}
                        >
                            {colorOptions.map((color) => <option key={color} value={color}>{color}</option>)}
                        </Select>
                        <span className={`shrink-0 rounded-full px-2.5 py-1 text-xs font-medium capitalize ${tone[form.data.color] ?? tone.zinc}`}>
                            {form.data.color}
                        </span>
                    </div>
                </Field>
                <Field label="Order"><Input type="number" value={form.data.sort_order} onChange={(event) => form.setData('sort_order', Number(event.target.value))} /></Field>
            </div>
            <div className="mt-3 flex flex-wrap gap-3">
                {statuses.filter((option) => option.slug !== status.slug).map((option) => (
                    <label key={option.slug} className="flex items-center gap-2 text-sm">
                        <input type="checkbox" checked={form.data.allowed_transitions.includes(option.slug)} onChange={() => form.setData('allowed_transitions', form.data.allowed_transitions.includes(option.slug) ? form.data.allowed_transitions.filter((slug) => slug !== option.slug) : [...form.data.allowed_transitions, option.slug])} />
                        {option.name}
                    </label>
                ))}
            </div>
            <Button className="mt-3" size="sm" type="submit" disabled={form.processing}>Save stage</Button>
        </form>
    );
}

function startEdit(row: Named) {
        setEditing(row);
        editForm.setData({
            name: row.name,
            description: row.description ?? '',
            brand_id: row.brand_id != null ? String(row.brand_id) : '',
        });
        editForm.clearErrors();
    }

return (
        <section className="rounded-xl border border-zinc-200 bg-white p-4">
            <h2 className="font-semibold">{title}</h2>
            <ul className="my-3 space-y-1 text-sm text-zinc-700">
                {rows.map((row) => (
                    <li key={row.id} className="flex items-center justify-between gap-2 rounded-md px-1 py-1 hover:bg-zinc-50">
                        <span>{row.name}{row.brand?.name ? ` · ${row.brand.name}` : ''}</span>
                        {canManage && (
                            <span className="flex shrink-0 items-center gap-0.5">
                                <button type="button" aria-label={`Edit ${row.name}`} className="rounded-md p-1.5 text-zinc-500 hover:bg-zinc-100 hover:text-zinc-900" onClick={() => startEdit(row)}>
                                    <Pencil className="h-4 w-4" />
                                </button>
                                <button
                                    type="button"
                                    aria-label={`Delete ${row.name}`}
                                    className="rounded-md p-1.5 text-zinc-500 hover:bg-rose-50 hover:text-rose-700"
                                    onClick={async () => {
                                        const ok = await confirmAction({
                                            title: 'Delete item?',
                                            message: `Delete “${row.name}”? This cannot be undone.`,
                                            confirmLabel: 'Delete',
                                        });
                                        if (ok) router.delete(`${endpoint}/${row.id}`, { preserveScroll: true });
                                    }}
                                >
                                    <Trash2 className="h-4 w-4" />
                                </button>
                            </span>
                        )}
                    </li>
                ))}
                {rows.length === 0 && <li className="px-1 py-2 text-zinc-500">None yet.</li>}
            </ul>
            {editing && (
                <form className="mb-3 space-y-2 rounded-lg border border-zinc-200 bg-zinc-50 p-3" onSubmit={saveEdit}>
                    <p className="text-xs font-medium text-zinc-600">Editing {editing.name}</p>
                    <Input value={editForm.data.name} onChange={(event) => editForm.setData('name', event.target.value)} required />
                    {brands && (
                        <Select value={editForm.data.brand_id} onChange={(event) => editForm.setData('brand_id', event.target.value)}>
                            <option value="">All brands</option>
                            {brands.map((brand) => <option key={brand.id} value={brand.id}>{brand.name}</option>)}
                        </Select>
                    )}
                    {editForm.errors.name && <p className="text-sm text-rose-700">{editForm.errors.name}</p>}
                    <div className="flex gap-2">
                        <Button type="submit" size="sm" disabled={editForm.processing}>Save</Button>
                        <Button type="button" size="sm" variant="secondary" onClick={() => setEditing(null)}>Cancel</Button>
                    </div>
                </form>
            )}
            <form className="space-y-2" onSubmit={(event) => { event.preventDefault(); form.post(endpoint, { onSuccess: () => form.reset('name', 'description', 'brand_id') }); }}>
                <Input value={form.data.name} placeholder="Name" onChange={(event) => form.setData('name', event.target.value)} required />
                {brands && <Select value={form.data.brand_id} onChange={(event) => form.setData('brand_id', event.target.value)}><option value="">All brands</option>{brands.map((brand) => <option key={brand.id} value={brand.id}>{brand.name}</option>)}</Select>}
                {form.errors.name && <p className="text-sm text-rose-700">{form.errors.name}</p>}
                <Button type="submit" size="sm">Add</Button>
            </form>
        </section>
    );
}

New user

Invite teammates

New brand