799 lines
23 KiB
TypeScript
799 lines
23 KiB
TypeScript
"use client";
|
|
|
|
import React, { useState, useMemo } from 'react';
|
|
import { Sparkles, Film, ClipboardList, 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 D - Maquillage & Coiffure
|
|
{
|
|
nom: "Blocker / Rigger",
|
|
filiere: "D",
|
|
niveau: "IV",
|
|
cddu: {
|
|
semaine35h: parseEuro("873,86 €"),
|
|
semaine39h: parseEuro("998,69 €"),
|
|
jour7h: parseEuro("194,19 €"),
|
|
jour8h: parseEuro("221,93 €"),
|
|
mois35h: parseEuro("3 320,66 €"),
|
|
mois39h: parseEuro("3 795,03 €"),
|
|
},
|
|
cdi: parseEuro("1 828,83 €"),
|
|
},
|
|
{
|
|
nom: "Chef électricien",
|
|
filiere: "D",
|
|
niveau: "IIIB",
|
|
cddu: {
|
|
semaine35h: parseEuro("989,68 €"),
|
|
semaine39h: parseEuro("1 131,06 €"),
|
|
jour7h: parseEuro("219,93 €"),
|
|
jour8h: parseEuro("251,35 €"),
|
|
mois35h: parseEuro("3 760,77 €"),
|
|
mois39h: parseEuro("4 298,01 €"),
|
|
},
|
|
cdi: parseEuro("2 289,87 €"),
|
|
},
|
|
{
|
|
nom: "Chef machiniste",
|
|
filiere: "D",
|
|
niveau: "IIIB",
|
|
cddu: {
|
|
semaine35h: parseEuro("989,68 €"),
|
|
semaine39h: parseEuro("1 131,06 €"),
|
|
jour7h: parseEuro("219,93 €"),
|
|
jour8h: parseEuro("251,35 €"),
|
|
mois35h: parseEuro("3 760,77 €"),
|
|
mois39h: parseEuro("4 298,01 €"),
|
|
},
|
|
cdi: parseEuro("2 289,87 €"),
|
|
},
|
|
{
|
|
nom: "Chef maquilleur",
|
|
filiere: "D",
|
|
niveau: "IIIA",
|
|
cddu: {
|
|
semaine35h: parseEuro("884,43 €"),
|
|
semaine39h: parseEuro("1 010,78 €"),
|
|
jour7h: parseEuro("196,54 €"),
|
|
jour8h: parseEuro("224,62 €"),
|
|
mois35h: parseEuro("3 360,84 €"),
|
|
mois39h: parseEuro("3 840,95 €"),
|
|
},
|
|
cdi: parseEuro("2 410,40 €"),
|
|
},
|
|
{
|
|
nom: "Coiffeur",
|
|
filiere: "D",
|
|
niveau: "V",
|
|
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 828,83 €"),
|
|
},
|
|
{
|
|
nom: "Coiffeur perruquier",
|
|
filiere: "D",
|
|
niveau: "IV",
|
|
cddu: {
|
|
semaine35h: parseEuro("893,19 €"),
|
|
semaine39h: parseEuro("1 020,79 €"),
|
|
jour7h: parseEuro("198,49 €"),
|
|
jour8h: parseEuro("226,84 €"),
|
|
mois35h: parseEuro("3 394,11 €"),
|
|
mois39h: parseEuro("3 878,98 €"),
|
|
},
|
|
cdi: parseEuro("1 988,58 €"),
|
|
},
|
|
{
|
|
nom: "Conducteur de groupe",
|
|
filiere: "D",
|
|
niveau: "IV",
|
|
cddu: {
|
|
semaine35h: parseEuro("881,41 €"),
|
|
semaine39h: parseEuro("1 007,33 €"),
|
|
jour7h: parseEuro("195,87 €"),
|
|
jour8h: parseEuro("223,85 €"),
|
|
mois35h: parseEuro("3 349,36 €"),
|
|
mois39h: parseEuro("3 827,83 €"),
|
|
},
|
|
cdi: parseEuro("1 988,58 €"),
|
|
},
|
|
{
|
|
nom: "Électricien / Éclairagiste",
|
|
filiere: "D",
|
|
niveau: "V",
|
|
cddu: {
|
|
semaine35h: parseEuro("811,99 €"),
|
|
semaine39h: parseEuro("927,99 €"),
|
|
jour7h: parseEuro("180,44 €"),
|
|
jour8h: parseEuro("206,22 €"),
|
|
mois35h: parseEuro("3 085,55 €"),
|
|
mois39h: parseEuro("3 526,34 €"),
|
|
},
|
|
cdi: parseEuro("1 828,83 €"),
|
|
},
|
|
{
|
|
nom: "Machiniste",
|
|
filiere: "D",
|
|
niveau: "V",
|
|
cddu: {
|
|
semaine35h: parseEuro("811,99 €"),
|
|
semaine39h: parseEuro("927,99 €"),
|
|
jour7h: parseEuro("180,44 €"),
|
|
jour8h: parseEuro("206,22 €"),
|
|
mois35h: parseEuro("3 085,55 €"),
|
|
mois39h: parseEuro("3 526,34 €"),
|
|
},
|
|
cdi: parseEuro("1 828,83 €"),
|
|
},
|
|
{
|
|
nom: "Maquilleur",
|
|
filiere: "D",
|
|
niveau: "V",
|
|
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 828,83 €"),
|
|
},
|
|
{
|
|
nom: "Maquilleur et coiffeur effets spéciaux",
|
|
filiere: "D",
|
|
niveau: "IIIB",
|
|
cddu: {
|
|
semaine35h: parseEuro("1 072,06 €"),
|
|
semaine39h: parseEuro("1 225,21 €"),
|
|
jour7h: parseEuro("238,24 €"),
|
|
jour8h: parseEuro("272,27 €"),
|
|
mois35h: parseEuro("4 073,83 €"),
|
|
mois39h: parseEuro("4 655,79 €"),
|
|
},
|
|
cdi: parseEuro("2 169,36 €"),
|
|
},
|
|
{
|
|
nom: "Prothésiste",
|
|
filiere: "D",
|
|
niveau: "IIIB",
|
|
cddu: {
|
|
semaine35h: parseEuro("1 072,06 €"),
|
|
semaine39h: parseEuro("1 225,21 €"),
|
|
jour7h: parseEuro("238,24 €"),
|
|
jour8h: parseEuro("272,27 €"),
|
|
mois35h: parseEuro("4 073,83 €"),
|
|
mois39h: parseEuro("4 655,79 €"),
|
|
},
|
|
cdi: parseEuro("2 169,36 €"),
|
|
},
|
|
|
|
// Filière E - Post-production
|
|
{
|
|
nom: "Assistant de post-production",
|
|
filiere: "E",
|
|
niveau: "IV",
|
|
cddu: {
|
|
semaine35h: parseEuro("626,05 €"),
|
|
semaine39h: parseEuro("715,48 €"),
|
|
jour7h: parseEuro("139,12 €"),
|
|
jour8h: parseEuro("159,00 €"),
|
|
mois35h: parseEuro("2 378,97 €"),
|
|
mois39h: parseEuro("2 718,82 €"),
|
|
},
|
|
cdi: parseEuro("1 828,83 €"),
|
|
},
|
|
{
|
|
nom: "Assistant monteur",
|
|
filiere: "E",
|
|
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 monteur adjoint",
|
|
filiere: "E",
|
|
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: "Chargé de post-production",
|
|
filiere: "E",
|
|
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 651,44 €"),
|
|
},
|
|
{
|
|
nom: "Chef monteur",
|
|
filiere: "E",
|
|
niveau: "IIIA",
|
|
cddu: {
|
|
semaine35h: parseEuro("1 127,35 €"),
|
|
semaine39h: parseEuro("1 288,39 €"),
|
|
jour7h: parseEuro("250,52 €"),
|
|
jour8h: parseEuro("286,31 €"),
|
|
mois35h: parseEuro("4 283,91 €"),
|
|
mois39h: parseEuro("4 895,89 €"),
|
|
},
|
|
cdi: parseEuro("2 651,44 €"),
|
|
},
|
|
{
|
|
nom: "Directeur de post-production",
|
|
filiere: "E",
|
|
niveau: "II",
|
|
cddu: {
|
|
semaine35h: parseEuro("1 264,33 €"),
|
|
semaine39h: parseEuro("1 444,95 €"),
|
|
jour7h: parseEuro("280,96 €"),
|
|
jour8h: parseEuro("321,10 €"),
|
|
mois35h: parseEuro("4 804,45 €"),
|
|
mois39h: parseEuro("5 490,78 €"),
|
|
},
|
|
cdi: parseEuro("2 892,47 €"),
|
|
},
|
|
{
|
|
nom: "Étalonneur",
|
|
filiere: "E",
|
|
niveau: "IIIB",
|
|
cddu: {
|
|
semaine35h: parseEuro("964,96 €"),
|
|
semaine39h: parseEuro("1 102,82 €"),
|
|
jour7h: parseEuro("214,44 €"),
|
|
jour8h: parseEuro("245,07 €"),
|
|
mois35h: parseEuro("3 666,86 €"),
|
|
mois39h: parseEuro("4 190,69 €"),
|
|
},
|
|
cdi: parseEuro("2 169,36 €"),
|
|
},
|
|
{
|
|
nom: "Infographiste",
|
|
filiere: "E",
|
|
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: "Mixeur",
|
|
filiere: "E",
|
|
niveau: "II",
|
|
cddu: {
|
|
semaine35h: parseEuro("1 348,40 €"),
|
|
semaine39h: parseEuro("1 541,03 €"),
|
|
jour7h: parseEuro("299,65 €"),
|
|
jour8h: parseEuro("342,45 €"),
|
|
mois35h: parseEuro("5 123,93 €"),
|
|
mois39h: parseEuro("5 855,91 €"),
|
|
},
|
|
cdi: parseEuro("2 892,47 €"),
|
|
},
|
|
{
|
|
nom: "Superviseur d'effets spéciaux postproduction",
|
|
filiere: "E",
|
|
niveau: "IIIA",
|
|
cddu: {
|
|
semaine35h: parseEuro("1 180,27 €"),
|
|
semaine39h: parseEuro("1 348,88 €"),
|
|
jour7h: parseEuro("262,28 €"),
|
|
jour8h: parseEuro("299,75 €"),
|
|
mois35h: parseEuro("4 485,04 €"),
|
|
mois39h: parseEuro("5 125,75 €"),
|
|
},
|
|
cdi: parseEuro("2 651,44 €"),
|
|
},
|
|
{
|
|
nom: "Truquiste",
|
|
filiere: "E",
|
|
niveau: "IIIA",
|
|
cddu: {
|
|
semaine35h: parseEuro("979,97 €"),
|
|
semaine39h: parseEuro("1 119,97 €"),
|
|
jour7h: parseEuro("217,77 €"),
|
|
jour8h: parseEuro("248,88 €"),
|
|
mois35h: parseEuro("3 723,90 €"),
|
|
mois39h: parseEuro("4 255,88 €"),
|
|
},
|
|
cdi: parseEuro("2 530,92 €"),
|
|
},
|
|
|
|
// Filière F - Production
|
|
{
|
|
nom: "Administrateur de production",
|
|
filiere: "F",
|
|
niveau: "IIIA",
|
|
cddu: {
|
|
semaine35h: parseEuro("877,44 €"),
|
|
semaine39h: parseEuro("1 002,79 €"),
|
|
jour7h: parseEuro("194,99 €"),
|
|
jour8h: parseEuro("222,84 €"),
|
|
mois35h: parseEuro("3 334,28 €"),
|
|
mois39h: parseEuro("3 810,59 €"),
|
|
},
|
|
cdi: parseEuro("2 591,18 €"),
|
|
},
|
|
{
|
|
nom: "Assistant de production",
|
|
filiere: "F",
|
|
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 988,58 €"),
|
|
},
|
|
{
|
|
nom: "Assistant de production adjoint",
|
|
filiere: "F",
|
|
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 régisseur adjoint",
|
|
filiere: "F",
|
|
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: "Chargé de production",
|
|
filiere: "F",
|
|
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: "Chauffeur",
|
|
filiere: "F",
|
|
niveau: "VI",
|
|
cddu: {
|
|
semaine35h: parseEuro("482,48 €"),
|
|
semaine39h: parseEuro("551,41 €"),
|
|
jour7h: parseEuro("107,22 €"),
|
|
jour8h: parseEuro("122,53 €"),
|
|
mois35h: parseEuro("2 342,34 €"),
|
|
mois39h: parseEuro("2 676,95 €"),
|
|
},
|
|
cdi: parseEuro("1 828,83 €"),
|
|
},
|
|
{
|
|
nom: "Comptable de production",
|
|
filiere: "F",
|
|
niveau: "IV",
|
|
cddu: {
|
|
semaine35h: parseEuro("750,78 €"),
|
|
semaine39h: parseEuro("858,04 €"),
|
|
jour7h: parseEuro("166,84 €"),
|
|
jour8h: parseEuro("190,68 €"),
|
|
mois35h: parseEuro("2 852,98 €"),
|
|
mois39h: parseEuro("3 260,54 €"),
|
|
},
|
|
cdi: parseEuro("2 169,36 €"),
|
|
},
|
|
{
|
|
nom: "Directeur de production",
|
|
filiere: "F",
|
|
niveau: "I",
|
|
cddu: {
|
|
semaine35h: parseEuro("1 532,22 €"),
|
|
semaine39h: parseEuro("1 751,11 €"),
|
|
jour7h: parseEuro("340,49 €"),
|
|
jour8h: parseEuro("389,14 €"),
|
|
mois35h: parseEuro("5 822,44 €"),
|
|
mois39h: parseEuro("6 654,20 €"),
|
|
},
|
|
cdi: parseEuro("3 314,29 €"),
|
|
},
|
|
{
|
|
nom: "Producteur exécutif",
|
|
filiere: "F",
|
|
niveau: "HN",
|
|
cddu: {
|
|
semaine35h: null,
|
|
semaine39h: null,
|
|
jour7h: null,
|
|
jour8h: null,
|
|
mois35h: null,
|
|
mois39h: null,
|
|
},
|
|
cdi: null,
|
|
},
|
|
{
|
|
nom: "Régisseur / Responsable des repérages",
|
|
filiere: "F",
|
|
niveau: "IIIB",
|
|
cddu: {
|
|
semaine35h: parseEuro("830,81 €"),
|
|
semaine39h: parseEuro("949,50 €"),
|
|
jour7h: parseEuro("184,63 €"),
|
|
jour8h: parseEuro("211,00 €"),
|
|
mois35h: parseEuro("3 157,09 €"),
|
|
mois39h: parseEuro("3 608,09 €"),
|
|
},
|
|
cdi: parseEuro("2 169,36 €"),
|
|
},
|
|
{
|
|
nom: "Régisseur adjoint",
|
|
filiere: "F",
|
|
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 988,58 €"),
|
|
},
|
|
{
|
|
nom: "Régisseur général",
|
|
filiere: "F",
|
|
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: "Responsable des enfants",
|
|
filiere: "F",
|
|
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: "Secrétaire de production",
|
|
filiere: "F",
|
|
niveau: "V",
|
|
cddu: {
|
|
semaine35h: parseEuro("626,05 €"),
|
|
semaine39h: parseEuro("715,48 €"),
|
|
jour7h: parseEuro("139,12 €"),
|
|
jour8h: parseEuro("159,00 €"),
|
|
mois35h: parseEuro("2 378,97 €"),
|
|
mois39h: parseEuro("2 718,82 €"),
|
|
},
|
|
cdi: parseEuro("1 828,83 €"),
|
|
},
|
|
];
|
|
|
|
const filieres = [
|
|
{ code: 'D', nom: 'Plateaux et tournage', icon: Sparkles, color: 'pink' },
|
|
{ code: 'E', nom: 'Postproduction', icon: Film, color: 'indigo' },
|
|
{ code: 'F', nom: 'Production', icon: ClipboardList, color: 'green' },
|
|
];
|
|
|
|
const colorClasses = {
|
|
pink: {
|
|
bg: 'bg-pink-50',
|
|
border: 'border-pink-200',
|
|
text: 'text-pink-900',
|
|
hover: 'hover:bg-pink-100',
|
|
gradient: 'from-pink-500 to-rose-600',
|
|
ring: 'ring-pink-500',
|
|
},
|
|
indigo: {
|
|
bg: 'bg-indigo-50',
|
|
border: 'border-indigo-200',
|
|
text: 'text-indigo-900',
|
|
hover: 'hover:bg-indigo-100',
|
|
gradient: 'from-indigo-500 to-purple-600',
|
|
ring: 'ring-indigo-500',
|
|
},
|
|
green: {
|
|
bg: 'bg-green-50',
|
|
border: 'border-green-200',
|
|
text: 'text-green-900',
|
|
hover: 'hover:bg-green-100',
|
|
gradient: 'from-green-500 to-emerald-600',
|
|
ring: 'ring-green-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 CategorieBFictionDataPart2Props {
|
|
activeFiliere: string;
|
|
}
|
|
|
|
export default function CategorieBFictionDataPart2({ activeFiliere }: CategorieBFictionDataPart2Props) {
|
|
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 D, E et F
|
|
</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 D/E/F)..."
|
|
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>
|
|
);
|
|
}
|