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 ActivityRow = { id: number; subject: string; details: string | null; type: string; status: string; due_at: string | null; created_at: string; company: { id: number; name: string; city: string | null }; contact?: { full_name?: string; first_name: string | null; last_name: string | null }; user?: { id: number; name: string }; }; type Props = PageProps<{ mode: 'relances' | 'appels' | 'taches'; title: string; activities: Paginated; filters: { search: string; status: string }; typeLabels: Record; statusLabels: Record; stats: { total: number; open: number; overdue: number; plannedThisWeek: number; done: number; }; }>; export default function ActivitiesIndex({ mode, title, activities, filters, typeLabels, statusLabels, stats, }: Props) { const [localFilters, setLocalFilters] = useState(filters); const routeName = { relances: 'activities.follow-ups', appels: 'activities.calls', taches: 'activities.tasks', }[mode]; const submit: FormEventHandler = (event) => { event.preventDefault(); router.get(route(routeName), localFilters, { preserveState: true }); }; return (

{title}

Suivi opérationnel des {title.toLowerCase()} enregistrés

+ Choisir une entreprise } >

Filtres

setLocalFilters((current) => ({ ...current, search: event.target.value })) } placeholder="Sujet ou entreprise" className="mt-2 w-full rounded-lg border-slate-200 text-sm" />

Liste des {title.toLowerCase()}

{activities.total} éléments suivis

{activities.data.length === 0 && ( )} {activities.data.map((activity) => ( ))}
Action Entreprise Type Échéance Statut Responsable
Aucune activité enregistrée pour cette vue.

{activity.subject}

{activity.details ?? 'Aucun détail'}

{activity.company.name}

{activity.company.city ?? '-'}

 {typeLabels[activity.type] ?? activity.type} {formatDate(activity.due_at)} {activity.user?.name ?? 'Non assigné'}
); } function Metric({ label, value, tone }: { label: string; value: number; tone: string }) { const colors: Record = { blue: 'text-blue-700 bg-blue-50', amber: 'text-amber-700 bg-amber-50', rose: 'text-rose-700 bg-rose-50', green: 'text-emerald-700 bg-emerald-50', purple: 'text-violet-700 bg-violet-50', }; return (
{label}

{value}

); } function Status({ status, label }: { status: string; label: string }) { const style = status === 'done' ? 'bg-emerald-50 text-emerald-700' : status === 'cancelled' ? 'bg-slate-100 text-slate-600' : 'bg-amber-50 text-amber-700'; return {label}; } function formatDate(date: string | null) { return date ? new Date(date).toLocaleString('fr-FR', { dateStyle: 'short', timeStyle: 'short' }) : 'Non planifiée'; }