espace-paie-odentas/app/(app)/minima-ccn/ccnpa/categorie-b-fiction-data-part3.tsx

603 lines
18 KiB
TypeScript

"use client";
import React, { useState, useMemo } from 'react';
import { Clapperboard, Volume2, Globe, Search, ChevronDown, ChevronUp } 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) + ' €';
};
interface Emploi {
nom: string;
filiere: string;
niveau: string;
cddu: {
semaine35h: number | null;
semaine39h: number | null;
jour7h: number | null;
jour8h: number | null;
mois35h: number | null;
mois39h: number | null;
};
cdi: number | null;
}
const emploisData: Emploi[] = [
// Filière G - Réalisation
{
nom: "1er assistant réalisateur",
filiere: "G",
niveau: "II",
cddu: {
semaine35h: parseEuro("962,49 €"),
semaine39h: parseEuro("1 099,99 €"),
jour7h: parseEuro("213,89 €"),
jour8h: parseEuro("244,44 €"),
mois35h: parseEuro("3 657,48 €"),
mois39h: parseEuro("4 179,96 €"),
},
cdi: parseEuro("2 892,47 €"),
},
{
nom: "2ème assistant réalisateur",
filiere: "G",
niveau: "IV",
cddu: {
semaine35h: parseEuro("804,93 €"),
semaine39h: parseEuro("919,92 €"),
jour7h: parseEuro("178,87 €"),
jour8h: parseEuro("204,43 €"),
mois35h: parseEuro("3 058,73 €"),
mois39h: parseEuro("3 495,68 €"),
},
cdi: parseEuro("1 988,58 €"),
},
{
nom: "Assistant réalisateur adjoint",
filiere: "G",
niveau: "VI",
cddu: {
semaine35h: parseEuro("463,28 €"),
semaine39h: parseEuro("529,47 €"),
jour7h: parseEuro("102,95 €"),
jour8h: parseEuro("117,66 €"),
mois35h: parseEuro("2 342,34 €"),
mois39h: parseEuro("2 676,95 €"),
},
cdi: parseEuro("1 828,83 €"),
},
{
nom: "Assistant scripte adjoint",
filiere: "G",
niveau: "VI",
cddu: {
semaine35h: parseEuro("463,28 €"),
semaine39h: parseEuro("529,47 €"),
jour7h: parseEuro("102,95 €"),
jour8h: parseEuro("117,66 €"),
mois35h: parseEuro("2 342,34 €"),
mois39h: parseEuro("2 676,95 €"),
},
cdi: parseEuro("1 828,83 €"),
},
{
nom: "Conseiller technique à la réalisation",
filiere: "G",
niveau: "II",
cddu: {
semaine35h: parseEuro("1 051,06 €"),
semaine39h: parseEuro("1 201,21 €"),
jour7h: parseEuro("233,57 €"),
jour8h: parseEuro("266,94 €"),
mois35h: parseEuro("3 994,02 €"),
mois39h: parseEuro("4 564,58 €"),
},
cdi: parseEuro("3 013,00 €"),
},
{
nom: "Répétiteur",
filiere: "G",
niveau: "IIIB",
cddu: {
semaine35h: parseEuro("746,08 €"),
semaine39h: parseEuro("852,66 €"),
jour7h: parseEuro("165,80 €"),
jour8h: parseEuro("189,48 €"),
mois35h: parseEuro("2 835,09 €"),
mois39h: parseEuro("3 240,10 €"),
},
cdi: parseEuro("2 048,84 €"),
},
{
nom: "Scripte",
filiere: "G",
niveau: "IIIA",
cddu: {
semaine35h: parseEuro("962,49 €"),
semaine39h: parseEuro("1 099,99 €"),
jour7h: parseEuro("213,89 €"),
jour8h: parseEuro("244,44 €"),
mois35h: parseEuro("3 657,48 €"),
mois39h: parseEuro("4 179,96 €"),
},
cdi: parseEuro("2 651,44 €"),
},
{
nom: "Storyboarder",
filiere: "G",
niveau: "IIIB",
cddu: {
semaine35h: parseEuro("894,37 €"),
semaine39h: parseEuro("1 022,14 €"),
jour7h: parseEuro("198,75 €"),
jour8h: parseEuro("227,14 €"),
mois35h: parseEuro("3 398,61 €"),
mois39h: parseEuro("3 884,11 €"),
},
cdi: parseEuro("2 169,36 €"),
},
// Filière H - Son
{
nom: "Assistant son",
filiere: "H",
niveau: "IV",
cddu: {
semaine35h: parseEuro("714,32 €"),
semaine39h: parseEuro("816,36 €"),
jour7h: parseEuro("158,74 €"),
jour8h: parseEuro("181,41 €"),
mois35h: parseEuro("2 714,40 €"),
mois39h: parseEuro("3 102,16 €"),
},
cdi: parseEuro("1 928,32 €"),
},
{
nom: "Assistant son adjoint",
filiere: "H",
niveau: "VI",
cddu: {
semaine35h: parseEuro("463,28 €"),
semaine39h: parseEuro("529,47 €"),
jour7h: parseEuro("102,95 €"),
jour8h: parseEuro("117,66 €"),
mois35h: parseEuro("2 342,34 €"),
mois39h: parseEuro("2 676,95 €"),
},
cdi: parseEuro("1 828,83 €"),
},
{
nom: "Bruiteur",
filiere: "H",
niveau: "IIIA",
cddu: {
semaine35h: parseEuro("1 051,06 €"),
semaine39h: parseEuro("1 201,21 €"),
jour7h: parseEuro("233,57 €"),
jour8h: parseEuro("266,94 €"),
mois35h: parseEuro("3 994,02 €"),
mois39h: parseEuro("4 564,58 €"),
},
cdi: parseEuro("2 530,92 €"),
},
{
nom: "Chef OPS / Ingénieur du son",
filiere: "H",
niveau: "IIIA",
cddu: {
semaine35h: parseEuro("1 212,78 €"),
semaine39h: parseEuro("1 386,03 €"),
jour7h: parseEuro("269,51 €"),
jour8h: parseEuro("308,01 €"),
mois35h: parseEuro("4 608,56 €"),
mois39h: parseEuro("5 266,91 €"),
},
cdi: parseEuro("2 651,44 €"),
},
{
nom: "Perchiste / 1er assistant son",
filiere: "H",
niveau: "IIIA",
cddu: {
semaine35h: parseEuro("882,10 €"),
semaine39h: parseEuro("1 008,12 €"),
jour7h: parseEuro("196,02 €"),
jour8h: parseEuro("224,03 €"),
mois35h: parseEuro("3 351,98 €"),
mois39h: parseEuro("3 830,83 €"),
},
cdi: parseEuro("2 410,40 €"),
},
// Filière I - Web
{
nom: "Assistant technique web",
filiere: "I",
niveau: "VI",
cddu: {
semaine35h: parseEuro("463,28 €"),
semaine39h: parseEuro("529,47 €"),
jour7h: parseEuro("102,95 €"),
jour8h: parseEuro("117,66 €"),
mois35h: parseEuro("2 006,02 €"),
mois39h: parseEuro("2 292,59 €"),
},
cdi: parseEuro("1 828,83 €"),
},
{
nom: "Concepteur de programme web",
filiere: "I",
niveau: "I",
cddu: {
semaine35h: parseEuro("785,78 €"),
semaine39h: parseEuro("898,03 €"),
jour7h: parseEuro("174,62 €"),
jour8h: parseEuro("199,56 €"),
mois35h: parseEuro("3 402,43 €"),
mois39h: parseEuro("3 888,47 €"),
},
cdi: parseEuro("2 969,12 €"),
},
{
nom: "Coordinateur de diffusion web",
filiere: "I",
niveau: "IIIB",
cddu: {
semaine35h: parseEuro("519,92 €"),
semaine39h: parseEuro("594,19 €"),
jour7h: parseEuro("115,54 €"),
jour8h: parseEuro("132,04 €"),
mois35h: parseEuro("2 251,23 €"),
mois39h: parseEuro("2 572,83 €"),
},
cdi: parseEuro("1 959,62 €"),
},
{
nom: "Coordinateur de production web",
filiere: "I",
niveau: "II",
cddu: {
semaine35h: parseEuro("590,82 €"),
semaine39h: parseEuro("675,22 €"),
jour7h: parseEuro("131,29 €"),
jour8h: parseEuro("150,05 €"),
mois35h: parseEuro("2 558,24 €"),
mois39h: parseEuro("2 923,70 €"),
},
cdi: parseEuro("2 197,15 €"),
},
{
nom: "Designer web",
filiere: "I",
niveau: "IIIA",
cddu: {
semaine35h: parseEuro("543,55 €"),
semaine39h: parseEuro("621,20 €"),
jour7h: parseEuro("120,79 €"),
jour8h: parseEuro("138,05 €"),
mois35h: parseEuro("2 353,59 €"),
mois39h: parseEuro("2 689,80 €"),
},
cdi: parseEuro("2 019,01 €"),
},
{
nom: "Editeur artistique web",
filiere: "I",
niveau: "IV",
cddu: {
semaine35h: parseEuro("502,19 €"),
semaine39h: parseEuro("573,93 €"),
jour7h: parseEuro("111,60 €"),
jour8h: parseEuro("127,54 €"),
mois35h: parseEuro("2 174,48 €"),
mois39h: parseEuro("2 485,11 €"),
},
cdi: parseEuro("1 900,24 €"),
},
{
nom: "Gestionnaire de diffusion internet (traffic manager)",
filiere: "I",
niveau: "V",
cddu: {
semaine35h: parseEuro("463,28 €"),
semaine39h: parseEuro("529,47 €"),
jour7h: parseEuro("102,95 €"),
jour8h: parseEuro("117,66 €"),
mois35h: parseEuro("2 006,02 €"),
mois39h: parseEuro("2 292,59 €"),
},
cdi: parseEuro("1 828,83 €"),
},
{
nom: "Opérateur web / Opérateur multicam web",
filiere: "I",
niveau: "IIIA",
cddu: {
semaine35h: parseEuro("567,18 €"),
semaine39h: parseEuro("648,21 €"),
jour7h: parseEuro("126,04 €"),
jour8h: parseEuro("144,05 €"),
mois35h: parseEuro("2 455,89 €"),
mois39h: parseEuro("2 806,72 €"),
},
cdi: parseEuro("2 137,77 €"),
},
{
nom: "Technicien de développement web",
filiere: "I",
niveau: "IIIB",
cddu: {
semaine35h: parseEuro("519,92 €"),
semaine39h: parseEuro("594,19 €"),
jour7h: parseEuro("115,54 €"),
jour8h: parseEuro("132,04 €"),
mois35h: parseEuro("2 251,23 €"),
mois39h: parseEuro("2 572,83 €"),
},
cdi: parseEuro("1 959,62 €"),
},
{
nom: "Technicien vidéo web",
filiere: "I",
niveau: "V",
cddu: {
semaine35h: parseEuro("463,28 €"),
semaine39h: parseEuro("529,47 €"),
jour7h: parseEuro("102,95 €"),
jour8h: parseEuro("117,66 €"),
mois35h: parseEuro("2 006,02 €"),
mois39h: parseEuro("2 292,59 €"),
},
cdi: parseEuro("1 828,83 €"),
},
];
const filieres = [
{ code: 'G', nom: 'Réalisation', icon: Clapperboard, color: 'orange' },
{ code: 'H', nom: 'Son', icon: Volume2, color: 'red' },
{ code: 'I', nom: 'Web', icon: Globe, color: 'teal' },
];
const colorClasses = {
orange: {
bg: 'bg-orange-50',
border: 'border-orange-200',
text: 'text-orange-900',
hover: 'hover:bg-orange-100',
gradient: 'from-orange-500 to-amber-600',
ring: 'ring-orange-500',
},
red: {
bg: 'bg-red-50',
border: 'border-red-200',
text: 'text-red-900',
hover: 'hover:bg-red-100',
gradient: 'from-red-500 to-rose-600',
ring: 'ring-red-500',
},
teal: {
bg: 'bg-teal-50',
border: 'border-teal-200',
text: 'text-teal-900',
hover: 'hover:bg-teal-100',
gradient: 'from-teal-500 to-cyan-600',
ring: 'ring-teal-500',
},
};
interface EmploiCardProps {
emploi: Emploi;
color: keyof typeof colorClasses;
}
function EmploiCard({ emploi, color }: EmploiCardProps) {
const [isExpanded, setIsExpanded] = useState(false);
const [activeTab, setActiveTab] = useState<'cddu' | 'cdi'>('cdi');
const colors = colorClasses[color];
return (
<div className={`rounded-xl border ${colors.border} bg-white overflow-hidden transition-all duration-200 hover:shadow-md`}>
{/* Header */}
<button
onClick={() => setIsExpanded(!isExpanded)}
className={`w-full px-4 py-3 flex items-center justify-between ${colors.hover} transition-colors`}
>
<div className="flex items-center gap-3">
<span className={`inline-flex items-center px-2 py-1 rounded-md text-xs font-semibold ${colors.bg} ${colors.text}`}>
Niveau {emploi.niveau}
</span>
<h3 className="text-sm font-semibold text-slate-900">{emploi.nom}</h3>
</div>
{isExpanded ? (
<ChevronUp className="w-4 h-4 text-slate-400" />
) : (
<ChevronDown className="w-4 h-4 text-slate-400" />
)}
</button>
{/* Content */}
{isExpanded && (
<div className="border-t border-slate-100 p-4 space-y-4">
{/* Tabs */}
<div className="flex gap-2">
<button
onClick={() => setActiveTab('cdi')}
className={`flex-1 px-4 py-2 rounded-lg text-xs font-semibold transition-all ${
activeTab === 'cdi'
? `bg-gradient-to-r ${colors.gradient} text-white shadow-sm`
: 'bg-slate-50 text-slate-600 hover:bg-slate-100'
}`}
>
CDI / CDD
</button>
<button
onClick={() => setActiveTab('cddu')}
className={`flex-1 px-4 py-2 rounded-lg text-xs font-semibold transition-all ${
activeTab === 'cddu'
? `bg-gradient-to-r ${colors.gradient} text-white shadow-sm`
: 'bg-slate-50 text-slate-600 hover:bg-slate-100'
}`}
>
CDDU
</button>
</div>
{/* Content based on tab */}
{activeTab === 'cdi' ? (
<div className={`rounded-lg ${colors.bg} border ${colors.border} p-4`}>
<p className="text-xs text-slate-600 mb-2">Salaire mensuel minimum</p>
<p className={`text-2xl font-bold ${colors.text}`}>{euro(emploi.cdi)}</p>
</div>
) : (
<div className="space-y-3">
{/* Par semaine */}
<div className={`rounded-lg ${colors.bg} border ${colors.border} p-3`}>
<p className="text-xs font-semibold text-slate-700 mb-2">Par semaine</p>
<div className="grid grid-cols-2 gap-3 text-xs">
<div>
<p className="text-slate-500">Base 35h</p>
<p className={`font-bold ${colors.text}`}>{euro(emploi.cddu.semaine35h)}</p>
</div>
<div>
<p className="text-slate-500">Base 39h</p>
<p className={`font-bold ${colors.text}`}>{euro(emploi.cddu.semaine39h)}</p>
</div>
</div>
</div>
{/* Par jour */}
<div className={`rounded-lg ${colors.bg} border ${colors.border} p-3`}>
<p className="text-xs font-semibold text-slate-700 mb-2">Par jour</p>
<div className="grid grid-cols-2 gap-3 text-xs">
<div>
<p className="text-slate-500">Base 7h</p>
<p className={`font-bold ${colors.text}`}>{euro(emploi.cddu.jour7h)}</p>
</div>
<div>
<p className="text-slate-500">Base 8h</p>
<p className={`font-bold ${colors.text}`}>{euro(emploi.cddu.jour8h)}</p>
</div>
</div>
</div>
{/* Par mois */}
<div className={`rounded-lg ${colors.bg} border ${colors.border} p-3`}>
<p className="text-xs font-semibold text-slate-700 mb-2">Par mois</p>
<div className="grid grid-cols-2 gap-3 text-xs">
<div>
<p className="text-slate-500">Base 35h</p>
<p className={`font-bold ${colors.text}`}>{euro(emploi.cddu.mois35h)}</p>
</div>
<div>
<p className="text-slate-500">Base 39h</p>
<p className={`font-bold ${colors.text}`}>{euro(emploi.cddu.mois39h)}</p>
</div>
</div>
</div>
</div>
)}
</div>
)}
</div>
);
}
interface CategorieBFictionDataPart3Props {
activeFiliere: string;
}
export default function CategorieBFictionDataPart3({ activeFiliere }: CategorieBFictionDataPart3Props) {
const [searchTerm, setSearchTerm] = useState('');
const filteredEmplois = useMemo(() => {
// D'abord filtrer par la filière active
let result = emploisData.filter(e => e.filiere === activeFiliere);
// Puis appliquer le filtre de recherche
if (searchTerm) {
result = result.filter(e =>
e.nom.toLowerCase().includes(searchTerm.toLowerCase())
);
}
return result.sort((a, b) => a.nom.localeCompare(b.nom));
}, [activeFiliere, searchTerm]);
// Déterminer la couleur en fonction de la filière
const getColorForFiliere = (filiereCode: string): keyof typeof colorClasses => {
const filiere = filieres.find(f => f.code === filiereCode);
return (filiere?.color as keyof typeof colorClasses) || 'blue';
};
return (
<div className="space-y-6">
{/* En-tête */}
<div className="rounded-xl border bg-gradient-to-br from-orange-50 to-amber-50 p-4">
<h2 className="text-lg font-semibold text-orange-900 mb-1">
Filières G, H et I
</h2>
<p className="text-xs text-orange-600 mt-2">
{emploisData.length} emplois - Grille de salaires CCNPA (IDCC 2642) - Valeurs 2025
</p>
</div>
{/* Recherche */}
<div className="space-y-4">
{/* Barre de recherche */}
<div className="relative">
<Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400" />
<input
type="text"
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
placeholder="Rechercher un emploi (nom ou filière G/H/I)..."
className="w-full pl-10 pr-4 py-2.5 rounded-lg border border-slate-200 focus:ring-2 focus:ring-cyan-500 focus:border-transparent text-sm"
/>
</div>
{/* Résultats */}
<div className="space-y-3">
<div className="flex items-center justify-between">
<h3 className="text-sm font-semibold text-slate-700">
{filteredEmplois.length} emploi{filteredEmplois.length > 1 ? 's' : ''} trouvé{filteredEmplois.length > 1 ? 's' : ''}
</h3>
{searchTerm && (
<button
onClick={() => setSearchTerm('')}
className="text-xs text-slate-500 hover:text-slate-700"
>
Effacer la recherche
</button>
)}
</div>
<div className="space-y-2">
{filteredEmplois.map((emploi, index) => (
<EmploiCard
key={index}
emploi={emploi}
color={getColorForFiliere(emploi.filiere)}
/>
))}
</div>
{filteredEmplois.length === 0 && (
<div className="text-center py-12">
<p className="text-sm text-slate-500">Aucun emploi trouvé pour cette recherche.</p>
</div>
)}
</div>
</div>
</div>
);
}