import { Head, router } from '@inertiajs/react'; import AppLayout from '@/layouts/app-layout'; import { Button } from '@/components/ui/button'; import { Input } from '@/components/ui/input'; import { Card } from '@/components/ui/card'; import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from '@/components/ui/table'; import { Badge } from '@/components/ui/badge'; import { Search, Plus, Upload, CheckCircle } from 'lucide-react'; import { useState } from 'react'; import { PageHelp } from '@/components/page-help'; import { dashboard } from '@/routes'; import { type BreadcrumbItem } from '@/types'; import Heading from '@/components/heading'; import { ImportModal } from '@/components/contacts/import-modal'; import { PhoneValidationModal } from '@/components/contacts/phone-validation-modal'; interface Contact { id: number; first_name: string; last_name: string; phone_number: string; email?: string; company?: string; tags?: string[]; status: string; } interface ContactTag { id: number; name: string; } interface ContactList { id: number; name: string; } interface Props { contacts: { data: Contact[]; current_page: number; last_page: number; per_page: number; total: number; }; tags?: ContactTag[]; lists?: ContactList[]; filters?: { search?: string; }; } export default function ContactsIndex({ contacts, tags = [], lists = [], filters = {} }: Props) { const [search, setSearch] = useState(filters.search || ''); const [importModalOpen, setImportModalOpen] = useState(false); const [validationModalOpen, setValidationModalOpen] = useState(false); const handleSearch = () => { router.get('/contacts', { search }, { preserveState: true }); }; const breadcrumbs: BreadcrumbItem[] = [ { title: 'Dashboard', href: dashboard().url, }, { title: 'Contacts', href: '/contacts', }, ]; const helpSections = [ { title: 'Contact Management', content: 'Manage all your contacts in one place. Add contacts individually, import in bulk from CSV files, and organize them into contact lists for campaigns.', }, { title: 'Adding Contacts', content: 'Click "Add Contact" to manually create a single contact, or use "Import" to upload multiple contacts from a CSV file.', }, { title: 'Contact Information', content: 'Each contact can have first name, last name, phone number (required), email, company, and tags for organization.', }, { title: 'Contact Status', content: 'Active: Available for calling. Inactive: Excluded from campaigns. DNC (Do Not Call): Permanently excluded from all calls.', }, { title: 'Search and Filter', content: 'Search by name, phone number, email, or company. Use filters to view contacts by status or tags.', }, { title: 'Bulk Actions', content: 'Select multiple contacts to perform bulk operations like adding to contact lists, changing status, or exporting.', }, ]; return (
setSearch(e.target.value)} onKeyDown={(e) => e.key === 'Enter' && handleSearch()} className="pl-10" />
Name Phone Email Company Status Actions {contacts?.data?.length > 0 ? ( contacts.data.map((contact) => ( {contact.first_name} {contact.last_name} {contact.phone_number} {contact.email || '-'} {contact.company || '-'} {contact.status} )) ) : ( No contacts found )}
{contacts?.total > contacts?.per_page && (
{Array.from({ length: contacts.last_page }, (_, i) => i + 1).map((page) => ( ))}
)}
setImportModalOpen(false)} tags={tags} lists={lists} /> setValidationModalOpen(false)} onValidate={() => { // Optionally refresh contacts list after validation // router.reload({ only: ['contacts'] }); }} /> ); }