import AppLayout from '@/layouts/app-layout'; import Heading from '@/components/heading'; import { Button } from '@/components/ui/button'; import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'; import { Badge } from '@/components/ui/badge'; import { Head, Link } from '@inertiajs/react'; import { Plus, Tag, Trash2 } from 'lucide-react'; import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from '@/components/ui/table'; import { PageHelp } from '@/components/page-help'; import { dashboard } from '@/routes'; import { type BreadcrumbItem } from '@/types'; interface ContactTag { id: number; name: string; color: string; contacts_count: number; created_at: string; } interface Props { tags: ContactTag[]; } export default function Index({ tags = [] }: Props) { const tagArray = Array.isArray(tags) ? tags : []; const breadcrumbs: BreadcrumbItem[] = [ { title: 'Dashboard', href: dashboard().url }, { title: 'Contact Tags', href: '/contact-tags' }, ]; const helpSections = [ { title: 'Contact Tags', content: 'Tags help you organize and categorize contacts. Use tags to segment contacts by interest, location, industry, or any custom criteria.', }, { title: 'Creating Tags', content: 'Click "Create Tag" to add a new tag. Choose a descriptive name and color to easily identify the tag when filtering contacts.', }, { title: 'Applying Tags', content: 'Apply tags to contacts when creating or editing them. A contact can have multiple tags for flexible organization.', }, { title: 'Using Tags in Campaigns', content: 'Filter contact lists by tags when creating campaigns to target specific segments of your audience.', }, { title: 'Tag Colors', content: 'Assign unique colors to tags for visual distinction. This makes it easier to identify tagged contacts at a glance.', }, ]; return (
All Tags Manage tags to categorize and filter your contacts {tagArray.length === 0 ? (

No tags found

Create your first tag to organize your contacts

) : ( Tag Contacts Created Actions {tagArray.map((tag) => ( {tag.name} {Number(tag.contacts_count || 0)} contacts {new Date(tag.created_at).toLocaleDateString()}
))}
)}
); }