import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout'; import { PageProps } from '@/types'; import { Head, Link, usePage } from '@inertiajs/react'; type DashboardProps = PageProps<{ stats: { totalCompanies: number; totalProspects: number; totalLeads: number; totalCustomers: number; totalInactive: number; upcomingActivities: number; overdueActivities: number; estimatedPotential: number; }; activityStats: { open: number; done: number; cancelled: number; }; statusLabels: Record; topZones: Array<{ city: string; total: number; prospects: number; leads: number; customers: number; }>; recentCompanies: Array<{ id: number; name: string; city: string | null; status: string; created_at: string; }>; recentActivities: Array<{ id: number; subject: string; status: string; type: string; due_at: string | null; created_at: string; company?: { id: number; name: string; }; }>; }>; type Tone = 'blue' | 'green' | 'amber' | 'purple' | 'slate' | 'rose'; const toneClasses: Record = { blue: { icon: 'bg-blue-100 text-blue-700', text: 'text-blue-700', bar: 'bg-blue-600', }, green: { icon: 'bg-emerald-100 text-emerald-700', text: 'text-emerald-700', bar: 'bg-emerald-500', }, amber: { icon: 'bg-amber-100 text-amber-700', text: 'text-amber-700', bar: 'bg-amber-500', }, purple: { icon: 'bg-violet-100 text-violet-700', text: 'text-violet-700', bar: 'bg-violet-500', }, slate: { icon: 'bg-slate-100 text-slate-600', text: 'text-slate-600', bar: 'bg-slate-400', }, rose: { icon: 'bg-rose-100 text-rose-700', text: 'text-rose-700', bar: 'bg-rose-500', }, }; export default function Dashboard({ stats, activityStats, statusLabels, topZones, recentCompanies, recentActivities, }: DashboardProps) { const page = usePage(); const activityTotal = activityStats.open + activityStats.done + activityStats.cancelled; const largestZone = Math.max(...topZones.map((zone) => zone.total), 1); const contactRate = percentage(stats.totalCustomers + stats.totalLeads, stats.totalCompanies); return (

Pilotage commercial

Tableau de bord - Vue nationale

Importer + Nouveau prospect
} >
{page.props.flash?.success && (
{page.props.flash.success}
)}
0 ? 'rose' : 'slate'} subline="Action requise" />
France entière {topZones.length} zones principales
{topZones.length === 0 ? ( ) : (
{topZones.map((zone, index) => (
{index + 1}. {zone.city} {formatNumber(zone.total)} entreprises
))}
)}

Intensité calculée à partir des entreprises enregistrées.

Pipeline national

{formatNumber(stats.totalCompanies)} comptes

{contactRate} engagés
Voir la liste des entreprises
0 ? 'rose' : 'green'} />
{topZones.length === 0 && ( )} {topZones.map((zone) => ( ))}
Zone Total Leads Clients
Aucune zone renseignée.
{zone.city} {zone.total} {zone.leads} {zone.customers}
{recentCompanies.length === 0 && ( )} {recentCompanies.slice(0, 5).map((company) => ( {company.name} {company.city ?? 'Zone inconnue'} ))}
{recentActivities.length === 0 && (
)} {recentActivities.slice(0, 5).map((activity) => (

{activity.subject}

{activity.company?.name ?? 'Entreprise supprimée'} {activity.due_at ? ` - ${new Date(activity.due_at).toLocaleDateString('fr-FR')}` : ''}

))}
); } function StatCard({ label, value, icon, tone, subline, }: { label: string; value: string; icon: string; tone: Tone; subline: string; }) { return (
{icon}

{label}

{value}

{subline}

); } function PanelHeader({ title, description }: { title: string; description: string }) { return (

{title}

{description}

); } function PipelineRow({ label, value, total, tone, }: { label: string; value: number; total: number; tone: Tone; }) { const ratio = numericPercentage(value, total); return (
{label} {formatNumber(value)} {ratio}%
); } function Donut({ total, open, done, cancelled, }: { total: number; open: number; done: number; cancelled: number; }) { const openPoint = numericPercentage(open, total); const donePoint = openPoint + numericPercentage(done, total); const background = total === 0 ? '#e2e8f0' : `conic-gradient(#f59e0b 0% ${openPoint}%, #10b981 ${openPoint}% ${donePoint}%, #94a3b8 ${donePoint}% 100%)`; return (
{formatNumber(total)} actions
); } function LegendRow({ label, value, color, }: { label: string; value: number; color: string; }) { return (
{label} {formatNumber(value)}
); } function PriorityCard({ label, value, tone, }: { label: string; value: number; tone: Tone; }) { return (

{label}

{formatNumber(value)}

); } function StatusBadge({ label }: { label: string }) { return ( {label} ); } function EmptyState({ text }: { text: string }) { return

{text}

; } function numericPercentage(value: number, total: number) { return total > 0 ? Math.round((value / total) * 100) : 0; } function percentage(value: number, total: number) { return `${numericPercentage(value, total)}%`; } function formatNumber(value: number) { return new Intl.NumberFormat('fr-FR').format(value); } function formatCurrency(value: number) { return new Intl.NumberFormat('fr-FR', { style: 'currency', currency: 'EUR', notation: value >= 1000000 ? 'compact' : 'standard', maximumFractionDigits: 1, }).format(value); }