espace-paie-odentas/app/(app)/minima-ccn/ccnpa/categorie-a-data.tsx

615 lines
35 KiB
TypeScript

"use client";
import React from 'react';
import { Briefcase, ShoppingBag } from 'lucide-react';
const parseEuro = (str: string) => {
if (!str || str === '-') return null;
const cleaned = str.replace(/\s/g, '').replace('€', '').replace(',', '.');
return parseFloat(cleaned);
};
const euro = (n: number | null) => {
if (n === null) return '-';
return new Intl.NumberFormat('fr-FR', {
minimumFractionDigits: 2,
maximumFractionDigits: 2
}).format(n) + ' €';
};
export default function CategorieAContent() {
return (
<div className="space-y-6">
{/* En-tête */}
<div className="rounded-xl border bg-gradient-to-br from-blue-50 to-cyan-50 p-4">
<h2 className="text-lg font-semibold text-blue-900 mb-1">
Catégorie A - Personnel d'administration et commercial
</h2>
<p className="text-sm text-blue-700">
Minima conventionnels pour le personnel administratif et commercial de la production audiovisuelle
</p>
<p className="text-xs text-blue-600 mt-2">
Grille de salaires CCNPA (IDCC 2642) - Valeurs 2025
</p>
</div>
{/* Hors niveau */}
<div className="rounded-xl border bg-white p-5">
<h3 className="text-base font-bold text-slate-900 mb-4 flex items-center gap-2">
<span className="inline-block w-2 h-2 rounded-full bg-slate-500"></span>
<Briefcase className="w-5 h-5" />
Hors niveau
</h3>
<div className="overflow-x-auto">
<table className="w-full text-xs border-collapse">
<thead>
<tr className="bg-slate-50">
<th className="text-left p-3 text-slate-900 font-bold border border-slate-200">Emplois</th>
<th className="text-center p-3 text-slate-900 font-bold border border-slate-200 bg-slate-100">Salaire minimum</th>
</tr>
</thead>
<tbody>
<tr className="hover:bg-slate-50/30">
<td className="p-3 border border-slate-200">Producteur</td>
<td className="text-center p-3 font-semibold border border-slate-200">{euro(null)}</td>
</tr>
<tr className="hover:bg-slate-50/30">
<td className="p-3 border border-slate-200">Directeur général (non mandataire social)</td>
<td className="text-center p-3 font-semibold border border-slate-200">{euro(null)}</td>
</tr>
<tr className="hover:bg-slate-50/30">
<td className="p-3 border border-slate-200">Directeur général délégué (non mandataire social)</td>
<td className="text-center p-3 font-semibold border border-slate-200">{euro(null)}</td>
</tr>
</tbody>
</table>
</div>
</div>
{/* Niveau I - Administration */}
<div className="rounded-xl border bg-white p-5">
<h3 className="text-base font-bold text-blue-900 mb-4 flex items-center gap-2">
<span className="inline-block w-2 h-2 rounded-full bg-blue-500"></span>
<Briefcase className="w-5 h-5" />
Niveau I - Filière Administration
</h3>
<div className="overflow-x-auto">
<table className="w-full text-xs border-collapse">
<thead>
<tr className="bg-blue-50">
<th className="text-left p-3 text-blue-900 font-bold border border-blue-200">Emplois</th>
<th className="text-center p-3 text-blue-900 font-bold border border-blue-200 bg-blue-100">Salaire minimum CDI/CDD</th>
</tr>
</thead>
<tbody>
<tr className="hover:bg-blue-50/30">
<td className="p-3 border border-blue-200">Délégué Général</td>
<td className="text-center p-3 font-bold text-blue-900 border border-blue-200 bg-blue-50">{euro(parseEuro("3 314,29 €"))}</td>
</tr>
<tr className="hover:bg-blue-50/30">
<td className="p-3 border border-blue-200">Directeur général adjoint</td>
<td className="text-center p-3 font-bold text-blue-900 border border-blue-200 bg-blue-50">{euro(parseEuro("3 314,29 €"))}</td>
</tr>
<tr className="hover:bg-blue-50/30">
<td className="p-3 border border-blue-200">Directeur des productions</td>
<td className="text-center p-3 font-bold text-blue-900 border border-blue-200 bg-blue-50">{euro(parseEuro("3 314,29 €"))}</td>
</tr>
<tr className="hover:bg-blue-50/30">
<td className="p-3 border border-blue-200">Directeur des programmes</td>
<td className="text-center p-3 font-bold text-blue-900 border border-blue-200 bg-blue-50">{euro(parseEuro("3 314,29 €"))}</td>
</tr>
</tbody>
</table>
</div>
</div>
{/* Niveau II - Administration */}
<div className="rounded-xl border bg-white p-5">
<h3 className="text-base font-bold text-cyan-900 mb-4 flex items-center gap-2">
<span className="inline-block w-2 h-2 rounded-full bg-cyan-500"></span>
<Briefcase className="w-5 h-5" />
Niveau II - Filière Administration
</h3>
<div className="overflow-x-auto">
<table className="w-full text-xs border-collapse">
<thead>
<tr className="bg-cyan-50">
<th className="text-left p-3 text-cyan-900 font-bold border border-cyan-200">Emplois</th>
<th className="text-center p-3 text-cyan-900 font-bold border border-cyan-200 bg-cyan-100">Salaire minimum CDI/CDD</th>
</tr>
</thead>
<tbody>
<tr className="hover:bg-cyan-50/30">
<td className="p-3 border border-cyan-200">Directeur des jeux</td>
<td className="text-center p-3 font-bold text-cyan-900 border border-cyan-200 bg-cyan-50">{euro(parseEuro("3 162,15 €"))}</td>
</tr>
<tr className="hover:bg-cyan-50/30">
<td className="p-3 border border-cyan-200">Secrétaire général</td>
<td className="text-center p-3 font-bold text-cyan-900 border border-cyan-200 bg-cyan-50">{euro(parseEuro("3 013,00 €"))}</td>
</tr>
<tr className="hover:bg-cyan-50/30">
<td className="p-3 border border-cyan-200">Directeur administratif et financier</td>
<td className="text-center p-3 font-bold text-cyan-900 border border-cyan-200 bg-cyan-50">{euro(parseEuro("3 013,00 €"))}</td>
</tr>
<tr className="hover:bg-cyan-50/30">
<td className="p-3 border border-cyan-200">Directeur financier</td>
<td className="text-center p-3 font-bold text-cyan-900 border border-cyan-200 bg-cyan-50">{euro(parseEuro("2 892,47 €"))}</td>
</tr>
<tr className="hover:bg-cyan-50/30">
<td className="p-3 border border-cyan-200">Directeur juridique</td>
<td className="text-center p-3 font-bold text-cyan-900 border border-cyan-200 bg-cyan-50">{euro(parseEuro("2 892,47 €"))}</td>
</tr>
<tr className="hover:bg-cyan-50/30">
<td className="p-3 border border-cyan-200">Directeur technique</td>
<td className="text-center p-3 font-bold text-cyan-900 border border-cyan-200 bg-cyan-50">{euro(parseEuro("2 892,47 €"))}</td>
</tr>
<tr className="hover:bg-cyan-50/30">
<td className="p-3 border border-cyan-200">Directeur des ressources humaines</td>
<td className="text-center p-3 font-bold text-cyan-900 border border-cyan-200 bg-cyan-50">{euro(parseEuro("2 892,47 €"))}</td>
</tr>
<tr className="hover:bg-cyan-50/30">
<td className="p-3 border border-cyan-200">Directeur littéraire</td>
<td className="text-center p-3 font-bold text-cyan-900 border border-cyan-200 bg-cyan-50">{euro(parseEuro("2 892,47 €"))}</td>
</tr>
<tr className="hover:bg-cyan-50/30">
<td className="p-3 border border-cyan-200">Directeur du développement</td>
<td className="text-center p-3 font-bold text-cyan-900 border border-cyan-200 bg-cyan-50">{euro(parseEuro("2 892,47 €"))}</td>
</tr>
<tr className="hover:bg-cyan-50/30">
<td className="p-3 border border-cyan-200">Directeur informatique</td>
<td className="text-center p-3 font-bold text-cyan-900 border border-cyan-200 bg-cyan-50">{euro(parseEuro("2 892,47 €"))}</td>
</tr>
<tr className="hover:bg-cyan-50/30">
<td className="p-3 border border-cyan-200">Directeur de la Comptabilité</td>
<td className="text-center p-3 font-bold text-cyan-900 border border-cyan-200 bg-cyan-50">{euro(parseEuro("2 892,47 €"))}</td>
</tr>
<tr className="hover:bg-cyan-50/30">
<td className="p-3 border border-cyan-200">Directeur de la communication</td>
<td className="text-center p-3 font-bold text-cyan-900 border border-cyan-200 bg-cyan-50">{euro(parseEuro("2 892,47 €"))}</td>
</tr>
</tbody>
</table>
</div>
</div>
{/* Niveau II - Commercial et édition */}
<div className="rounded-xl border bg-white p-5">
<h3 className="text-base font-bold text-emerald-900 mb-4 flex items-center gap-2">
<span className="inline-block w-2 h-2 rounded-full bg-emerald-500"></span>
<ShoppingBag className="w-5 h-5" />
Niveau II - Filière Commercial et édition
</h3>
<div className="overflow-x-auto">
<table className="w-full text-xs border-collapse">
<thead>
<tr className="bg-emerald-50">
<th className="text-left p-3 text-emerald-900 font-bold border border-emerald-200">Emplois</th>
<th className="text-center p-3 text-emerald-900 font-bold border border-emerald-200 bg-emerald-100">Salaire minimum CDI/CDD</th>
</tr>
</thead>
<tbody>
<tr className="hover:bg-emerald-50/30">
<td className="p-3 border border-emerald-200">Directeur du Pôle Edition - Distribution</td>
<td className="text-center p-3 font-bold text-emerald-900 border border-emerald-200 bg-emerald-50">{euro(parseEuro("2 892,47 €"))}</td>
</tr>
<tr className="hover:bg-emerald-50/30">
<td className="p-3 border border-emerald-200">Directeur multimedia</td>
<td className="text-center p-3 font-bold text-emerald-900 border border-emerald-200 bg-emerald-50">{euro(parseEuro("2 892,47 €"))}</td>
</tr>
<tr className="hover:bg-emerald-50/30">
<td className="p-3 border border-emerald-200">Directeur produits dérivés</td>
<td className="text-center p-3 font-bold text-emerald-900 border border-emerald-200 bg-emerald-50">{euro(parseEuro("2 892,47 €"))}</td>
</tr>
<tr className="hover:bg-emerald-50/30">
<td className="p-3 border border-emerald-200">Directeur commercial</td>
<td className="text-center p-3 font-bold text-emerald-900 border border-emerald-200 bg-emerald-50">{euro(parseEuro("2 651,44 €"))}</td>
</tr>
</tbody>
</table>
</div>
</div>
{/* Niveau IIIA - Administration */}
<div className="rounded-xl border bg-white p-5">
<h3 className="text-base font-bold text-sky-900 mb-4 flex items-center gap-2">
<span className="inline-block w-2 h-2 rounded-full bg-sky-500"></span>
<Briefcase className="w-5 h-5" />
Niveau IIIA - Filière Administration
</h3>
<div className="overflow-x-auto">
<table className="w-full text-xs border-collapse">
<thead>
<tr className="bg-sky-50">
<th className="text-left p-3 text-sky-900 font-bold border border-sky-200">Emplois</th>
<th className="text-center p-3 text-sky-900 font-bold border border-sky-200 bg-sky-100">Salaire minimum CDI/CDD</th>
</tr>
</thead>
<tbody>
<tr className="hover:bg-sky-50/30">
<td className="p-3 border border-sky-200">Responsable administratif et financier</td>
<td className="text-center p-3 font-bold text-sky-900 border border-sky-200 bg-sky-50">{euro(parseEuro("2 651,44 €"))}</td>
</tr>
<tr className="hover:bg-sky-50/30">
<td className="p-3 border border-sky-200">Chef comptable</td>
<td className="text-center p-3 font-bold text-sky-900 border border-sky-200 bg-sky-50">{euro(parseEuro("2 530,92 €"))}</td>
</tr>
<tr className="hover:bg-sky-50/30">
<td className="p-3 border border-sky-200">Responsable des ressources humaines</td>
<td className="text-center p-3 font-bold text-sky-900 border border-sky-200 bg-sky-50">{euro(parseEuro("2 530,92 €"))}</td>
</tr>
<tr className="hover:bg-sky-50/30">
<td className="p-3 border border-sky-200">Responsable du développement</td>
<td className="text-center p-3 font-bold text-sky-900 border border-sky-200 bg-sky-50">{euro(parseEuro("2 530,92 €"))}</td>
</tr>
<tr className="hover:bg-sky-50/30">
<td className="p-3 border border-sky-200">Responsable informatique</td>
<td className="text-center p-3 font-bold text-sky-900 border border-sky-200 bg-sky-50">{euro(parseEuro("2 530,92 €"))}</td>
</tr>
<tr className="hover:bg-sky-50/30">
<td className="p-3 border border-sky-200">Responsable juridique</td>
<td className="text-center p-3 font-bold text-sky-900 border border-sky-200 bg-sky-50">{euro(parseEuro("2 530,92 €"))}</td>
</tr>
<tr className="hover:bg-sky-50/30">
<td className="p-3 border border-sky-200">Contrôleur de gestion</td>
<td className="text-center p-3 font-bold text-sky-900 border border-sky-200 bg-sky-50">{euro(parseEuro("2 410,40 €"))}</td>
</tr>
<tr className="hover:bg-sky-50/30">
<td className="p-3 border border-sky-200">Responsable de la trésorerie</td>
<td className="text-center p-3 font-bold text-sky-900 border border-sky-200 bg-sky-50">{euro(parseEuro("2 410,40 €"))}</td>
</tr>
<tr className="hover:bg-sky-50/30">
<td className="p-3 border border-sky-200">Responsable de la communication</td>
<td className="text-center p-3 font-bold text-sky-900 border border-sky-200 bg-sky-50">{euro(parseEuro("2 410,40 €"))}</td>
</tr>
<tr className="hover:bg-sky-50/30">
<td className="p-3 border border-sky-200">Responsable de la paie</td>
<td className="text-center p-3 font-bold text-sky-900 border border-sky-200 bg-sky-50">{euro(parseEuro("2 339,74 €"))}</td>
</tr>
<tr className="hover:bg-sky-50/30">
<td className="p-3 border border-sky-200">Responsable technique</td>
<td className="text-center p-3 font-bold text-sky-900 border border-sky-200 bg-sky-50">{euro(parseEuro("2 289,87 €"))}</td>
</tr>
<tr className="hover:bg-sky-50/30">
<td className="p-3 border border-sky-200">Responsable des services généraux</td>
<td className="text-center p-3 font-bold text-sky-900 border border-sky-200 bg-sky-50">{euro(parseEuro("2 289,87 €"))}</td>
</tr>
<tr className="hover:bg-sky-50/30">
<td className="p-3 border border-sky-200">Chargé de mission</td>
<td className="text-center p-3 font-bold text-sky-900 border border-sky-200 bg-sky-50">{euro(parseEuro("2 289,87 €"))}</td>
</tr>
<tr className="hover:bg-sky-50/30">
<td className="p-3 border border-sky-200">Attaché de direction</td>
<td className="text-center p-3 font-bold text-sky-900 border border-sky-200 bg-sky-50">{euro(parseEuro("2 171,66 €"))}</td>
</tr>
</tbody>
</table>
</div>
</div>
{/* Niveau IIIA - Commercial et édition */}
<div className="rounded-xl border bg-white p-5">
<h3 className="text-base font-bold text-teal-900 mb-4 flex items-center gap-2">
<span className="inline-block w-2 h-2 rounded-full bg-teal-500"></span>
<ShoppingBag className="w-5 h-5" />
Niveau IIIA - Filière Commercial et édition
</h3>
<div className="overflow-x-auto">
<table className="w-full text-xs border-collapse">
<thead>
<tr className="bg-teal-50">
<th className="text-left p-3 text-teal-900 font-bold border border-teal-200">Emplois</th>
<th className="text-center p-3 text-teal-900 font-bold border border-teal-200 bg-teal-100">Salaire minimum CDI/CDD</th>
</tr>
</thead>
<tbody>
<tr className="hover:bg-teal-50/30">
<td className="p-3 border border-teal-200">Responsable des sites web/multimedia</td>
<td className="text-center p-3 font-bold text-teal-900 border border-teal-200 bg-teal-50">{euro(parseEuro("2 410,40 €"))}</td>
</tr>
<tr className="hover:bg-teal-50/30">
<td className="p-3 border border-teal-200">Responsable des ventes</td>
<td className="text-center p-3 font-bold text-teal-900 border border-teal-200 bg-teal-50">{euro(parseEuro("2 289,87 €"))}</td>
</tr>
<tr className="hover:bg-teal-50/30">
<td className="p-3 border border-teal-200">Responsable des produits dérivés</td>
<td className="text-center p-3 font-bold text-teal-900 border border-teal-200 bg-teal-50">{euro(parseEuro("2 289,87 €"))}</td>
</tr>
<tr className="hover:bg-teal-50/30">
<td className="p-3 border border-teal-200">Responsable acquisitions</td>
<td className="text-center p-3 font-bold text-teal-900 border border-teal-200 bg-teal-50">{euro(parseEuro("2 289,87 €"))}</td>
</tr>
</tbody>
</table>
</div>
</div>
{/* Niveau IIIB - Administration */}
<div className="rounded-xl border bg-white p-5">
<h3 className="text-base font-bold text-indigo-900 mb-4 flex items-center gap-2">
<span className="inline-block w-2 h-2 rounded-full bg-indigo-500"></span>
<Briefcase className="w-5 h-5" />
Niveau IIIB - Filière Administration
</h3>
<div className="overflow-x-auto">
<table className="w-full text-xs border-collapse">
<thead>
<tr className="bg-indigo-50">
<th className="text-left p-3 text-indigo-900 font-bold border border-indigo-200">Emplois</th>
<th className="text-center p-3 text-indigo-900 font-bold border border-indigo-200 bg-indigo-100">Salaire minimum CDI/CDD</th>
</tr>
</thead>
<tbody>
<tr className="hover:bg-indigo-50/30">
<td className="p-3 border border-indigo-200">Responsable de la comptabilité</td>
<td className="text-center p-3 font-bold text-indigo-900 border border-indigo-200 bg-indigo-50">{euro(parseEuro("2 169,36 €"))}</td>
</tr>
<tr className="hover:bg-indigo-50/30">
<td className="p-3 border border-indigo-200">Responsable de l'administration du personnel</td>
<td className="text-center p-3 font-bold text-indigo-900 border border-indigo-200 bg-indigo-50">{euro(parseEuro("2 169,36 €"))}</td>
</tr>
<tr className="hover:bg-indigo-50/30">
<td className="p-3 border border-indigo-200">Attaché de presse</td>
<td className="text-center p-3 font-bold text-indigo-900 border border-indigo-200 bg-indigo-50">{euro(parseEuro("2 048,84 €"))}</td>
</tr>
<tr className="hover:bg-indigo-50/30">
<td className="p-3 border border-indigo-200">Collaborateur juridique</td>
<td className="text-center p-3 font-bold text-indigo-900 border border-indigo-200 bg-indigo-50">{euro(parseEuro("2 048,84 €"))}</td>
</tr>
<tr className="hover:bg-indigo-50/30">
<td className="p-3 border border-indigo-200">Contrôleur de gestion junior</td>
<td className="text-center p-3 font-bold text-indigo-900 border border-indigo-200 bg-indigo-50">{euro(parseEuro("2 048,84 €"))}</td>
</tr>
<tr className="hover:bg-indigo-50/30">
<td className="p-3 border border-indigo-200">Informaticien</td>
<td className="text-center p-3 font-bold text-indigo-900 border border-indigo-200 bg-indigo-50">{euro(parseEuro("2 048,84 €"))}</td>
</tr>
<tr className="hover:bg-indigo-50/30">
<td className="p-3 border border-indigo-200">Responsable d'exploitation</td>
<td className="text-center p-3 font-bold text-indigo-900 border border-indigo-200 bg-indigo-50">{euro(parseEuro("2 048,84 €"))}</td>
</tr>
<tr className="hover:bg-indigo-50/30">
<td className="p-3 border border-indigo-200">Chargé d'étude</td>
<td className="text-center p-3 font-bold text-indigo-900 border border-indigo-200 bg-indigo-50">{euro(parseEuro("2 028,56 €"))}</td>
</tr>
</tbody>
</table>
</div>
</div>
{/* Niveau IIIB - Commercial et édition */}
<div className="rounded-xl border bg-white p-5">
<h3 className="text-base font-bold text-violet-900 mb-4 flex items-center gap-2">
<span className="inline-block w-2 h-2 rounded-full bg-violet-500"></span>
<ShoppingBag className="w-5 h-5" />
Niveau IIIB - Filière Commercial et édition
</h3>
<div className="overflow-x-auto">
<table className="w-full text-xs border-collapse">
<thead>
<tr className="bg-violet-50">
<th className="text-left p-3 text-violet-900 font-bold border border-violet-200">Emplois</th>
<th className="text-center p-3 text-violet-900 font-bold border border-violet-200 bg-violet-100">Salaire minimum CDI/CDD</th>
</tr>
</thead>
<tbody>
<tr className="hover:bg-violet-50/30">
<td className="p-3 border border-violet-200">Responsable des supports</td>
<td className="text-center p-3 font-bold text-violet-900 border border-violet-200 bg-violet-50">{euro(parseEuro("2 048,84 €"))}</td>
</tr>
</tbody>
</table>
</div>
</div>
{/* Niveau IV - Administration */}
<div className="rounded-xl border bg-white p-5">
<h3 className="text-base font-bold text-purple-900 mb-4 flex items-center gap-2">
<span className="inline-block w-2 h-2 rounded-full bg-purple-500"></span>
<Briefcase className="w-5 h-5" />
Niveau IV - Filière Administration
</h3>
<div className="overflow-x-auto">
<table className="w-full text-xs border-collapse">
<thead>
<tr className="bg-purple-50">
<th className="text-left p-3 text-purple-900 font-bold border border-purple-200">Emplois</th>
<th className="text-center p-3 text-purple-900 font-bold border border-purple-200 bg-purple-100">Salaire minimum CDI/CDD</th>
</tr>
</thead>
<tbody>
<tr className="hover:bg-purple-50/30">
<td className="p-3 border border-purple-200">Comptable</td>
<td className="text-center p-3 font-bold text-purple-900 border border-purple-200 bg-purple-50">{euro(parseEuro("1 988,58 €"))}</td>
</tr>
<tr className="hover:bg-purple-50/30">
<td className="p-3 border border-purple-200">Gestionnaire paie</td>
<td className="text-center p-3 font-bold text-purple-900 border border-purple-200 bg-purple-50">{euro(parseEuro("1 988,58 €"))}</td>
</tr>
<tr className="hover:bg-purple-50/30">
<td className="p-3 border border-purple-200">Webmestre</td>
<td className="text-center p-3 font-bold text-purple-900 border border-purple-200 bg-purple-50">{euro(parseEuro("1 928,32 €"))}</td>
</tr>
<tr className="hover:bg-purple-50/30">
<td className="p-3 border border-purple-200">Chargé des services généraux</td>
<td className="text-center p-3 font-bold text-purple-900 border border-purple-200 bg-purple-50">{euro(parseEuro("1 828,83 €"))}</td>
</tr>
<tr className="hover:bg-purple-50/30">
<td className="p-3 border border-purple-200">Assistant de direction</td>
<td className="text-center p-3 font-bold text-purple-900 border border-purple-200 bg-purple-50">{euro(parseEuro("1 828,83 €"))}</td>
</tr>
<tr className="hover:bg-purple-50/30">
<td className="p-3 border border-purple-200">Assistant juridique</td>
<td className="text-center p-3 font-bold text-purple-900 border border-purple-200 bg-purple-50">{euro(parseEuro("1 828,83 €"))}</td>
</tr>
</tbody>
</table>
</div>
</div>
{/* Niveau IV - Commercial et édition */}
<div className="rounded-xl border bg-white p-5">
<h3 className="text-base font-bold text-fuchsia-900 mb-4 flex items-center gap-2">
<span className="inline-block w-2 h-2 rounded-full bg-fuchsia-500"></span>
<ShoppingBag className="w-5 h-5" />
Niveau IV - Filière Commercial et édition
</h3>
<div className="overflow-x-auto">
<table className="w-full text-xs border-collapse">
<thead>
<tr className="bg-fuchsia-50">
<th className="text-left p-3 text-fuchsia-900 font-bold border border-fuchsia-200">Emplois</th>
<th className="text-center p-3 text-fuchsia-900 font-bold border border-fuchsia-200 bg-fuchsia-100">Salaire minimum CDI/CDD</th>
</tr>
</thead>
<tbody>
<tr className="hover:bg-fuchsia-50/30">
<td className="p-3 border border-fuchsia-200">Gestionnaire des supports</td>
<td className="text-center p-3 font-bold text-fuchsia-900 border border-fuchsia-200 bg-fuchsia-50">{euro(parseEuro("1 909,23 €"))}</td>
</tr>
<tr className="hover:bg-fuchsia-50/30">
<td className="p-3 border border-fuchsia-200">Vendeur</td>
<td className="text-center p-3 font-bold text-fuchsia-900 border border-fuchsia-200 bg-fuchsia-50">{euro(parseEuro("1 828,83 €"))}</td>
</tr>
</tbody>
</table>
</div>
</div>
{/* Niveau V - Administration */}
<div className="rounded-xl border bg-white p-5">
<h3 className="text-base font-bold text-pink-900 mb-4 flex items-center gap-2">
<span className="inline-block w-2 h-2 rounded-full bg-pink-500"></span>
<Briefcase className="w-5 h-5" />
Niveau V - Filière Administration
</h3>
<div className="overflow-x-auto">
<table className="w-full text-xs border-collapse">
<thead>
<tr className="bg-pink-50">
<th className="text-left p-3 text-pink-900 font-bold border border-pink-200">Emplois</th>
<th className="text-center p-3 text-pink-900 font-bold border border-pink-200 bg-pink-100">Salaire minimum CDI/CDD</th>
</tr>
</thead>
<tbody>
<tr className="hover:bg-pink-50/30">
<td className="p-3 border border-pink-200">Secrétaire - assistant</td>
<td className="text-center p-3 font-bold text-pink-900 border border-pink-200 bg-pink-50">{euro(parseEuro("1 828,83 €"))}</td>
</tr>
<tr className="hover:bg-pink-50/30">
<td className="p-3 border border-pink-200">Secrétaire - standardiste</td>
<td className="text-center p-3 font-bold text-pink-900 border border-pink-200 bg-pink-50">{euro(parseEuro("1 828,83 €"))}</td>
</tr>
<tr className="hover:bg-pink-50/30">
<td className="p-3 border border-pink-200">Responsable d'entretien</td>
<td className="text-center p-3 font-bold text-pink-900 border border-pink-200 bg-pink-50">{euro(parseEuro("1 828,83 €"))}</td>
</tr>
<tr className="hover:bg-pink-50/30">
<td className="p-3 border border-pink-200">Assistant paye</td>
<td className="text-center p-3 font-bold text-pink-900 border border-pink-200 bg-pink-50">{euro(parseEuro("1 828,83 €"))}</td>
</tr>
<tr className="hover:bg-pink-50/30">
<td className="p-3 border border-pink-200">Assistant comptable</td>
<td className="text-center p-3 font-bold text-pink-900 border border-pink-200 bg-pink-50">{euro(parseEuro("1 828,83 €"))}</td>
</tr>
<tr className="hover:bg-pink-50/30">
<td className="p-3 border border-pink-200">Assistant de la communication</td>
<td className="text-center p-3 font-bold text-pink-900 border border-pink-200 bg-pink-50">{euro(parseEuro("1 828,83 €"))}</td>
</tr>
<tr className="hover:bg-pink-50/30">
<td className="p-3 border border-pink-200">Agent des services généraux</td>
<td className="text-center p-3 font-bold text-pink-900 border border-pink-200 bg-pink-50">{euro(parseEuro("1 828,83 €"))}</td>
</tr>
</tbody>
</table>
</div>
</div>
{/* Niveau V - Commercial et édition */}
<div className="rounded-xl border bg-white p-5">
<h3 className="text-base font-bold text-rose-900 mb-4 flex items-center gap-2">
<span className="inline-block w-2 h-2 rounded-full bg-rose-500"></span>
<ShoppingBag className="w-5 h-5" />
Niveau V - Filière Commercial et édition
</h3>
<div className="overflow-x-auto">
<table className="w-full text-xs border-collapse">
<thead>
<tr className="bg-rose-50">
<th className="text-left p-3 text-rose-900 font-bold border border-rose-200">Emplois</th>
<th className="text-center p-3 text-rose-900 font-bold border border-rose-200 bg-rose-100">Salaire minimum CDI/CDD</th>
</tr>
</thead>
<tbody>
<tr className="hover:bg-rose-50/30">
<td className="p-3 border border-rose-200">Assistant web / téléphonie / multimedia</td>
<td className="text-center p-3 font-bold text-rose-900 border border-rose-200 bg-rose-50">{euro(parseEuro("1 828,83 €"))}</td>
</tr>
<tr className="hover:bg-rose-50/30">
<td className="p-3 border border-rose-200">Assistant commercial</td>
<td className="text-center p-3 font-bold text-rose-900 border border-rose-200 bg-rose-50">{euro(parseEuro("1 828,83 €"))}</td>
</tr>
</tbody>
</table>
</div>
</div>
{/* Niveau VI - Administration */}
<div className="rounded-xl border bg-white p-5">
<h3 className="text-base font-bold text-red-900 mb-4 flex items-center gap-2">
<span className="inline-block w-2 h-2 rounded-full bg-red-500"></span>
<Briefcase className="w-5 h-5" />
Niveau VI - Filière Administration
</h3>
<div className="overflow-x-auto">
<table className="w-full text-xs border-collapse">
<thead>
<tr className="bg-red-50">
<th className="text-left p-3 text-red-900 font-bold border border-red-200">Emplois</th>
<th className="text-center p-3 text-red-900 font-bold border border-red-200 bg-red-100">Salaire minimum CDI/CDD</th>
</tr>
</thead>
<tbody>
<tr className="hover:bg-red-50/30">
<td className="p-3 border border-red-200">Hôtesse - standardiste</td>
<td className="text-center p-3 font-bold text-red-900 border border-red-200 bg-red-50">{euro(parseEuro("1 828,83 €"))}</td>
</tr>
<tr className="hover:bg-red-50/30">
<td className="p-3 border border-red-200">Chauffeur d'entreprise</td>
<td className="text-center p-3 font-bold text-red-900 border border-red-200 bg-red-50">{euro(parseEuro("1 828,83 €"))}</td>
</tr>
<tr className="hover:bg-red-50/30">
<td className="p-3 border border-red-200">Agent d'exploitation</td>
<td className="text-center p-3 font-bold text-red-900 border border-red-200 bg-red-50">{euro(parseEuro("1 828,83 €"))}</td>
</tr>
<tr className="hover:bg-red-50/30">
<td className="p-3 border border-red-200">Coursier</td>
<td className="text-center p-3 font-bold text-red-900 border border-red-200 bg-red-50">{euro(parseEuro("1 828,83 €"))}</td>
</tr>
<tr className="hover:bg-red-50/30">
<td className="p-3 border border-red-200">Gardien</td>
<td className="text-center p-3 font-bold text-red-900 border border-red-200 bg-red-50">{euro(parseEuro("1 828,83 €"))}</td>
</tr>
<tr className="hover:bg-red-50/30">
<td className="p-3 border border-red-200">Agent d'entretien</td>
<td className="text-center p-3 font-bold text-red-900 border border-red-200 bg-red-50">{euro(parseEuro("1 828,83 €"))}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
);
}