367 lines
24 KiB
TypeScript
367 lines
24 KiB
TypeScript
"use client";
|
|
|
|
import React, { useState, useMemo } from 'react';
|
|
import { Pencil, Palette, Camera, Search, ChevronDown, ChevronUp } from 'lucide-react';
|
|
|
|
// Fonction pour parser les montants en euros
|
|
function parseEuro(value: string | null): number | null {
|
|
if (!value || value === '-') return null;
|
|
const cleaned = value.replace(/\s/g, '').replace('€', '').replace(',', '.');
|
|
const parsed = parseFloat(cleaned);
|
|
return isNaN(parsed) ? null : parsed;
|
|
}
|
|
|
|
// Fonction pour formater en euros
|
|
function euro(value: number | null): string {
|
|
if (value === null) return '-';
|
|
return new Intl.NumberFormat('fr-FR', {
|
|
style: 'currency',
|
|
currency: 'EUR'
|
|
}).format(value);
|
|
}
|
|
|
|
// Interface pour un emploi
|
|
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;
|
|
}
|
|
|
|
// Données des emplois - Filières A, B, C
|
|
const emploisData: Emploi[] = [
|
|
// Filière A - Écriture
|
|
{ nom: "Animatronicien", filiere: "A", niveau: "IIIA", cddu: { semaine35h: 769.64, semaine39h: 879.58, jour7h: 171.03, jour8h: 195.46, mois35h: 2924.61, mois39h: 3342.41 }, cdi: 2530.92 },
|
|
{ nom: "Chargé d'enquête / de recherche", filiere: "A", niveau: "IIIA", cddu: { semaine35h: 783.49, semaine39h: 895.41, jour7h: 174.11, jour8h: 198.98, mois35h: 2977.24, mois39h: 3402.56 }, cdi: 2530.92 },
|
|
{ nom: "Chargé de sélection", filiere: "A", niveau: "IIIA", cddu: { semaine35h: 802.60, semaine39h: 917.26, jour7h: 178.36, jour8h: 203.84, mois35h: 3049.89, mois39h: 3485.58 }, cdi: 2590.58 },
|
|
{ nom: "Collaborateur artistique", filiere: "A", niveau: "IV", cddu: { semaine35h: 521.24, semaine39h: 595.71, jour7h: 115.83, jour8h: 132.38, mois35h: 2342.34, mois39h: 2676.95 }, cdi: 1828.83 },
|
|
{ nom: "Collaborateur de sélection", filiere: "A", niveau: "IV", cddu: { semaine35h: 628.00, semaine39h: 717.71, jour7h: 139.56, jour8h: 159.49, mois35h: 2386.40, mois39h: 2727.30 }, cdi: 2048.84 },
|
|
{ nom: "Conseiller artistique d'émission", filiere: "A", niveau: "IIIA", cddu: { semaine35h: 787.91, semaine39h: 900.47, jour7h: 175.09, jour8h: 200.10, mois35h: 2994.06, mois39h: 3421.77 }, cdi: 2590.58 },
|
|
{ nom: "Coordinateur d'écriture (ex script éditeur)", filiere: "A", niveau: "II", cddu: { semaine35h: 856.04, semaine39h: 978.33, jour7h: 190.23, jour8h: 217.41, mois35h: 3252.95, mois39h: 3717.65 }, cdi: 3013.00 },
|
|
{ nom: "Dir. de collection / Dir. de programmation", filiere: "A", niveau: "II", cddu: { semaine35h: 1099.85, semaine39h: 1256.97, jour7h: 244.41, jour8h: 279.33, mois35h: 4179.43, mois39h: 4776.47 }, cdi: 2952.74 },
|
|
{ nom: "Directeur artistique", filiere: "A", niveau: "II", cddu: { semaine35h: 1099.85, semaine39h: 1256.97, jour7h: 244.41, jour8h: 279.33, mois35h: 4179.43, mois39h: 4776.47 }, cdi: 2952.74 },
|
|
{ nom: "Directeur de jeux", filiere: "A", niveau: "I", cddu: { semaine35h: 1099.85, semaine39h: 1256.97, jour7h: 244.41, jour8h: 279.33, mois35h: 4179.43, mois39h: 4776.47 }, cdi: 2952.14 },
|
|
{ nom: "Directeur de la distribution", filiere: "A", niveau: "IIIA", cddu: { semaine35h: 856.04, semaine39h: 978.33, jour7h: 190.23, jour8h: 217.41, mois35h: 3252.95, mois39h: 3717.65 }, cdi: 2530.92 },
|
|
{ nom: "Directeur de sélection", filiere: "A", niveau: "I", cddu: { semaine35h: 1099.85, semaine39h: 1256.97, jour7h: 244.41, jour8h: 279.33, mois35h: 4179.43, mois39h: 4776.47 }, cdi: 2892.47 },
|
|
{ nom: "Directeur des dialogues", filiere: "A", niveau: "IIIB", cddu: { semaine35h: 727.88, semaine39h: 831.86, jour7h: 161.75, jour8h: 184.86, mois35h: 2765.95, mois39h: 3161.07 }, cdi: 2048.84 },
|
|
{ nom: "Documentaliste", filiere: "A", niveau: "II", cddu: { semaine35h: 818.52, semaine39h: 935.45, jour7h: 181.89, jour8h: 207.88, mois35h: 3110.36, mois39h: 3554.68 }, cdi: 2892.47 },
|
|
{ nom: "Enquêteur / Recherchiste", filiere: "A", niveau: "IIIB", cddu: { semaine35h: 749.71, semaine39h: 856.81, jour7h: 166.60, jour8h: 190.40, mois35h: 2848.89, mois39h: 3255.86 }, cdi: 2169.36 },
|
|
{ nom: "Illustrateur sonore", filiere: "A", niveau: "IIIA", cddu: { semaine35h: 769.64, semaine39h: 879.58, jour7h: 171.03, jour8h: 195.46, mois35h: 2924.61, mois39h: 3342.41 }, cdi: 2410.40 },
|
|
{ nom: "Préparateur de questions", filiere: "A", niveau: "IV", cddu: { semaine35h: 628.00, semaine39h: 717.71, jour7h: 139.56, jour8h: 159.49, mois35h: 2386.40, mois39h: 2727.30 }, cdi: 2147.87 },
|
|
{ nom: "Producteur artistique", filiere: "A", niveau: "II", cddu: { semaine35h: 1099.85, semaine39h: 1256.97, jour7h: 244.41, jour8h: 279.33, mois35h: 4179.43, mois39h: 4776.47 }, cdi: 2952.74 },
|
|
{ nom: "Programmateur artistique d'émission", filiere: "A", niveau: "IIIB", cddu: { semaine35h: 727.88, semaine39h: 831.86, jour7h: 161.75, jour8h: 184.86, mois35h: 2765.95, mois39h: 3161.07 }, cdi: 2048.84 },
|
|
{ nom: "Responsable d'enquête / de recherche", filiere: "A", niveau: "II", cddu: { semaine35h: 818.52, semaine39h: 935.45, jour7h: 181.89, jour8h: 207.88, mois35h: 3110.36, mois39h: 3554.68 }, cdi: 2892.47 },
|
|
{ nom: "Responsable de questions", filiere: "A", niveau: "IIIA", cddu: { semaine35h: 769.64, semaine39h: 879.58, jour7h: 171.03, jour8h: 195.46, mois35h: 2924.61, mois39h: 3342.41 }, cdi: 2651.44 },
|
|
|
|
// Filière B - Décor & Costume
|
|
{ nom: "1er assistant décorateur", filiere: "B", niveau: "IIIA", cddu: { semaine35h: 939.02, semaine39h: 1073.16, jour7h: 208.67, jour8h: 238.48, mois35h: 3568.27, mois39h: 4078.01 }, cdi: 2530.92 },
|
|
{ nom: "2ème assistant décorateur", filiere: "B", niveau: "IIIB", cddu: { semaine35h: 818.59, semaine39h: 935.53, jour7h: 181.91, jour8h: 207.90, mois35h: 3110.64, mois39h: 3555.01 }, cdi: 2109.10 },
|
|
{ nom: "Accessoiriste", filiere: "B", niveau: "IIIB", cddu: { semaine35h: 791.03, semaine39h: 904.03, jour7h: 175.78, jour8h: 200.90, mois35h: 3005.91, mois39h: 3435.32 }, cdi: 2048.84 },
|
|
{ nom: "Assistant décorateur adjoint", filiere: "B", niveau: "VI", cddu: { semaine35h: 451.99, semaine39h: 516.55, jour7h: 100.44, jour8h: 114.79, mois35h: 2342.34, mois39h: 2676.95 }, cdi: 1828.83 },
|
|
{ nom: "Chef constructeur", filiere: "B", niveau: "IIIA", cddu: { semaine35h: 1203.69, semaine39h: 1375.64, jour7h: 267.49, jour8h: 305.70, mois35h: 4574.02, mois39h: 5227.43 }, cdi: 2651.44 },
|
|
{ nom: "Chef costumier", filiere: "B", niveau: "IIIA", cddu: { semaine35h: 872.56, semaine39h: 997.21, jour7h: 193.90, jour8h: 221.60, mois35h: 3315.71, mois39h: 3789.38 }, cdi: 2169.36 },
|
|
{ nom: "Chef d'équipe de décor", filiere: "B", niveau: "IV", cddu: { semaine35h: 1086.87, semaine39h: 1242.14, jour7h: 241.53, jour8h: 276.03, mois35h: 4130.12, mois39h: 4720.13 }, cdi: 2530.92 },
|
|
{ nom: "Chef décorateur", filiere: "B", niveau: "II", cddu: { semaine35h: 1639.88, semaine39h: 1874.15, jour7h: 364.42, jour8h: 416.48, mois35h: 6231.55, mois39h: 7121.75 }, cdi: 3013.00 },
|
|
{ nom: "Constructeur de décor", filiere: "B", niveau: "IV", cddu: { semaine35h: 909.38, semaine39h: 1039.29, jour7h: 202.08, jour8h: 230.95, mois35h: 3455.63, mois39h: 3949.29 }, cdi: 2481.29 },
|
|
{ nom: "Costumier", filiere: "B", niveau: "IV", cddu: { semaine35h: 696.89, semaine39h: 796.45, jour7h: 154.87, jour8h: 176.99, mois35h: 2648.20, mois39h: 3026.50 }, cdi: 1828.83 },
|
|
{ nom: "Créateur de costume", filiere: "B", niveau: "II", cddu: { semaine35h: 1616.70, semaine39h: 1847.66, jour7h: 359.27, jour8h: 410.59, mois35h: 6143.47, mois39h: 7021.08 }, cdi: 3013.00 },
|
|
{ nom: "Décorateur", filiere: "B", niveau: "II", cddu: { semaine35h: 1043.61, semaine39h: 1192.70, jour7h: 231.91, jour8h: 265.04, mois35h: 3965.71, mois39h: 4532.23 }, cdi: 2892.47 },
|
|
{ nom: "Dessinateur en décor", filiere: "B", niveau: "IIIB", cddu: { semaine35h: 818.59, semaine39h: 935.53, jour7h: 181.91, jour8h: 207.90, mois35h: 3110.64, mois39h: 3555.01 }, cdi: 2109.10 },
|
|
{ nom: "Électricien déco / Machiniste déco", filiere: "B", niveau: "V", cddu: { semaine35h: 897.81, semaine39h: 1026.07, jour7h: 199.51, jour8h: 228.02, mois35h: 3411.68, mois39h: 3899.05 }, cdi: 2169.36 },
|
|
{ nom: "Ensemblier - décorateur", filiere: "B", niveau: "IIIA", cddu: { semaine35h: 939.02, semaine39h: 1073.16, jour7h: 208.67, jour8h: 238.48, mois35h: 3568.27, mois39h: 4078.01 }, cdi: 2530.92 },
|
|
{ nom: "Habilleur", filiere: "B", niveau: "V", cddu: { semaine35h: 628.00, semaine39h: 717.71, jour7h: 139.56, jour8h: 159.49, mois35h: 2386.40, mois39h: 2727.30 }, cdi: 1828.83 },
|
|
{ nom: "Maçon de décor", filiere: "B", niveau: "V", cddu: { semaine35h: 897.81, semaine39h: 1026.07, jour7h: 199.51, jour8h: 228.02, mois35h: 3411.68, mois39h: 3899.05 }, cdi: 2169.36 },
|
|
{ nom: "Menuisier-traceur-toupilleur de décor", filiere: "B", niveau: "V", cddu: { semaine35h: 926.51, semaine39h: 1058.87, jour7h: 205.89, jour8h: 235.30, mois35h: 3520.74, mois39h: 4023.70 }, cdi: 2410.40 },
|
|
{ nom: "Métallier / Serrurier / Mécanicien de décor", filiere: "B", niveau: "V", cddu: { semaine35h: 897.81, semaine39h: 1026.07, jour7h: 199.51, jour8h: 228.02, mois35h: 3411.68, mois39h: 3899.05 }, cdi: 2169.36 },
|
|
{ nom: "Peintre de décor", filiere: "B", niveau: "V", cddu: { semaine35h: 897.81, semaine39h: 1026.07, jour7h: 199.51, jour8h: 228.02, mois35h: 3411.68, mois39h: 3899.05 }, cdi: 2169.36 },
|
|
{ nom: "Peintre en lettres / en faux bois de décor", filiere: "B", niveau: "V", cddu: { semaine35h: 897.81, semaine39h: 1026.07, jour7h: 199.51, jour8h: 228.02, mois35h: 3411.68, mois39h: 3899.05 }, cdi: 2169.36 },
|
|
{ nom: "Régisseur d'extérieurs", filiere: "B", niveau: "IIIB", cddu: { semaine35h: 818.59, semaine39h: 935.53, jour7h: 181.91, jour8h: 207.90, mois35h: 3110.64, mois39h: 3555.01 }, cdi: 2109.10 },
|
|
{ nom: "Rippeur", filiere: "B", niveau: "V", cddu: { semaine35h: 802.52, semaine39h: 917.17, jour7h: 178.34, jour8h: 203.81, mois35h: 3049.58, mois39h: 3485.22 }, cdi: 1828.83 },
|
|
{ nom: "Staffeur de décor", filiere: "B", niveau: "V", cddu: { semaine35h: 926.51, semaine39h: 1058.87, jour7h: 205.89, jour8h: 235.30, mois35h: 3520.74, mois39h: 4023.70 }, cdi: 2169.36 },
|
|
{ nom: "Styliste", filiere: "B", niveau: "IIIB", cddu: { semaine35h: 785.30, semaine39h: 897.48, jour7h: 174.51, jour8h: 199.44, mois35h: 2984.13, mois39h: 3410.42 }, cdi: 2048.84 },
|
|
{ nom: "Tapissier de décor", filiere: "B", niveau: "V", cddu: { semaine35h: 897.81, semaine39h: 1026.07, jour7h: 199.51, jour8h: 228.02, mois35h: 3411.68, mois39h: 3899.05 }, cdi: 2169.36 },
|
|
|
|
// Filière C - Image
|
|
{ nom: "1er assistant OPV / pointeur", filiere: "C", niveau: "IIIA", cddu: { semaine35h: 944.71, semaine39h: 1079.66, jour7h: 209.93, jour8h: 239.93, mois35h: 3589.89, mois39h: 4102.71 }, cdi: 2651.44 },
|
|
{ nom: "2ème assistant OPV", filiere: "C", niveau: "V", cddu: { semaine35h: 696.89, semaine39h: 796.45, jour7h: 154.87, jour8h: 176.99, mois35h: 2648.20, mois39h: 3026.50 }, cdi: 1828.83 },
|
|
{ nom: "Assistant lumière", filiere: "C", niveau: "IV", cddu: { semaine35h: 746.27, semaine39h: 852.88, jour7h: 165.84, jour8h: 189.53, mois35h: 2835.82, mois39h: 3240.93 }, cdi: 2018.71 },
|
|
{ nom: "Assistant OPV adjoint", filiere: "C", niveau: "VI", cddu: { semaine35h: 451.99, semaine39h: 516.55, jour7h: 100.44, jour8h: 114.79, mois35h: 2342.34, mois39h: 2676.95 }, cdi: 1828.83 },
|
|
{ nom: "Cadreur / OPV", filiere: "C", niveau: "IIIA", cddu: { semaine35h: 1097.60, semaine39h: 1254.40, jour7h: 243.91, jour8h: 278.76, mois35h: 4170.87, mois39h: 4766.70 }, cdi: 2651.44 },
|
|
{ nom: "Chef OPV", filiere: "C", niveau: "II", cddu: { semaine35h: 1245.64, semaine39h: 1423.59, jour7h: 276.81, jour8h: 316.35, mois35h: 4733.44, mois39h: 5409.64 }, cdi: 3013.00 },
|
|
{ nom: "Directeur photo", filiere: "C", niveau: "I", cddu: { semaine35h: 1735.96, semaine39h: 1983.96, jour7h: 385.77, jour8h: 440.88, mois35h: 6596.66, mois39h: 7539.02 }, cdi: 3314.29 },
|
|
{ nom: "Ingénieur de la vision", filiere: "C", niveau: "II", cddu: { semaine35h: 1245.64, semaine39h: 1423.59, jour7h: 276.81, jour8h: 316.35, mois35h: 4733.44, mois39h: 5409.64 }, cdi: 3013.00 },
|
|
{ nom: "Ingénieur de la vision adjoint", filiere: "C", niveau: "IIIB", cddu: { semaine35h: 872.56, semaine39h: 997.21, jour7h: 193.90, jour8h: 221.60, mois35h: 3315.71, mois39h: 3789.38 }, cdi: 2169.36 },
|
|
{ nom: "Monteur", filiere: "C", niveau: "IIIB", cddu: { semaine35h: 918.47, semaine39h: 1049.68, jour7h: 204.10, jour8h: 233.26, mois35h: 3490.19, mois39h: 3988.78 }, cdi: 2289.87 },
|
|
{ nom: "Opérateur de transfert et de traitement numérique", filiere: "C", niveau: "V", cddu: { semaine35h: 696.89, semaine39h: 796.45, jour7h: 154.87, jour8h: 176.99, mois35h: 2648.20, mois39h: 3026.51 }, cdi: 1828.83 },
|
|
{ nom: "Opérateur magnéto / Opérateur magnéto ralenti", filiere: "C", niveau: "V", cddu: { semaine35h: 662.45, semaine39h: 757.08, jour7h: 147.21, jour8h: 168.24, mois35h: 2517.30, mois39h: 2876.90 }, cdi: 1828.83 },
|
|
{ nom: "Opérateur régie-vidéo", filiere: "C", niveau: "V", cddu: { semaine35h: 662.45, semaine39h: 757.08, jour7h: 147.21, jour8h: 168.24, mois35h: 2517.30, mois39h: 2876.90 }, cdi: 1828.83 },
|
|
{ nom: "Opérateur spécial (steadicamer)", filiere: "C", niveau: "IIIA", cddu: { semaine35h: 1162.83, semaine39h: 1328.95, jour7h: 258.41, jour8h: 295.32, mois35h: 4418.76, mois39h: 5050.00 }, cdi: 2651.44 },
|
|
{ nom: "Opérateur synthétiseur", filiere: "C", niveau: "V", cddu: { semaine35h: 662.45, semaine39h: 757.08, jour7h: 147.21, jour8h: 168.24, mois35h: 2517.30, mois39h: 2876.90 }, cdi: 1828.83 },
|
|
{ nom: "Photographe de plateau", filiere: "C", niveau: "IIIB", cddu: { semaine35h: 791.03, semaine39h: 904.03, jour7h: 175.78, jour8h: 200.90, mois35h: 3005.91, mois39h: 3435.32 }, cdi: 2229.61 },
|
|
{ nom: "Pupitreur lumière", filiere: "C", niveau: "IIIB", cddu: { semaine35h: 909.38, semaine39h: 1039.29, jour7h: 202.08, jour8h: 230.95, mois35h: 3455.63, mois39h: 3949.29 }, cdi: 2481.29 },
|
|
{ nom: "Superviseur d'effets spéciaux image", filiere: "C", niveau: "IIIA", cddu: { semaine35h: 1025.42, semaine39h: 1171.91, jour7h: 227.87, jour8h: 260.42, mois35h: 3896.61, mois39h: 4453.25 }, cdi: 2530.92 },
|
|
{ nom: "Technicien truquiste", filiere: "C", niveau: "IV", cddu: { semaine35h: 802.52, semaine39h: 917.17, jour7h: 178.34, jour8h: 203.81, mois35h: 3049.58, mois39h: 3485.22 }, cdi: 2109.10 },
|
|
{ nom: "Technicien vidéo", filiere: "C", niveau: "IV", cddu: { semaine35h: 802.52, semaine39h: 917.17, jour7h: 178.34, jour8h: 203.81, mois35h: 3049.58, mois39h: 3485.22 }, cdi: 2109.10 },
|
|
];
|
|
|
|
// Définition des filières
|
|
const filieres = [
|
|
{ code: 'A', nom: 'Contenu du programme et collaboration artistique', icon: Pencil, color: 'violet' },
|
|
{ code: 'B', nom: 'Costumes, décor', icon: Palette, color: 'blue' },
|
|
{ code: 'C', nom: 'Image', icon: Camera, color: 'cyan' },
|
|
];
|
|
|
|
// Classes de couleurs pour chaque filière
|
|
const colorClasses: Record<string, {
|
|
bg: string;
|
|
border: string;
|
|
text: string;
|
|
hover: string;
|
|
gradient: string;
|
|
ring: string;
|
|
}> = {
|
|
violet: {
|
|
bg: 'from-violet-50 to-purple-50',
|
|
border: 'border-violet-200',
|
|
text: 'text-violet-700',
|
|
hover: 'hover:border-violet-300',
|
|
gradient: 'from-violet-500 to-purple-600',
|
|
ring: 'ring-violet-200',
|
|
},
|
|
blue: {
|
|
bg: 'from-blue-50 to-indigo-50',
|
|
border: 'border-blue-200',
|
|
text: 'text-blue-700',
|
|
hover: 'hover:border-blue-300',
|
|
gradient: 'from-blue-500 to-indigo-600',
|
|
ring: 'ring-blue-200',
|
|
},
|
|
cyan: {
|
|
bg: 'from-cyan-50 to-sky-50',
|
|
border: 'border-cyan-200',
|
|
text: 'text-cyan-700',
|
|
hover: 'hover:border-cyan-300',
|
|
gradient: 'from-cyan-500 to-sky-600',
|
|
ring: 'ring-cyan-200',
|
|
},
|
|
};
|
|
|
|
// Composant pour une carte d'emploi
|
|
interface EmploiCardProps {
|
|
emploi: Emploi;
|
|
color: string;
|
|
}
|
|
|
|
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-2 ${colors.border} bg-white overflow-hidden transition-all ${colors.hover}`}>
|
|
<button
|
|
onClick={() => setIsExpanded(!isExpanded)}
|
|
className="w-full p-4 text-left flex items-center justify-between hover:bg-slate-50 transition-colors"
|
|
>
|
|
<div className="flex-1">
|
|
<h4 className="font-semibold text-slate-900">{emploi.nom}</h4>
|
|
<p className="text-xs text-slate-500 mt-0.5">
|
|
Niveau {emploi.niveau} • CDI mensuel : <span className="font-semibold">{euro(emploi.cdi)}</span>
|
|
</p>
|
|
</div>
|
|
{isExpanded ? (
|
|
<ChevronUp className="w-5 h-5 text-slate-400 flex-shrink-0" />
|
|
) : (
|
|
<ChevronDown className="w-5 h-5 text-slate-400 flex-shrink-0" />
|
|
)}
|
|
</button>
|
|
|
|
{isExpanded && (
|
|
<div className="border-t p-4 bg-slate-50">
|
|
{/* Tabs CDI / CDDU */}
|
|
<div className="flex gap-2 mb-4">
|
|
<button
|
|
onClick={() => setActiveTab('cdi')}
|
|
className={`flex-1 px-4 py-2 rounded-lg text-sm font-semibold transition-all ${
|
|
activeTab === 'cdi'
|
|
? `bg-gradient-to-r ${colors.gradient} text-white shadow-sm`
|
|
: 'bg-white text-slate-600 hover:bg-slate-100'
|
|
}`}
|
|
>
|
|
CDI / CDD
|
|
</button>
|
|
<button
|
|
onClick={() => setActiveTab('cddu')}
|
|
className={`flex-1 px-4 py-2 rounded-lg text-sm font-semibold transition-all ${
|
|
activeTab === 'cddu'
|
|
? `bg-gradient-to-r ${colors.gradient} text-white shadow-sm`
|
|
: 'bg-white text-slate-600 hover:bg-slate-100'
|
|
}`}
|
|
>
|
|
CDDU
|
|
</button>
|
|
</div>
|
|
|
|
{/* Contenu CDI */}
|
|
{activeTab === 'cdi' && (
|
|
<div className={`rounded-lg bg-gradient-to-br ${colors.bg} border ${colors.border} p-4`}>
|
|
<p className="text-xs font-semibold text-slate-700 mb-2">Salaire mensuel</p>
|
|
<p className={`text-2xl font-bold ${colors.text}`}>{euro(emploi.cdi)}</p>
|
|
<p className="text-xs text-slate-500 mt-1">Base 35h / mois</p>
|
|
</div>
|
|
)}
|
|
|
|
{/* Contenu CDDU */}
|
|
{activeTab === 'cddu' && (
|
|
<div className="space-y-3">
|
|
{/* Par semaine */}
|
|
<div className={`rounded-lg bg-gradient-to-br ${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>
|
|
);
|
|
}
|
|
|
|
// Composant principal
|
|
interface CategorieBHorsDataProps {
|
|
activeFiliere: string;
|
|
}
|
|
|
|
export default function CategorieBHorsData({ activeFiliere }: CategorieBHorsDataProps) {
|
|
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';
|
|
};
|
|
const activeFiliereInfo = filieres.find(f => f.code === activeFiliere);
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
{/* En-tête */}
|
|
<div className="rounded-xl border bg-gradient-to-br from-emerald-50 to-teal-50 p-4">
|
|
<h2 className="text-lg font-semibold text-emerald-900 mb-1">
|
|
Filière {activeFiliere} - {activeFiliereInfo?.nom || 'Filière'}
|
|
</h2>
|
|
<p className="text-xs text-emerald-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 dans ${activeFiliereInfo?.nom || 'la filière'}...`}
|
|
className="w-full pl-10 pr-4 py-2.5 rounded-lg border border-slate-200 focus:ring-2 focus:ring-emerald-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>
|
|
);
|
|
}
|