import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout'; import { PageProps } from '@/types'; import { Company } from '@/types/crm'; import { Head, Link, router } from '@inertiajs/react'; import franceDepartments from '@svg-maps/france.departments'; type Department = { code: string; companies: number; contacts: number; activities: number; contracts: number; potential: number; }; type DepartmentMap = { viewBox: string; locations: Array<{ id: string; name: string; path: string; }>; }; type Props = PageProps<{ departments: Department[]; selectedDepartment: string; companies: Company[]; stats: { companies: number; contacts: number; activities: number; customers: number; potential: number; }; }>; const departmentMap = franceDepartments as DepartmentMap; const departmentNames = new Map( departmentMap.locations.map((location) => [location.id.toUpperCase(), location.name]), ); export default function MapIndex({ departments, selectedDepartment, companies, stats }: Props) { const departmentByCode = new Map(departments.map((department) => [department.code, department])); const selectedSummary = departmentByCode.get(selectedDepartment); const maxCompanies = Math.max(...departments.map((department) => department.companies), 1); return (

Carte de France

Suivi de la prospection par département

} >

Carte départementale

Cliquez sur un département coloré pour consulter le détail

Carte réelle des départements de France {departmentMap.locations.map((location) => { const code = location.id.toUpperCase(); const department = departmentByCode.get(code); const isSelected = selectedDepartment === code; const pathClass = `transition ${ isSelected ? 'fill-blue-700 stroke-blue-950 stroke-[2]' : department ? mapFillColor(department.companies, maxCompanies) : 'fill-slate-200 stroke-white stroke-[1]' }`; if (!department) { return ( {`${code} - ${location.name}`} ); } return ( router.get(route('geography.index'), { department: code })} onKeyDown={(event) => { if (event.key === 'Enter' || event.key === ' ') { event.preventDefault(); router.get(route('geography.index'), { department: code }); } }} > {`${code} - ${location.name} : ${department.companies} entreprise(s)`} ); })}
{departments.length > 0 && (
Départements actifs {departments.map((department) => ( ))}
)}

Fond cartographique :{' '} SVG Maps - France Departments {' '} (CC-BY-4.0).

{selectedDepartment ? `Comptes suivis - ${selectedDepartment} - ${departmentName(selectedDepartment)}` : 'Derniers comptes suivis'}

{selectedDepartment && {companies.length} résultat(s)}
{companies.length === 0 &&

Aucune entreprise dans cette zone.

} {companies.map((company) => (

{company.name}

{company.postal_code ?? '-'} {company.city ?? 'Ville non renseignée'}

{company.estimated_potential ? currency(Number(company.estimated_potential)) : 'Potentiel non renseigné'}

))}
); } function Metric({ label, value }: { label: string; value: string }) { return

{label}

{value}

; } function Legend({ color, label }: { color: string; label: string }) { return {label}; } function Summary({ label, value, tone = 'text-slate-900', highlight = false }: { label: string; value: string; tone?: string; highlight?: boolean }) { return (
{label} {value}
); } function mapFillColor(companies: number, maxCompanies: number) { const ratio = companies / maxCompanies; if (ratio >= 0.75) { return 'fill-emerald-700 stroke-white stroke-[1] hover:fill-emerald-800'; } if (ratio >= 0.4) { return 'fill-emerald-500 stroke-white stroke-[1] hover:fill-emerald-600'; } return 'fill-emerald-200 stroke-white stroke-[1] hover:fill-emerald-300'; } function departmentName(code: string) { return departmentNames.get(code) ?? `Département ${code}`; } function number(value: number) { return new Intl.NumberFormat('fr-FR').format(value); } function currency(value: number) { return new Intl.NumberFormat('fr-FR', { style: 'currency', currency: 'EUR', maximumFractionDigits: 0 }).format(value); }