764 lines
30 KiB
TypeScript
764 lines
30 KiB
TypeScript
"use client";
|
||
|
||
import React, { useState } from 'react';
|
||
|
||
const euro = (n: number) => new Intl.NumberFormat('fr-FR', {
|
||
minimumFractionDigits: Number.isInteger(n) ? 0 : 2,
|
||
maximumFractionDigits: 2
|
||
}).format(n) + '€';
|
||
|
||
// ========== DONNÉES ADMINISTRATIFS & COMMERCIAUX ==========
|
||
|
||
const adminCommercialData = {
|
||
"Cadres Groupe 1": {
|
||
gestion: {
|
||
metiers: ["Directeur Général", "Directeur délégué", "Administrateur Général", "Secrétaire Général", "Directeur Administratif & Financier"],
|
||
echelons: [3535.75]
|
||
},
|
||
creation: {
|
||
metiers: ["Directeur artistique", "Directeur musical"],
|
||
echelons: [3535.75]
|
||
},
|
||
accueil: {
|
||
metiers: [],
|
||
echelons: [3535.75]
|
||
}
|
||
},
|
||
"Cadres Groupe 2": {
|
||
gestion: {
|
||
metiers: ["Directeur adjoint", "Administrateur", "Directeur ressources humaines", "Directeur de salle de cabarets", "Responsable Administratif et Financier"],
|
||
echelons: [2799.68, 2915.16, 3030.67, 3146.17, 3261.67]
|
||
},
|
||
creation: {
|
||
metiers: ["Directeur de Production", "Directeur artistique de la production", "Directeur musical de la production", "Administrateur de production", "Administrateur de tournées", "Administrateur de diffusion"],
|
||
echelons: [2799.68, 2915.16, 3030.67, 3146.17, 3261.67]
|
||
},
|
||
accueil: {
|
||
metiers: ["Directeur de communication et/ou relations publiques", "Directeur commercial"],
|
||
echelons: [2799.68, 2915.16, 3030.67, 3146.17, 3261.67]
|
||
}
|
||
},
|
||
"Cadres Groupe 3": {
|
||
gestion: {
|
||
metiers: ["Chef Comptable", "Administrateur délégué"],
|
||
echelons: [2455.77, 2571.29, 2686.78, 2802.27, 2917.76]
|
||
},
|
||
creation: {
|
||
metiers: ["Conseiller artistique"],
|
||
echelons: [2455.77, 2571.29, 2686.78, 2802.27, 2917.76]
|
||
},
|
||
accueil: {
|
||
metiers: ["Cadre commercial"],
|
||
echelons: [2455.77, 2571.29, 2686.78, 2802.27, 2917.76]
|
||
}
|
||
},
|
||
"Agents de maîtrise": {
|
||
gestion: {
|
||
metiers: ["Comptable principal", "Comptable unique", "Responsable administratif", "Secrétaire de direction", "Assistant de Direction", "Webmaster"],
|
||
echelons: [2074.21, 2149.28, 2230.13, 2295.98, 2362.96]
|
||
},
|
||
creation: {
|
||
metiers: ["Programmateur", "Coordinateur", "Chargé de production", "Chargé de diffusion", "Répétiteur"],
|
||
echelons: [2074.21, 2149.28, 2230.13, 2295.98, 2362.96]
|
||
},
|
||
accueil: {
|
||
metiers: ["Responsable Relations Presse et/ou Communication", "Attaché de presse", "Attaché aux relations publiques", "Responsable billetterie", "Gestionnaire de billetterie", "Responsable contrôle et accueil", "Responsable commercialisation"],
|
||
echelons: [2074.21, 2149.28, 2230.13, 2295.98, 2362.96]
|
||
}
|
||
},
|
||
"Employés Qualifiés Groupe 1": {
|
||
gestion: {
|
||
metiers: ["Comptable", "Secrétaire comptable"],
|
||
echelons: [1884.21, 1930.91, 1986.61, 2034.70, 2094.76]
|
||
},
|
||
creation: {
|
||
metiers: ["Collaborateur artistique du chorégraphe", "Collaborateur artistique du directeur musical", "Collaborateur artistique du metteur en scène", "Copiste", "Attaché de production", "Attaché de diffusion", "Souffleur"],
|
||
echelons: [1884.21, 1930.91, 1986.61, 2034.70, 2094.76]
|
||
},
|
||
accueil: {
|
||
metiers: ["Chef contrôleur", "Chargé de commercialisation", "Responsable Placement"],
|
||
echelons: [1884.21, 1930.91, 1986.61, 2034.70, 2094.76]
|
||
}
|
||
},
|
||
"Employés Qualifiés Groupe 2": {
|
||
gestion: {
|
||
metiers: ["Aide-Comptable (saisie d'écritures, classement, rapprochement bancaire)", "Secrétaire", "Assistant administratif", "Agent informatique"],
|
||
echelons: [1783.72, 1812.82, 1864.25, 1866.46, 1899.22]
|
||
},
|
||
creation: {
|
||
metiers: [],
|
||
echelons: [1783.72, 1812.82, 1864.25, 1866.46, 1899.22]
|
||
},
|
||
accueil: {
|
||
metiers: ["Chargé de réservation", "Attaché à l'accueil"],
|
||
echelons: [1783.72, 1812.82, 1864.25, 1866.46, 1899.22]
|
||
}
|
||
},
|
||
"Employés": {
|
||
gestion: {
|
||
metiers: ["Employé de bureau", "Standardiste", "Agent d'entretien/maintenance", "Gardien théâtre et lieu de spectacle"],
|
||
echelons: [1777.90, 1783.74, 1789.59, 1795.44, 1801.28]
|
||
},
|
||
creation: {
|
||
metiers: ["Coursier"],
|
||
echelons: [1777.90, 1783.74, 1789.59, 1795.44, 1801.28]
|
||
},
|
||
accueil: {
|
||
metiers: ["Caissier", "Caissier de location", "Contrôleur", "Agent de contrôle et d'accueil", "Agent de vestiaire et d'accueil", "Hôte d'accueil", "Hôtesse d'accueil", "Agent de placement et d'accueil", "Vendeur de produits dérivés", "Agent de billetterie et d'accueil", "Distributeur tracteur", "Afficheur", "Employé de catering"],
|
||
echelons: [1777.90, 1783.74, 1789.59, 1795.44, 1801.28]
|
||
}
|
||
}
|
||
};
|
||
|
||
// ========== DONNÉES TECHNIQUES SPECTACLE ==========
|
||
|
||
const techSpectacleData = {
|
||
"Cadres Groupe 2": {
|
||
regie: {
|
||
metiers: ["Directeur technique", "Régisseur Général"],
|
||
echelons: [2625.88],
|
||
tauxHoraire: 17.32
|
||
},
|
||
son: {
|
||
metiers: ["Concepteur du son", "Ingénieur du son"],
|
||
echelons: [2625.88],
|
||
tauxHoraire: 17.32
|
||
},
|
||
lumiere: {
|
||
metiers: ["Concepteur lumière", "Éclairagiste", "Réalisateur lumière"],
|
||
echelons: [2625.88],
|
||
tauxHoraire: 17.32
|
||
},
|
||
plateau: {
|
||
metiers: ["Décorateur", "Architecte-décorateur", "Scénographe"],
|
||
echelons: [2625.88],
|
||
tauxHoraire: 17.32
|
||
},
|
||
costumes: {
|
||
metiers: ["Costumier – ensemblier", "Chef costumier", "Concepteur des costumes", "Concepteur coiffure, perruques", "Concepteur maquillages, masques"],
|
||
echelons: [2625.88],
|
||
tauxHoraire: 17.32
|
||
},
|
||
video: {
|
||
metiers: ["Réalisateur pour dif. Intégrée au spectacle", "Ingénieur du son vidéo", "Chef opérateur"],
|
||
echelons: [2625.88],
|
||
tauxHoraire: 17.32
|
||
},
|
||
archi: {
|
||
metiers: ["Directeur technique site", "Régisseur général site"],
|
||
echelons: [2625.88],
|
||
tauxHoraire: 17.32
|
||
},
|
||
surete: {
|
||
metiers: [],
|
||
echelons: [2625.88],
|
||
tauxHoraire: 17.32
|
||
}
|
||
},
|
||
"Cadres Groupe 3": {
|
||
regie: {
|
||
metiers: ["Conseiller technique"],
|
||
echelons: [2333.49],
|
||
tauxHoraire: 14.73
|
||
},
|
||
son: {
|
||
metiers: [],
|
||
echelons: [2333.49],
|
||
tauxHoraire: 14.73
|
||
},
|
||
lumiere: {
|
||
metiers: [],
|
||
echelons: [2333.49],
|
||
tauxHoraire: 14.73
|
||
},
|
||
plateau: {
|
||
metiers: [],
|
||
echelons: [2333.49],
|
||
tauxHoraire: 14.73
|
||
},
|
||
costumes: {
|
||
metiers: [],
|
||
echelons: [2333.49],
|
||
tauxHoraire: 14.73
|
||
},
|
||
video: {
|
||
metiers: [],
|
||
echelons: [2333.49],
|
||
tauxHoraire: 14.73
|
||
},
|
||
archi: {
|
||
metiers: [],
|
||
echelons: [2333.49],
|
||
tauxHoraire: 14.73
|
||
},
|
||
surete: {
|
||
metiers: [],
|
||
echelons: [2333.49],
|
||
tauxHoraire: 14.73
|
||
}
|
||
},
|
||
"Agents de maîtrise": {
|
||
regie: {
|
||
metiers: ["Régisseur", "Régisseur d'orchestre", "Régisseur de production", "Conseiller tech. Effets spéciaux", "Concepteur artificier", "Régisseur plateau", "Régisseur son", "Régisseur lumière", "Régisseur de scène", "Régisseur de chœur"],
|
||
echelons: [2089.85],
|
||
tauxHoraire: 13.78
|
||
},
|
||
son: {
|
||
metiers: ["Régisseur son", "Opérateur son", "Preneur de son", "Technicien console", "Sonorisateur", "Réalisateur son", "Monteur son"],
|
||
echelons: [2089.85],
|
||
tauxHoraire: 13.78
|
||
},
|
||
lumiere: {
|
||
metiers: ["Régisseur lumière", "Chef Électricien", "Pupitreur", "Technicien CAO-PAO", "Opérateur lumière"],
|
||
echelons: [2089.85],
|
||
tauxHoraire: 13.78
|
||
},
|
||
plateau: {
|
||
metiers: ["Chef Machiniste", "Régisseur plateau", "Chef monteur de structures", "Ensemblier de spectacle"],
|
||
echelons: [2089.85],
|
||
tauxHoraire: 13.78
|
||
},
|
||
costumes: {
|
||
metiers: ["Réalisateur coiffure, perruques", "Réalisateur costumes", "Réalisateur maquillages, masque", "Responsable costumes", "Responsable Couture", "Chef habilleur", "Chef Couturier", "Chef atelier de costumes"],
|
||
echelons: [2089.85],
|
||
tauxHoraire: 13.78
|
||
},
|
||
video: {
|
||
metiers: ["Cadreur", "Monteur", "Opérateur image/pupitreur", "Opérateur vidéo", "Régisseur audiovisuel"],
|
||
echelons: [2089.85],
|
||
tauxHoraire: 13.78
|
||
},
|
||
archi: {
|
||
metiers: [],
|
||
echelons: [2089.85],
|
||
tauxHoraire: 13.78
|
||
},
|
||
surete: {
|
||
metiers: ["Chef de la sécurité", "Chef d'équipe site", "Régisseur de site"],
|
||
echelons: [2089.85],
|
||
tauxHoraire: 13.78
|
||
}
|
||
},
|
||
"Employés Qualifiés Groupe 1": {
|
||
regie: {
|
||
metiers: ["Régisseur adjoint", "Technicien de maintenance en tournée et festival", "Technicien de pyrotechnie", "Technicien effets spéciaux", "Artificier", "Technicien groupe électrogène"],
|
||
echelons: [1883.76],
|
||
tauxHoraire: 12.42
|
||
},
|
||
son: {
|
||
metiers: ["Technicien son", "Technicien instruments", "Accordeur"],
|
||
echelons: [1883.76],
|
||
tauxHoraire: 12.42
|
||
},
|
||
lumiere: {
|
||
metiers: ["Électricien", "Technicien lumière"],
|
||
echelons: [1883.76],
|
||
tauxHoraire: 12.42
|
||
},
|
||
plateau: {
|
||
metiers: ["Accessoiriste", "Accessoiriste-constructeur", "Accrocheur - rigger", "Assistant décorateur", "Cintrier", "Constructeur décors et struct.", "Menuisier de spectacle", "Peintre décorateur", "Sculpteur de spectacle", "Serrurier de spectacle", "Staffeur", "Constructeur machiniste", "Tapissier de spectacle", "Machiniste", "Technicien de structures", "Monteur de structures", "Monteur (SCAFF holder) de spectacles", "Nacelliste de spectacles", "Technicien hydraulique"],
|
||
echelons: [1883.76],
|
||
tauxHoraire: 12.42
|
||
},
|
||
costumes: {
|
||
metiers: ["Coiffeur/Posticheur", "Couturier G1", "Maquilleur", "Modiste de spectacles", "Perruquier", "Plumassier de spectacles", "Tailleur", "Costumier (spectacle en tournée)"],
|
||
echelons: [1883.76],
|
||
tauxHoraire: 12.42
|
||
},
|
||
video: {
|
||
metiers: ["Technicien vidéo", "Projectionniste", "Technicien prompteur"],
|
||
echelons: [1883.76],
|
||
tauxHoraire: 12.42
|
||
},
|
||
archi: {
|
||
metiers: ["Technicien visuel site", "Électricien site", "Monteur de structure site", "Serrurier site", "Tapissier site"],
|
||
echelons: [1883.76],
|
||
tauxHoraire: 12.42
|
||
},
|
||
surete: {
|
||
metiers: [],
|
||
echelons: [1883.76],
|
||
tauxHoraire: 12.42
|
||
}
|
||
},
|
||
"Employés Qualifiés Groupe 2": {
|
||
regie: {
|
||
metiers: [],
|
||
echelons: [1800.98],
|
||
tauxHoraire: 11.87
|
||
},
|
||
son: {
|
||
metiers: ["Prompteur/souffleur"],
|
||
echelons: [1800.98],
|
||
tauxHoraire: 11.87
|
||
},
|
||
lumiere: {
|
||
metiers: ["Poursuiteur"],
|
||
echelons: [1800.98],
|
||
tauxHoraire: 11.87
|
||
},
|
||
plateau: {
|
||
metiers: ["Peintre", "Cariste de spectacles", "Technicien de plateau ou brigadier"],
|
||
echelons: [1800.98],
|
||
tauxHoraire: 11.87
|
||
},
|
||
costumes: {
|
||
metiers: ["Habilleur – Couturier", "Habilleur – perruquier", "Couturier"],
|
||
echelons: [1800.98],
|
||
tauxHoraire: 11.87
|
||
},
|
||
video: {
|
||
metiers: [],
|
||
echelons: [1800.98],
|
||
tauxHoraire: 11.87
|
||
},
|
||
archi: {
|
||
metiers: ["Agent de sécurité", "Peintre site", "Cariste Site", "Chauffeur", "Électricien d'entretien"],
|
||
echelons: [1800.98],
|
||
tauxHoraire: 11.87
|
||
},
|
||
surete: {
|
||
metiers: [],
|
||
echelons: [1800.98],
|
||
tauxHoraire: 11.87
|
||
}
|
||
},
|
||
"Employés": {
|
||
regie: {
|
||
metiers: [],
|
||
echelons: [1777.90],
|
||
tauxHoraire: 11.72
|
||
},
|
||
son: {
|
||
metiers: [],
|
||
echelons: [1777.90],
|
||
tauxHoraire: 11.72
|
||
},
|
||
lumiere: {
|
||
metiers: [],
|
||
echelons: [1777.90],
|
||
tauxHoraire: 11.72
|
||
},
|
||
plateau: {
|
||
metiers: ["Garçon de piste", "Fille de piste", "Soigneur d'animaux", "Personnel entretien", "Manutentionnaire"],
|
||
echelons: [1777.90],
|
||
tauxHoraire: 11.72
|
||
},
|
||
costumes: {
|
||
metiers: ["Habilleur – repasseur", "Repasseur-linger-retoucheur"],
|
||
echelons: [1777.90],
|
||
tauxHoraire: 11.72
|
||
},
|
||
video: {
|
||
metiers: [],
|
||
echelons: [1777.90],
|
||
tauxHoraire: 11.72
|
||
},
|
||
archi: {
|
||
metiers: ["Manutentionnaire", "Coursier", "Personnel d'entretien de véhicule"],
|
||
echelons: [1777.90],
|
||
tauxHoraire: 11.72
|
||
},
|
||
surete: {
|
||
metiers: [],
|
||
echelons: [1777.90],
|
||
tauxHoraire: 11.72
|
||
}
|
||
}
|
||
};
|
||
|
||
interface ClausesCommunesContentProps {}
|
||
|
||
export default function ClausesCommunesContent({}: ClausesCommunesContentProps) {
|
||
const [activeTab, setActiveTab] = useState<'admin' | 'technique'>('admin');
|
||
const [searchTerm, setSearchTerm] = useState('');
|
||
|
||
const normalize = (s: string) => {
|
||
return s.toLowerCase()
|
||
.normalize("NFD").replace(/[\u0300-\u036f]/g, "")
|
||
.replace(/œ/g, "oe")
|
||
.replace(/[·''`^~\-_/.,:;()\[\]]/g, " ")
|
||
.replace(/\s+/g, " ")
|
||
.trim();
|
||
};
|
||
|
||
// Fonction de recherche
|
||
const searchInData = (data: any, query: string) => {
|
||
if (!query) return data;
|
||
const nq = normalize(query);
|
||
const filtered: any = {};
|
||
|
||
Object.keys(data).forEach(groupe => {
|
||
const groupData: any = {};
|
||
Object.keys(data[groupe]).forEach(filiere => {
|
||
const metiers = data[groupe][filiere].metiers.filter((m: string) =>
|
||
normalize(m).includes(nq)
|
||
);
|
||
if (metiers.length > 0) {
|
||
groupData[filiere] = {
|
||
metiers,
|
||
echelons: data[groupe][filiere].echelons
|
||
};
|
||
}
|
||
});
|
||
if (Object.keys(groupData).length > 0) {
|
||
filtered[groupe] = groupData;
|
||
}
|
||
});
|
||
|
||
return filtered;
|
||
};
|
||
|
||
const filteredAdminData = searchInData(adminCommercialData, searchTerm);
|
||
const filteredTechData = searchInData(techSpectacleData, searchTerm);
|
||
|
||
return (
|
||
<div className="space-y-6">
|
||
{/* En-tête */}
|
||
<div className="rounded-xl border bg-gradient-to-br from-slate-50 to-slate-100 p-4">
|
||
<h2 className="text-lg font-semibold text-slate-900 mb-1">
|
||
Clauses communes
|
||
</h2>
|
||
<p className="text-sm text-slate-600">
|
||
Grilles de salaires minimaux pour les emplois administratifs, commerciaux et techniques (hors annexes spécifiques)
|
||
</p>
|
||
<p className="text-xs text-slate-500 mt-2">
|
||
En application du Titre VI - Grilles des emplois – Classification – Salaires
|
||
</p>
|
||
<p className="text-xs text-slate-400 mt-1 italic">
|
||
Les professions sont indiquées au masculin mais toutes déclinables au féminin.
|
||
</p>
|
||
</div>
|
||
|
||
{/* Définitions des échelons et temps plein */}
|
||
<div className="grid md:grid-cols-2 gap-4">
|
||
{/* Définition des échelons */}
|
||
<div className="rounded-xl border border-indigo-200 bg-indigo-50 p-4">
|
||
<div className="flex items-start gap-3">
|
||
<div className="flex-shrink-0">
|
||
<div className="w-8 h-8 rounded-lg bg-indigo-100 flex items-center justify-center">
|
||
<svg
|
||
className="w-5 h-5 text-indigo-600"
|
||
fill="none"
|
||
viewBox="0 0 24 24"
|
||
stroke="currentColor"
|
||
>
|
||
<path
|
||
strokeLinecap="round"
|
||
strokeLinejoin="round"
|
||
strokeWidth={2}
|
||
d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
|
||
/>
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
<div className="flex-1 min-w-0">
|
||
<h3 className="text-sm font-semibold text-indigo-900 mb-2">
|
||
Définition des échelons
|
||
</h3>
|
||
<div className="text-xs text-indigo-800 space-y-1">
|
||
<div><span className="font-semibold">Échelon 1 :</span> Moins de 5 ans dans l'entreprise et la fonction</div>
|
||
<div><span className="font-semibold">Échelon 2 :</span> Plus de 5 ans dans l'entreprise et la fonction</div>
|
||
<div><span className="font-semibold">Échelon 3 :</span> Plus de 10 ans dans l'entreprise et la fonction</div>
|
||
<div><span className="font-semibold">Échelon 4 :</span> Plus de 15 ans dans l'entreprise et la fonction</div>
|
||
<div><span className="font-semibold">Échelon 5 :</span> Plus de 20 ans dans l'entreprise et la fonction</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Temps plein */}
|
||
<div className="rounded-xl border border-emerald-200 bg-emerald-50 p-4">
|
||
<div className="flex items-start gap-3">
|
||
<div className="flex-shrink-0">
|
||
<div className="w-8 h-8 rounded-lg bg-emerald-100 flex items-center justify-center">
|
||
<svg
|
||
className="w-5 h-5 text-emerald-600"
|
||
fill="none"
|
||
viewBox="0 0 24 24"
|
||
stroke="currentColor"
|
||
>
|
||
<path
|
||
strokeLinecap="round"
|
||
strokeLinejoin="round"
|
||
strokeWidth={2}
|
||
d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
|
||
/>
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
<div className="flex-1 min-w-0">
|
||
<h3 className="text-sm font-semibold text-emerald-900 mb-2">
|
||
Temps plein
|
||
</h3>
|
||
<p className="text-xs text-emerald-800">
|
||
Les montants indiqués correspondent à un temps plein, soit <span className="font-semibold">151,67 heures mensuelles</span>.
|
||
</p>
|
||
<p className="text-xs text-emerald-700 mt-2">
|
||
Les salaires sont exprimés en brut mensuel minimum.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Recherche globale */}
|
||
<div className="rounded-xl border bg-white p-4">
|
||
<div className="ccnsvp-search">
|
||
<input
|
||
type="search"
|
||
placeholder="Rechercher un métier (ex. comptable, régisseur, secrétaire, électricien...)"
|
||
value={searchTerm}
|
||
onChange={(e) => setSearchTerm(e.target.value)}
|
||
className="flex-1"
|
||
/>
|
||
<span className="ccnsvp-badge">
|
||
{searchTerm ? `${Object.keys(activeTab === 'admin' ? filteredAdminData : filteredTechData).length} groupe(s)` : 'Tous'}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Sous-onglets */}
|
||
<div className="flex gap-3 border-b pb-2">
|
||
<button
|
||
onClick={() => setActiveTab('admin')}
|
||
className={`px-4 py-2 rounded-lg font-semibold text-sm transition-all ${
|
||
activeTab === 'admin'
|
||
? 'bg-gradient-to-r from-indigo-500 to-purple-600 text-white shadow-md'
|
||
: 'bg-slate-100 text-slate-600 hover:bg-slate-200'
|
||
}`}
|
||
>
|
||
Personnel Administratif & Commercial
|
||
</button>
|
||
<button
|
||
onClick={() => setActiveTab('technique')}
|
||
className={`px-4 py-2 rounded-lg font-semibold text-sm transition-all ${
|
||
activeTab === 'technique'
|
||
? 'bg-gradient-to-r from-indigo-500 to-purple-600 text-white shadow-md'
|
||
: 'bg-slate-100 text-slate-600 hover:bg-slate-200'
|
||
}`}
|
||
>
|
||
Personnel Technique Spectacle
|
||
</button>
|
||
</div>
|
||
|
||
{/* Contenu Personnel Administratif & Commercial */}
|
||
{activeTab === 'admin' && (
|
||
<div className="space-y-6">
|
||
{Object.entries(filteredAdminData).map(([groupe, filieres]: [string, any]) => (
|
||
<div key={groupe} 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-indigo-500"></span>
|
||
{groupe}
|
||
</h3>
|
||
|
||
{/* Salaires (échelons communs à toutes les filières) */}
|
||
<div className="mb-4">
|
||
<div className="flex gap-2 flex-wrap">
|
||
{filieres.gestion.echelons.map((montant: number | null, i: number) =>
|
||
montant ? (
|
||
<div key={i} className="bg-gradient-to-br from-indigo-50 to-purple-50 border border-indigo-200 rounded-lg px-4 py-2.5 min-w-[110px]">
|
||
<div className="text-xs text-indigo-600 font-semibold">Échelon {i + 1}</div>
|
||
<div className="text-xl font-bold text-indigo-900">{euro(montant)}</div>
|
||
</div>
|
||
) : null
|
||
)}
|
||
</div>
|
||
</div>
|
||
|
||
{/* Métiers regroupés par filière */}
|
||
<div className="space-y-3">
|
||
{/* Filière Gestion */}
|
||
{filieres.gestion && filieres.gestion.metiers.length > 0 && (
|
||
<div className="border-l-4 border-blue-400 pl-3 py-1">
|
||
<h4 className="text-xs font-semibold text-blue-700 mb-1 flex items-center gap-1">
|
||
📊 Gestion de la Structure
|
||
</h4>
|
||
<p className="text-xs text-slate-600">
|
||
{filieres.gestion.metiers.join(' • ')}
|
||
</p>
|
||
</div>
|
||
)}
|
||
|
||
{/* Filière Création-Production */}
|
||
{filieres.creation && filieres.creation.metiers.length > 0 && (
|
||
<div className="border-l-4 border-purple-400 pl-3 py-1">
|
||
<h4 className="text-xs font-semibold text-purple-700 mb-1 flex items-center gap-1">
|
||
🎭 Création - Production
|
||
</h4>
|
||
<p className="text-xs text-slate-600">
|
||
{filieres.creation.metiers.join(' • ')}
|
||
</p>
|
||
</div>
|
||
)}
|
||
|
||
{/* Filière Accueil-Commercialisation */}
|
||
{filieres.accueil && filieres.accueil.metiers.length > 0 && (
|
||
<div className="border-l-4 border-emerald-400 pl-3 py-1">
|
||
<h4 className="text-xs font-semibold text-emerald-700 mb-1 flex items-center gap-1">
|
||
🎫 Accueil - Commercialisation - Communication
|
||
</h4>
|
||
<p className="text-xs text-slate-600">
|
||
{filieres.accueil.metiers.join(' • ')}
|
||
</p>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
)}
|
||
|
||
{/* Contenu Personnel Technique Spectacle */}
|
||
{activeTab === 'technique' && (
|
||
<div className="space-y-6">
|
||
{Object.entries(filteredTechData).map(([groupe, specialites]: [string, any]) => {
|
||
// Récupérer le premier échelon et taux horaire disponible (tous identiques dans un même groupe)
|
||
const firstSpecialite = Object.values(specialites)[0] as any;
|
||
const montantMensuel = firstSpecialite?.echelons?.[0];
|
||
const tauxHoraire = firstSpecialite?.tauxHoraire;
|
||
|
||
// Vérifier si le groupe est inférieur au SMIC
|
||
const isInferieurSMIC = groupe === "Employés Qualifiés Groupe 2" || groupe === "Employés";
|
||
|
||
return (
|
||
<div key={groupe} className="rounded-xl border bg-white p-5">
|
||
<div className="flex items-start justify-between mb-4">
|
||
<h3 className="text-base font-bold text-slate-900 flex items-center gap-2">
|
||
<span className="inline-block w-2 h-2 rounded-full bg-amber-500"></span>
|
||
{groupe}
|
||
</h3>
|
||
|
||
{/* Montants en haut à droite */}
|
||
<div className="flex items-center gap-3">
|
||
{/* Alerte SMIC discrète */}
|
||
{isInferieurSMIC && (
|
||
<div className="bg-orange-50 border border-orange-200 rounded-lg px-3 py-2 max-w-xs">
|
||
<div className="flex items-start gap-2">
|
||
<svg className="w-4 h-4 text-orange-600 flex-shrink-0 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
|
||
</svg>
|
||
<div>
|
||
<p className="text-xs font-semibold text-orange-900">SMIC applicable</p>
|
||
<p className="text-xs text-orange-700">11,88€/h • 1 801,84€/mois</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{montantMensuel && (
|
||
<div className="bg-gradient-to-br from-slate-50 to-slate-100 border border-slate-200 rounded-lg px-4 py-2">
|
||
<div className="text-xl font-bold text-slate-900">{euro(montantMensuel)}</div>
|
||
{tauxHoraire && (
|
||
<div className="text-xs text-slate-600 text-center">{euro(tauxHoraire)}/h</div>
|
||
)}
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
|
||
<div className="grid md:grid-cols-2 gap-4">
|
||
{/* Régie */}
|
||
{specialites.regie && specialites.regie.metiers.length > 0 && (
|
||
<div className="border-l-4 border-amber-400 pl-3 py-1">
|
||
<h4 className="text-xs font-semibold text-amber-700 mb-1 flex items-center gap-1">
|
||
🎛️ Régie
|
||
</h4>
|
||
<p className="text-xs text-slate-600">
|
||
{specialites.regie.metiers.join(' • ')}
|
||
</p>
|
||
</div>
|
||
)}
|
||
|
||
{/* Son */}
|
||
{specialites.son && specialites.son.metiers.length > 0 && (
|
||
<div className="border-l-4 border-blue-400 pl-3 py-1">
|
||
<h4 className="text-xs font-semibold text-blue-700 mb-1 flex items-center gap-1">
|
||
🔊 Son
|
||
</h4>
|
||
<p className="text-xs text-slate-600">
|
||
{specialites.son.metiers.join(' • ')}
|
||
</p>
|
||
</div>
|
||
)}
|
||
|
||
{/* Lumière */}
|
||
{specialites.lumiere && specialites.lumiere.metiers.length > 0 && (
|
||
<div className="border-l-4 border-yellow-400 pl-3 py-1">
|
||
<h4 className="text-xs font-semibold text-yellow-700 mb-1 flex items-center gap-1">
|
||
💡 Lumière
|
||
</h4>
|
||
<p className="text-xs text-slate-600">
|
||
{specialites.lumiere.metiers.join(' • ')}
|
||
</p>
|
||
</div>
|
||
)}
|
||
|
||
{/* Plateau-Perche */}
|
||
{specialites.plateau && specialites.plateau.metiers.length > 0 && (
|
||
<div className="border-l-4 border-purple-400 pl-3 py-1">
|
||
<h4 className="text-xs font-semibold text-purple-700 mb-1 flex items-center gap-1">
|
||
🎬 Plateau-Perche
|
||
</h4>
|
||
<p className="text-xs text-slate-600">
|
||
{specialites.plateau.metiers.join(' • ')}
|
||
</p>
|
||
</div>
|
||
)}
|
||
|
||
{/* Costumes */}
|
||
{specialites.costumes && specialites.costumes.metiers.length > 0 && (
|
||
<div className="border-l-4 border-pink-400 pl-3 py-1">
|
||
<h4 className="text-xs font-semibold text-pink-700 mb-1 flex items-center gap-1">
|
||
👗 Costumes
|
||
</h4>
|
||
<p className="text-xs text-slate-600">
|
||
{specialites.costumes.metiers.join(' • ')}
|
||
</p>
|
||
</div>
|
||
)}
|
||
|
||
{/* Vidéo-Images */}
|
||
{specialites.video && specialites.video.metiers.length > 0 && (
|
||
<div className="border-l-4 border-cyan-400 pl-3 py-1">
|
||
<h4 className="text-xs font-semibold text-cyan-700 mb-1 flex items-center gap-1">
|
||
📹 Vidéo-Images
|
||
</h4>
|
||
<p className="text-xs text-slate-600">
|
||
{specialites.video.metiers.join(' • ')}
|
||
</p>
|
||
</div>
|
||
)}
|
||
|
||
{/* Architecture du Spectacle */}
|
||
{specialites.archi && specialites.archi.metiers.length > 0 && (
|
||
<div className="border-l-4 border-indigo-400 pl-3 py-1">
|
||
<h4 className="text-xs font-semibold text-indigo-700 mb-1 flex items-center gap-1">
|
||
🏗️ Architecture du Spectacle
|
||
</h4>
|
||
<p className="text-xs text-slate-600">
|
||
{specialites.archi.metiers.join(' • ')}
|
||
</p>
|
||
</div>
|
||
)}
|
||
|
||
{/* Sûreté/Sécurité */}
|
||
{specialites.surete && specialites.surete.metiers.length > 0 && (
|
||
<div className="border-l-4 border-red-400 pl-3 py-1">
|
||
<h4 className="text-xs font-semibold text-red-700 mb-1 flex items-center gap-1">
|
||
🛡️ Sûreté / Sécurité
|
||
</h4>
|
||
<p className="text-xs text-slate-600">
|
||
{specialites.surete.metiers.join(' • ')}
|
||
</p>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
);
|
||
})}
|
||
</div>
|
||
)}
|
||
</div>
|
||
);
|
||
}
|