klioso
Version:
Multi-Service Provider Management System for WordPress and Web Development with Enhanced Scanner
144 lines (139 loc) • 7.96 kB
JSX
import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout';
import { useForm } from '@inertiajs/react';
import Form from '@/Components/Form';
import Button from '@/Components/Button';
import BackButton from '@/Components/BackButton';
import WebsitePlugins from '@/Components/WebsitePlugins';
export default function Edit({ website, clients, hostingProviders, allPlugins = [] }) {
const { data, setData, put, errors } = useForm({
domain_name: website.domain_name || '',
platform: website.platform || '',
client_id: website.client_id || '',
hosting_provider_id: website.hosting_provider_id || '',
dns_provider_id: website.dns_provider_id || '',
email_provider_id: website.email_provider_id || '',
domain_registrar_id: website.domain_registrar_id || '',
status: website.status || 'active',
notes: website.notes || '',
});
// Filter providers by service type
const hostingProviders_filtered = hostingProviders?.filter(p => p.provides_hosting) || [];
const dnsProviders = hostingProviders?.filter(p => p.provides_dns) || [];
const emailProviders = hostingProviders?.filter(p => p.provides_email) || [];
const domainRegistrars = hostingProviders?.filter(p => p.provides_domain_registration) || [];
return (
<AuthenticatedLayout header={<h1 className="text-2xl font-bold text-gray-800">Edit Website</h1>}>
<div className="max-w-4xl mx-auto space-y-6 mt-8">
{/* Website Details Form */}
<div className="bg-white rounded-lg shadow p-6">
<div className="flex justify-between items-center mb-6">
<BackButton fallbackRoute={`/websites/${website.id}`} />
<h2 className="text-lg font-semibold">Edit Website</h2>
</div>
<Form onSubmit={e => { e.preventDefault(); put(`/websites/${website.id}`); }}>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<Form.Input
label="Domain Name"
value={data.domain_name}
onChange={e => setData('domain_name', e.target.value)}
required
placeholder="example.com"
error={errors?.domain_name}
/>
<Form.Input
label="Platform"
value={data.platform}
onChange={e => setData('platform', e.target.value)}
required
placeholder="WordPress, Laravel, etc."
error={errors?.platform}
/>
<Form.Select
label="Client (Optional)"
value={data.client_id}
onChange={e => setData('client_id', e.target.value)}
error={errors?.client_id}
>
<option value="">No client / Internal / Development</option>
{clients?.map(client => (
<option key={client.id} value={client.id}>{client.name}</option>
))}
</Form.Select>
<Form.Select
label="Hosting Provider (Optional)"
value={data.hosting_provider_id}
onChange={e => setData('hosting_provider_id', e.target.value)}
error={errors?.hosting_provider_id}
>
<option value="">No hosting / TBD</option>
{hostingProviders_filtered?.map(provider => (
<option key={provider.id} value={provider.id}>{provider.name}</option>
))}
</Form.Select>
<Form.Select
label="DNS Provider (Optional)"
value={data.dns_provider_id}
onChange={e => setData('dns_provider_id', e.target.value)}
error={errors?.dns_provider_id}
>
<option value="">No DNS provider / TBD</option>
{dnsProviders?.map(provider => (
<option key={provider.id} value={provider.id}>{provider.name}</option>
))}
</Form.Select>
<Form.Select
label="Email Provider (Optional)"
value={data.email_provider_id}
onChange={e => setData('email_provider_id', e.target.value)}
error={errors?.email_provider_id}
>
<option value="">No email provider / TBD</option>
{emailProviders?.map(provider => (
<option key={provider.id} value={provider.id}>{provider.name}</option>
))}
</Form.Select>
<Form.Select
label="Domain Registrar (Optional)"
value={data.domain_registrar_id}
onChange={e => setData('domain_registrar_id', e.target.value)}
error={errors?.domain_registrar_id}
>
<option value="">No domain registrar / TBD</option>
{domainRegistrars?.map(provider => (
<option key={provider.id} value={provider.id}>{provider.name}</option>
))}
</Form.Select>
<Form.Select
label="Status"
value={data.status}
onChange={e => setData('status', e.target.value)}
error={errors?.status}
>
<option value="active">Active</option>
<option value="inactive">Inactive</option>
<option value="maintenance">Maintenance</option>
<option value="development">Development</option>
</Form.Select>
</div>
<Form.Textarea
label="Notes"
value={data.notes}
onChange={e => setData('notes', e.target.value)}
error={errors?.notes}
/>
<Button type="submit">Update Website</Button>
</Form>
{errors && <div className="mt-4 text-red-500 text-sm">{Object.values(errors).join(', ')}</div>}
</div>
{/* Website Plugins Management */}
<div className="bg-white rounded-lg shadow p-6">
<WebsitePlugins
website={website}
allPlugins={allPlugins}
websitePlugins={website.plugins || []}
/>
</div>
</div>
</AuthenticatedLayout>
);
}