import { Head, router, useForm } from '@inertiajs/react'; import { Plus, Tag as TagIcon, Trash2, X } from 'lucide-react'; import { useState } from 'react'; import { toast } from 'sonner'; import { useConfirm } from '@/components/confirm-dialog-provider'; import { Button } from '@/components/ui/button'; import { Card } from '@/components/ui/card'; import { Input } from '@/components/ui/input'; import { Label } from '@/components/ui/label'; import AppLayout from '@/layouts/app-layout'; import { useT } from '@/lib/i18n'; import type { BreadcrumbItem } from '@/types'; type Tag = { id: string; label: string; color: string; created_at: string | null; }; type Props = { tags: Tag[]; }; const PALETTE = [ '#ef4444', // red '#f59e0b', // amber '#10b981', // emerald '#06b6d4', // cyan '#3b82f6', // blue '#8b5cf6', // violet '#ec4899', // pink '#64748b', // slate ]; export default function TagsSettings({ tags }: Props) { const { t } = useT(); const confirm = useConfirm(); const [editingId, setEditingId] = useState(null); const [showCreate, setShowCreate] = useState(false); const breadcrumbs: BreadcrumbItem[] = [ { title: t('Tags'), href: '/app/settings/tags' }, ]; const remove = async (id: string) => { const ok = await confirm({ title: t('Delete tag?'), message: t( 'Delete this tag? It will be removed from every conversation.', ), confirmLabel: t('Delete'), danger: true, }); if (!ok) { return; } router.delete(`/app/settings/tags/${id}`, { preserveScroll: true, onSuccess: () => toast.success(t('Removed.')), }); }; return (

{t('Tags')}

{t( 'Categorize conversations so your team can filter and report on them later. Apply tags from the end-side panel inside any conversation thread.', )}

{showCreate && ( setShowCreate(false)} method="post" /> )} {tags.length === 0 && !showCreate ? (

{t('No tags yet.')}

{t( 'Try "Billing", "Bug", "Refund", "Feature request".', )}

) : (
{tags.map((tag) => editingId === tag.id ? ( setEditingId(null)} method="patch" /> ) : ( {tag.label} {tag.color}
), )}
)}
); } function TagForm({ tag, onDone, method, }: { tag?: Tag; onDone: () => void; method: 'post' | 'patch'; }) { const { t } = useT(); const form = useForm({ label: tag?.label ?? '', color: tag?.color ?? PALETTE[0]!, }); const submit = (e: React.FormEvent) => { e.preventDefault(); const url = tag ? `/app/settings/tags/${tag.id}` : '/app/settings/tags'; const opts = { preserveScroll: true, onSuccess: onDone }; if (method === 'patch') { form.patch(url, opts); } else { form.post(url, opts); } }; return (

{tag ? t('Edit tag') : t('New tag')}

form.setData('label', e.target.value)} maxLength={60} placeholder={t('Billing')} required />
{PALETTE.map((c) => (
form.setData('color', e.target.value)} placeholder="#64748b" maxLength={7} className="mt-1 w-32 font-mono text-xs" />
); }