import { Head, Link, router } from '@inertiajs/react'; import { useState } from 'react'; import { SystemRecordActions } from '@/components/admin/system-record-actions'; import { ConfigurableTable } from '@/components/ui/configurable-table'; import { PaginationLinks } from '@/components/ui/pagination-links'; import { AdminLayout } from '@/layouts/admin-layout'; import type { PaginatedData } from '@/types'; type AttributeGroupRow = { id: number; name: string; slug: string; is_active: boolean; is_system: boolean; sort_order: number; attributes_count: number; updated_at: string | null; }; type AttributeGroupIndexProps = { groups: PaginatedData; filters: { search: string; }; }; export default function AttributeGroupIndex({ groups, filters, }: AttributeGroupIndexProps) { const [search, setSearch] = useState(filters.search || ''); const submitSearch = (event: React.FormEvent) => { event.preventDefault(); router.get('/admin/attribute-groups', search ? { search } : {}, { preserveState: true, replace: true, preserveScroll: true, }); }; const deleteGroup = (id: number) => { if (!window.confirm('Delete this attribute group?')) { return; } router.delete(`/admin/attribute-groups/${id}`); }; return (

Attribute Groups

Organize technical attributes into reusable groups.

Add Group

{groups.data.map((group) => (

{group.name}

{group.slug}

Active: {group.is_active ? 'Yes' : 'No'}

Sort: {group.sort_order}

Attributes: {group.attributes_count}

Updated: {group.updated_at || '-'}

Edit

))}

{groups.data.map((group) => ( ))}

Name	Active	Sort	Attributes	Actions
{group.name} {group.slug}	{group.is_active ? 'Yes' : 'No'}	{group.sort_order}	{group.attributes_count}	Edit

Name

Active

Sort

Attributes

Actions

{group.name}

{group.slug}

{group.is_active ? 'Yes' : 'No'}

{group.sort_order}

{group.attributes_count}

Edit

Showing {groups.from || 0} to {groups.to || 0} of{' '} {groups.total} groups

); }