210 lines
9.2 KiB
TypeScript
210 lines
9.2 KiB
TypeScript
"use client";
|
|
|
|
import React, { useEffect } from 'react';
|
|
import { usePageTitle } from '@/hooks/usePageTitle';
|
|
import { Calculator, Info, AlertTriangle, Scale } from 'lucide-react';
|
|
import { usePostHog } from 'posthog-js/react';
|
|
|
|
export default function SimulateurPage() {
|
|
usePageTitle("Simulateur de paie");
|
|
const posthog = usePostHog();
|
|
|
|
// 📊 Écouter les messages de l'iframe pour tracker les calculs
|
|
useEffect(() => {
|
|
const handleMessage = (event: MessageEvent) => {
|
|
// Vérifier que le message vient de notre iframe
|
|
if (event.data?.type === 'simulateur_calculation') {
|
|
const data = event.data.data;
|
|
|
|
// Envoyer l'événement enrichi à PostHog
|
|
posthog?.capture('simulateur_calculation', {
|
|
// Paramètres du formulaire
|
|
ccn_id: data.ccn_id,
|
|
ccn_nom: data.ccn_nom,
|
|
categorie: data.categorie,
|
|
statut: data.statut,
|
|
abattement_active: data.abattement_active,
|
|
abattement_profession: data.abattement_profession,
|
|
|
|
// Cachets, heures, dates
|
|
cachets: data.cachets,
|
|
heures: data.heures,
|
|
dates_travail: data.dates_travail,
|
|
nombre_jours: data.nombre_jours,
|
|
|
|
// Montant saisi et type
|
|
montant_saisi: data.montant_saisi,
|
|
type_calcul: data.type_calcul,
|
|
|
|
// Résultats calculés
|
|
resultat_brut: data.resultat_brut,
|
|
resultat_net: data.resultat_net,
|
|
resultat_cost: data.resultat_cost,
|
|
|
|
// Métadonnées
|
|
plafond_urssaf: data.plafond_urssaf,
|
|
timestamp: data.timestamp
|
|
});
|
|
|
|
console.log('📊 PostHog: Événement simulateur_calculation enrichi envoyé', {
|
|
categorie: data.categorie,
|
|
ccn: data.ccn_nom,
|
|
type_calcul: data.type_calcul,
|
|
montant_saisi: data.montant_saisi,
|
|
resultats: {
|
|
brut: data.resultat_brut,
|
|
net: data.resultat_net,
|
|
cost: data.resultat_cost
|
|
}
|
|
});
|
|
}
|
|
};
|
|
|
|
window.addEventListener('message', handleMessage);
|
|
|
|
return () => {
|
|
window.removeEventListener('message', handleMessage);
|
|
};
|
|
}, [posthog]);
|
|
|
|
return (
|
|
<div className="max-w-7xl mx-auto px-4">
|
|
<style jsx global>{`
|
|
.simulateur-iframe {
|
|
width: 100%;
|
|
min-height: 1100px;
|
|
border: none;
|
|
border-radius: 12px;
|
|
box-shadow: 0 1px 3px rgba(0,0,0,.06);
|
|
background: white;
|
|
}
|
|
`}</style>
|
|
|
|
{/* En-tête compact */}
|
|
<div className="mb-6">
|
|
<div className="flex items-center gap-3 mb-1">
|
|
<div className="w-10 h-10 rounded-xl bg-gradient-to-br from-indigo-500 to-purple-600 flex items-center justify-center shadow-md">
|
|
<Calculator className="w-5 h-5 text-white" />
|
|
</div>
|
|
<h1 className="text-2xl font-bold text-slate-900">Simulateur de paie intermittent</h1>
|
|
</div>
|
|
<p className="text-sm text-slate-600 ml-13">
|
|
Calculez le coût de recrutement d'un intermittent du spectacle (CDDU)
|
|
</p>
|
|
</div>
|
|
|
|
{/* Layout 2 colonnes : simulateur à gauche, cards info à droite */}
|
|
<div className="grid grid-cols-1 xl:grid-cols-[1fr_340px] gap-5">
|
|
|
|
{/* Colonne principale : Simulateur en iframe */}
|
|
<div className="order-2 xl:order-1">
|
|
<iframe
|
|
src="/simulateur-embed.html"
|
|
className="simulateur-iframe"
|
|
title="Simulateur de paie intermittent"
|
|
loading="lazy"
|
|
/>
|
|
</div>
|
|
|
|
{/* Colonne droite : Cards d'information compactes */}
|
|
<aside className="order-1 xl:order-2 space-y-4 xl:sticky xl:top-20 xl:self-start" aria-label="Aide et explications">
|
|
|
|
{/* Card : Mode d'emploi */}
|
|
<div className="bg-white rounded-xl shadow-sm border border-slate-200/80 p-5 hover:shadow-md transition-shadow">
|
|
<div className="flex items-center gap-2 mb-3">
|
|
<div className="w-8 h-8 bg-indigo-100 rounded-lg flex items-center justify-center flex-shrink-0">
|
|
<Info className="w-4 h-4 text-indigo-600" />
|
|
</div>
|
|
<h3 className="text-base font-semibold text-slate-900">Mode d'emploi</h3>
|
|
</div>
|
|
|
|
<ul className="space-y-2.5 text-sm text-slate-700">
|
|
<li className="flex items-start gap-2.5">
|
|
<span className="flex-shrink-0 w-5 h-5 bg-indigo-50 text-indigo-600 rounded-full flex items-center justify-center text-xs font-bold mt-0.5">1</span>
|
|
<span className="leading-snug">Choisissez la Convention Collective et le statut</span>
|
|
</li>
|
|
<li className="flex items-start gap-2.5">
|
|
<span className="flex-shrink-0 w-5 h-5 bg-indigo-50 text-indigo-600 rounded-full flex items-center justify-center text-xs font-bold mt-0.5">2</span>
|
|
<span className="leading-snug">Indiquez les cachets/heures et dates travaillées</span>
|
|
</li>
|
|
<li className="flex items-start gap-2.5">
|
|
<span className="flex-shrink-0 w-5 h-5 bg-indigo-50 text-indigo-600 rounded-full flex items-center justify-center text-xs font-bold mt-0.5">3</span>
|
|
<span className="leading-snug">Saisissez le montant (Brut, Net ou Coût employeur)</span>
|
|
</li>
|
|
<li className="flex items-start gap-2.5">
|
|
<span className="flex-shrink-0 w-5 h-5 bg-indigo-50 text-indigo-600 rounded-full flex items-center justify-center text-xs font-bold mt-0.5">4</span>
|
|
<span className="leading-snug">Consultez les résultats avec le détail des cotisations</span>
|
|
</li>
|
|
</ul>
|
|
|
|
<div className="mt-4 pt-4 border-t border-slate-100">
|
|
<p className="text-xs text-slate-500">
|
|
<span className="font-medium text-slate-700">Taux à jour 2025</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Card : Disclaimer compact */}
|
|
<div className="bg-gradient-to-br from-amber-50 to-orange-50 border border-amber-200/80 rounded-xl shadow-sm p-5">
|
|
<div className="flex items-start gap-2.5 mb-5">
|
|
<div className="flex-shrink-0 mt-0.5">
|
|
<AlertTriangle className="w-4 h-4 text-amber-600" />
|
|
</div>
|
|
<div className="flex-1">
|
|
<h3 className="text-sm font-semibold text-amber-900 mb-3">Limitations</h3>
|
|
<p className="text-xs text-amber-800 leading-relaxed mb-2">
|
|
Le simulateur ne prévoit pas certains cas particuliers
|
|
</p>
|
|
<ul className="text-xs text-amber-800 leading-relaxed space-y-1 ml-3">
|
|
<li className="flex items-start gap-1.5">
|
|
<span className="text-amber-600 mt-0.5">•</span>
|
|
<span>Mineurs de moins de 16 ans</span>
|
|
</li>
|
|
<li className="flex items-start gap-1.5">
|
|
<span className="text-amber-600 mt-0.5">•</span>
|
|
<span>Cumul annuel</span>
|
|
</li>
|
|
<li className="flex items-start gap-1.5">
|
|
<span className="text-amber-600 mt-0.5">•</span>
|
|
<span>Taxe sur les salaires</span>
|
|
</li>
|
|
<li className="flex items-start gap-1.5">
|
|
<span className="text-amber-600 mt-0.5">•</span>
|
|
<span>Taxe d'apprentissage</span>
|
|
</li>
|
|
<li className="flex items-start gap-1.5">
|
|
<span className="text-amber-600 mt-0.5">•</span>
|
|
<span>Non-résidents fiscaux</span>
|
|
</li>
|
|
<li className="flex items-start gap-1.5">
|
|
<span className="text-amber-600 mt-0.5">•</span>
|
|
<span>Contrats multi-mois</span>
|
|
</li>
|
|
<li className="flex items-start gap-1.5">
|
|
<span className="text-amber-600 mt-0.5">•</span>
|
|
<span>Plus de 2 cachets par jour</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-start gap-2.5">
|
|
<div className="flex-shrink-0 mt-0.5">
|
|
<Scale className="w-4 h-4 text-amber-600" />
|
|
</div>
|
|
<div className="flex-1">
|
|
<h3 className="text-sm font-semibold text-amber-900 mb-2">Mentions légales</h3>
|
|
<p className="text-xs text-amber-800 leading-relaxed">
|
|
<em>Sauf erreurs ou omissions.</em> Les résultats fournis par le simulateur peuvent être imprécis ou erronés.
|
|
Les informations communiquées par le simulateur n'engagent pas la responsabilité de Odentas Media SAS quant
|
|
à leur utilisation et/ou leur interprétation. Elles ne sont considérées par l'utilisateur que sous sa seule responsabilité.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</aside>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|