klioso
Version:
Multi-Service Provider Management System for WordPress and Web Development with Enhanced Scanner
137 lines (134 loc) • 5.1 kB
JSX
import ResponsiveTableLayout from '@/Layouts/ResponsiveTableLayout';
import { Link } from '@inertiajs/react';
import Button from '@/Components/Button';
import DeleteButton from '@/Components/DeleteButton';
export default function Index({ websites, pagination, sortBy, sortDirection, filters }) {
const columns = [
{
label: 'Domain Name',
key: 'domain_name',
sortable: true,
render: website => (
<Link
href={`/websites/${website.id}`}
className="text-indigo-600 hover:text-indigo-900 font-medium"
>
{website.domain_name}
</Link>
)
},
{
label: 'Platform',
key: 'platform',
sortable: true,
render: website => (
<span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
{website.platform || 'Unknown'}
</span>
)
},
{
label: 'Client',
key: 'client',
sortable: false,
render: website => website.client ? (
<Link
href={`/clients/${website.client.id}`}
className="text-indigo-600 hover:text-indigo-900"
>
{website.client.name}
</Link>
) : (
<span className="text-gray-500 italic">No Client</span>
)
},
{
label: 'Status',
key: 'status',
sortable: true,
render: website => (
<span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${
website.status === 'active' ? 'bg-green-100 text-green-800' :
website.status === 'inactive' ? 'bg-red-100 text-red-800' :
website.status === 'maintenance' ? 'bg-yellow-100 text-yellow-800' :
'bg-gray-100 text-gray-800'
}`}>
{website.status || 'Unknown'}
</span>
)
},
{
label: 'Hosting Provider',
key: 'hostingProvider',
sortable: false,
hideOnMobile: true,
render: website => website.hostingProvider ? (
<Link
href={`/hosting-providers/${website.hostingProvider.id}`}
className="text-indigo-600 hover:text-indigo-900"
>
{website.hostingProvider.name}
</Link>
) : (
<span className="text-gray-500 italic">No Host</span>
)
},
{
label: 'Providers',
key: 'providers',
sortable: false,
hideOnMobile: true,
render: website => (
<div className="text-xs space-y-1">
{website.dnsProvider && (
<div className="text-blue-600">DNS: {website.dnsProvider.name}</div>
)}
{website.emailProvider && (
<div className="text-green-600">Email: {website.emailProvider.name}</div>
)}
{website.domainRegistrar && (
<div className="text-purple-600">Domain: {website.domainRegistrar.name}</div>
)}
{!website.dnsProvider && !website.emailProvider && !website.domainRegistrar && '-'}
</div>
)
},
{
label: 'Actions',
key: 'actions',
sortable: false,
render: website => (
<div className="flex flex-col sm:flex-row gap-2">
<Button as={Link} href={`/websites/${website.id}`} size="sm" variant="outline">
View
</Button>
<Button as={Link} href={`/websites/${website.id}/edit`} size="sm">
Edit
</Button>
<DeleteButton
resource={website}
resourceName="website"
deleteRoute={`/websites/${website.id}`}
size="sm"
/>
</div>
)
}
];
return (
<ResponsiveTableLayout
title="Websites"
data={websites}
columns={columns}
createRoute="/websites/create"
createButtonText="Add Website"
searchPlaceholder="Search websites by domain, platform, or client..."
searchRoute="/websites"
emptyStateMessage="No websites found. Start by adding your first website."
filters={filters}
sortBy={sortBy}
sortDirection={sortDirection}
pagination={pagination}
/>
);
}