import { Head, router, useForm } from '@inertiajs/react'; import { ChevronDown, ChevronUp, Edit2, Plus, Save, Tag, Trash2, X } from 'lucide-react'; import { useState } from 'react'; import AdminLayout from '@/layouts/admin-layout'; interface AttributeValue { id: number; value: string; slug: string; } interface Attribute { id: number; name: string; slug: string; values: AttributeValue[]; } export default function AttributesIndex({ attributes }: { attributes: Attribute[] }) { const [expanded, setExpanded] = useState(null); const [editingAttr, setEditingAttr] = useState(null); const [editName, setEditName] = useState(''); const createForm = useForm({ name: '' }); const valueForm = useForm({ value: '' }); const submitCreate = (e: React.FormEvent) => { e.preventDefault(); createForm.post('/admin/attributes', { onSuccess: () => createForm.reset() }); }; const submitEdit = (attr: Attribute) => { router.patch(`/admin/attributes/${attr.id}`, { name: editName }, { onSuccess: () => setEditingAttr(null), }); }; const deleteAttr = (id: number) => { if (!confirm('Delete attribute and all its values?')) return; router.delete(`/admin/attributes/${id}`); }; const addValue = (e: React.FormEvent, attrId: number) => { e.preventDefault(); valueForm.post(`/admin/attributes/${attrId}/values`, { onSuccess: () => valueForm.reset() }); }; const deleteValue = (attrId: number, valueId: number) => { router.delete(`/admin/attributes/${attrId}/values/${valueId}`); }; return (

Product Attributes

Manage size, color, and other variation attributes

{/* Create Attribute */}
createForm.setData('name', e.target.value)} placeholder="New attribute name (e.g. Size, Color)" className="flex-1 rounded-xl border border-slate-200 px-4 py-2.5 text-sm focus:border-indigo-400 focus:outline-none focus:ring-2 focus:ring-indigo-100" />
{createForm.errors.name &&

{createForm.errors.name}

} {/* Attribute List */}
{attributes.length === 0 && (
No attributes yet. Add one above.
)} {attributes.map((attr) => (
{/* Header */}
{editingAttr === attr.id ? (
setEditName(e.target.value)} className="flex-1 rounded-lg border border-indigo-300 px-3 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-100" autoFocus />
) : ( )} {editingAttr !== attr.id && (
)}
{/* Values */} {expanded === attr.id && (
{attr.values.map((v) => (
{v.value}
))} {attr.values.length === 0 && ( No values yet )}
addValue(e, attr.id)} className="flex gap-2"> valueForm.setData('value', e.target.value)} placeholder="Add value (e.g. Large, Red)" className="flex-1 rounded-lg border border-slate-200 bg-white px-3 py-1.5 text-sm focus:border-indigo-400 focus:outline-none focus:ring-2 focus:ring-indigo-100" />
)}
))}
); }