import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout'; import { PageProps } from '@/types'; import { Paginated } from '@/types/crm'; import { Head, Link, router } from '@inertiajs/react'; import { FormEventHandler, useState } from 'react'; type ContactRow = { id: number; full_name: string; job_title: string | null; email: string | null; phone: string | null; mobile: string | null; is_primary: boolean; last_contacted_at: string | null; activities_count: number; company: { id: number; name: string; city: string | null; status: string; }; }; type Props = PageProps<{ contacts: Paginated; filters: { search: string }; stats: { total: number; primary: number; recentlyContacted: number; companies: number; }; }>; export default function ContactsIndex({ contacts, filters, stats }: Props) { const [search, setSearch] = useState(filters.search); const submit: FormEventHandler = (event) => { event.preventDefault(); router.get(route('contacts.index'), { search }, { preserveState: true }); }; return ( } >

Annuaire des contacts

{contacts.total} contacts associés à vos comptes CRM

setSearch(event.target.value)} placeholder="Nom, email, entreprise..." className="w-64 rounded-lg border-slate-200 text-sm focus:border-blue-500 focus:ring-blue-500" />
{contacts.data.length === 0 && ( )} {contacts.data.map((contact) => ( ))}
Contact Entreprise Coordonnées Dernier contact Actions
Aucun contact ne correspond à votre recherche.
{initials(contact.full_name)}

{contact.full_name}

{contact.job_title ?? 'Fonction non renseignée'} {contact.is_primary && ' - Principal'}

{contact.company.name}

{contact.company.city ?? 'Ville inconnue'}

{contact.email ?? '-'}

{contact.phone ?? contact.mobile ?? '-'}

{formatDate(contact.last_contacted_at)}

{contact.activities_count} activité(s)

Ouvrir la fiche
); } function PageHeader({ title, subtitle, actionHref, actionLabel, }: { title: string; subtitle: string; actionHref: string; actionLabel: string; }) { return (

{title}

{subtitle}

{actionLabel}
); } function Kpi({ label, value, tone }: { label: string; value: number; tone: string }) { const styles: Record = { blue: 'bg-blue-100 text-blue-700', green: 'bg-emerald-100 text-emerald-700', amber: 'bg-amber-100 text-amber-700', purple: 'bg-violet-100 text-violet-700', }; return (
{label}

{value}

); } function initials(name: string) { return name .split(' ') .slice(0, 2) .map((value) => value.slice(0, 1)) .join('') .toUpperCase(); } function formatDate(date: string | null) { return date ? new Date(date).toLocaleDateString('fr-FR') : 'Jamais contacté'; }