import AppLayout from '@/layouts/app-layout';
import Heading from '@/components/heading';
import { Button } from '@/components/ui/button';
import { Card } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { Head, Link, router } from '@inertiajs/react';
import { Plus, Users, Eye, Trash2 } from 'lucide-react';
import { PageHelp } from '@/components/page-help';
import { dashboard } from '@/routes';
import { type BreadcrumbItem } from '@/types';
import {
Table,
TableBody,
TableCell,
TableHead,
TableHeader,
TableRow,
} from '@/components/ui/table';
interface ContactList {
id: number;
name: string;
description: string;
contacts_count: number;
created_at: string;
}
interface Props {
lists: ContactList[];
}
export default function Index({ lists = [] }: Props) {
const listArray = Array.isArray(lists) ? lists : [];
const breadcrumbs: BreadcrumbItem[] = [
{
title: 'Dashboard',
href: dashboard().url,
},
{
title: 'Contact Lists',
href: '/contact-lists',
},
];
const helpSections = [
{
title: 'Contact Lists Overview',
content: 'Contact lists are groups of contacts organized for specific campaigns. Create lists to segment your contacts by campaign type, region, interest, or any criteria that suits your needs.',
},
{
title: 'Creating Lists',
content: 'Click "Create List" to make a new contact list. Give it a descriptive name and description to identify its purpose.',
},
{
title: 'Adding Contacts to Lists',
content: 'After creating a list, add contacts from your main contact database. You can import contacts directly into a list or select existing contacts to add.',
},
{
title: 'Using Lists in Campaigns',
content: 'When creating a campaign, select which contact list(s) to call. Each campaign can target one or more contact lists.',
},
{
title: 'List Management',
content: 'View list details to see all contacts, edit list information, or remove contacts. The contact count shows how many contacts are in each list.',
},
];
const handleDelete = (id: number) => {
if (confirm('Are you sure you want to delete this contact list?')) {
router.delete(`/contact-lists/${id}`);
}
};
return (
{listArray.length === 0 ? (
No contact lists found
Create your first contact list to organize your contacts