367 lines
19 KiB
TypeScript
367 lines
19 KiB
TypeScript
"use client";
|
|
|
|
import React, { useState } from 'react';
|
|
import { Music, Music2, Guitar, Piano } from 'lucide-react';
|
|
|
|
const euro = (n: number) => new Intl.NumberFormat('fr-FR', {
|
|
minimumFractionDigits: Number.isInteger(n) ? 0 : 2,
|
|
maximumFractionDigits: 2
|
|
}).format(n) + '€';
|
|
|
|
export default function ArtistesMusiciensContent() {
|
|
const [activeSection, setActiveSection] = useState<'orchestres' | 'lyriques' | 'actuelles' | 'chambre'>('orchestres');
|
|
|
|
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">
|
|
Artistes musiciens
|
|
</h2>
|
|
<p className="text-sm text-blue-700">
|
|
Minima conventionnels pour les artistes musiciens selon le type d'activité
|
|
</p>
|
|
<p className="text-xs text-blue-600 mt-2">
|
|
Grille de salaires applicable au 1er juin 2024
|
|
</p>
|
|
</div>
|
|
|
|
{/* Navigation */}
|
|
<div className="flex gap-3 border-b pb-2 flex-wrap">
|
|
<button
|
|
onClick={() => setActiveSection('orchestres')}
|
|
className={`px-4 py-2 rounded-lg font-semibold text-sm transition-all ${
|
|
activeSection === 'orchestres'
|
|
? 'bg-gradient-to-r from-blue-500 to-cyan-600 text-white shadow-md'
|
|
: 'bg-slate-100 text-slate-600 hover:bg-slate-200'
|
|
}`}
|
|
>
|
|
<Music className="w-4 h-4 inline-block mr-1" />
|
|
Orchestres permanents
|
|
</button>
|
|
<button
|
|
onClick={() => setActiveSection('lyriques')}
|
|
className={`px-4 py-2 rounded-lg font-semibold text-sm transition-all ${
|
|
activeSection === 'lyriques'
|
|
? 'bg-gradient-to-r from-blue-500 to-cyan-600 text-white shadow-md'
|
|
: 'bg-slate-100 text-slate-600 hover:bg-slate-200'
|
|
}`}
|
|
>
|
|
<Music2 className="w-4 h-4 inline-block mr-1" />
|
|
Lyriques
|
|
</button>
|
|
<button
|
|
onClick={() => setActiveSection('actuelles')}
|
|
className={`px-4 py-2 rounded-lg font-semibold text-sm transition-all ${
|
|
activeSection === 'actuelles'
|
|
? 'bg-gradient-to-r from-blue-500 to-cyan-600 text-white shadow-md'
|
|
: 'bg-slate-100 text-slate-600 hover:bg-slate-200'
|
|
}`}
|
|
>
|
|
<Guitar className="w-4 h-4 inline-block mr-1" />
|
|
Musiques actuelles
|
|
</button>
|
|
<button
|
|
onClick={() => setActiveSection('chambre')}
|
|
className={`px-4 py-2 rounded-lg font-semibold text-sm transition-all ${
|
|
activeSection === 'chambre'
|
|
? 'bg-gradient-to-r from-blue-500 to-cyan-600 text-white shadow-md'
|
|
: 'bg-slate-100 text-slate-600 hover:bg-slate-200'
|
|
}`}
|
|
>
|
|
<Piano className="w-4 h-4 inline-block mr-1" />
|
|
Engagés au sein d'autres entreprises
|
|
</button>
|
|
</div>
|
|
|
|
{/* Section Orchestres permanents */}
|
|
{activeSection === 'orchestres' && (
|
|
<div className="space-y-6">
|
|
{/* Minima mensuels orchestres CDI */}
|
|
<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>
|
|
Musiciens d'orchestres permanents en CDI
|
|
</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">Catégorie</th>
|
|
<th className="text-center p-3 text-blue-900 font-bold border border-blue-200 bg-blue-100">Minimum brut mensuel</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr className="hover:bg-blue-50/30">
|
|
<td className="p-3 border border-blue-200 font-semibold">Tuttiste</td>
|
|
<td className="text-center p-3 font-bold text-blue-900 border border-blue-200 bg-blue-50">{euro(3250.97)}</td>
|
|
</tr>
|
|
<tr className="hover:bg-blue-50/30">
|
|
<td className="p-3 border border-blue-200 font-semibold">Soliste</td>
|
|
<td className="text-center p-3 font-bold text-blue-900 border border-blue-200 bg-blue-50">{euro(3364.52)}</td>
|
|
</tr>
|
|
<tr className="hover:bg-blue-50/30">
|
|
<td className="p-3 border border-blue-200 font-semibold">Chef de pupitre</td>
|
|
<td className="text-center p-3 font-bold text-blue-900 border border-blue-200 bg-blue-50">{euro(3580.29)}</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<div className="mt-4 text-xs text-slate-600 bg-blue-50 border border-blue-200 rounded-lg p-3">
|
|
<span className="font-semibold">Note :</span> Ces minima s'articulent avec les catégories définies dans les orchestres par accord d'entreprise.
|
|
</div>
|
|
</div>
|
|
|
|
{/* Cachet service */}
|
|
<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>
|
|
Cachet minimum par service
|
|
</h3>
|
|
|
|
<div className="bg-cyan-50 border border-cyan-200 rounded-lg p-4 text-center">
|
|
<div className="text-sm text-cyan-700 mb-2">Service indivisible de 3 heures</div>
|
|
<div className="text-3xl font-bold text-cyan-900">{euro(116.34)}</div>
|
|
<div className="text-xs text-cyan-600 mt-2">Au-delà, rémunération au pro rata temporis</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Section Lyriques */}
|
|
{activeSection === 'lyriques' && (
|
|
<div className="space-y-6">
|
|
{/* Minima mensuels */}
|
|
<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>
|
|
Minima mensuels - Musiciens lyriques
|
|
</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">Type de contrat</th>
|
|
<th className="text-center p-3 text-purple-900 font-bold border border-purple-200 bg-purple-100">Minimum brut mensuel</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr className="hover:bg-purple-50/30">
|
|
<td className="p-3 border border-purple-200 font-semibold">CDI</td>
|
|
<td className="text-center p-3 font-bold text-purple-900 border border-purple-200 bg-purple-50">{euro(2859.19)}</td>
|
|
</tr>
|
|
<tr className="hover:bg-purple-50/30">
|
|
<td className="p-3 border border-purple-200">CDD droit commun > 1 mois</td>
|
|
<td className="text-center p-3 font-semibold border border-purple-200">{euro(2919.06)}</td>
|
|
</tr>
|
|
<tr className="hover:bg-purple-50/30">
|
|
<td className="p-3 border border-purple-200">CDD d'usage > 1 mois</td>
|
|
<td className="text-center p-3 font-semibold border border-purple-200">{euro(3077.15)}</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Cachets et services */}
|
|
<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>
|
|
Cachets et services
|
|
</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">Type de prestation</th>
|
|
<th className="text-center p-3 text-fuchsia-900 font-bold border border-fuchsia-200 bg-fuchsia-100">Montant</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr className="hover:bg-fuchsia-50/30">
|
|
<td className="p-3 border border-fuchsia-200">Journée de répétition (2 services / 6h)</td>
|
|
<td className="text-center p-3 font-bold text-fuchsia-900 border border-fuchsia-200 bg-fuchsia-50">{euro(164.29)}</td>
|
|
</tr>
|
|
<tr className="hover:bg-fuchsia-50/30">
|
|
<td className="p-3 border border-fuchsia-200">Garantie journalière si service isolé</td>
|
|
<td className="text-center p-3 font-semibold border border-fuchsia-200">{euro(116.34)}</td>
|
|
</tr>
|
|
<tr className="hover:bg-fuchsia-50/30">
|
|
<td className="p-3 border border-fuchsia-200 font-semibold">Représentation (cas général)</td>
|
|
<td className="text-center p-3 font-bold text-fuchsia-900 border border-fuchsia-200 bg-fuchsia-50">{euro(164.29)}</td>
|
|
</tr>
|
|
<tr className="hover:bg-fuchsia-50/30">
|
|
<td className="p-3 border border-fuchsia-200">Représentation (7 ou + par 15 jours)</td>
|
|
<td className="text-center p-3 font-semibold border border-fuchsia-200">{euro(144.57)}</td>
|
|
</tr>
|
|
<tr className="hover:bg-fuchsia-50/30">
|
|
<td className="p-3 border border-fuchsia-200">Journée mixte (répétition + représentation)</td>
|
|
<td className="text-center p-3 font-bold text-fuchsia-900 border border-fuchsia-200 bg-fuchsia-50">{euro(251.62)}</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Section Musiques actuelles */}
|
|
{activeSection === 'actuelles' && (
|
|
<div className="space-y-6">
|
|
{/* Minima mensuels */}
|
|
<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>
|
|
Minima mensuels - Musiques actuelles
|
|
</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">Type de contrat</th>
|
|
<th className="text-center p-3 text-pink-900 font-bold border border-pink-200 bg-pink-100">Minimum brut mensuel</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr className="hover:bg-pink-50/30">
|
|
<td className="p-3 border border-pink-200 font-semibold">CDI</td>
|
|
<td className="text-center p-3 font-bold text-pink-900 border border-pink-200 bg-pink-50">{euro(2814.03)}</td>
|
|
</tr>
|
|
<tr className="hover:bg-pink-50/30">
|
|
<td className="p-3 border border-pink-200">CDD droit commun > 1 mois</td>
|
|
<td className="text-center p-3 font-semibold border border-pink-200">{euro(2919.06)}</td>
|
|
</tr>
|
|
<tr className="hover:bg-pink-50/30">
|
|
<td className="p-3 border border-pink-200">CDD d'usage > 1 mois</td>
|
|
<td className="text-center p-3 font-semibold border border-pink-200">{euro(3077.15)}</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Cachets répétitions et représentations */}
|
|
<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>
|
|
Cachets répétitions et représentations
|
|
</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">Type de prestation</th>
|
|
<th className="text-center p-3 text-rose-900 font-bold border border-rose-200 bg-rose-100">Montant</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr className="hover:bg-rose-50/30">
|
|
<td className="p-3 border border-rose-200">Journée de répétition (2 services / 2 cachets)</td>
|
|
<td className="text-center p-3 font-bold text-rose-900 border border-rose-200 bg-rose-50">{euro(116.45)}</td>
|
|
</tr>
|
|
<tr className="hover:bg-rose-50/30">
|
|
<td className="p-3 border border-rose-200">Garantie journalière si service isolé</td>
|
|
<td className="text-center p-3 font-semibold border border-rose-200">{euro(87.33)}</td>
|
|
</tr>
|
|
<tr className="hover:bg-rose-50/30">
|
|
<td className="p-3 border border-rose-200 font-semibold">Représentation (cas général)</td>
|
|
<td className="text-center p-3 font-bold text-rose-900 border border-rose-200 bg-rose-50">{euro(164.29)}</td>
|
|
</tr>
|
|
<tr className="hover:bg-rose-50/30">
|
|
<td className="p-3 border border-rose-200">Représentation (7 ou + par 15 jours)</td>
|
|
<td className="text-center p-3 font-semibold border border-rose-200">{euro(144.57)}</td>
|
|
</tr>
|
|
<tr className="hover:bg-rose-50/30">
|
|
<td className="p-3 border border-rose-200">Salles musiques actuelles < 300 places</td>
|
|
<td className="text-center p-3 font-semibold border border-rose-200">{euro(116.34)}</td>
|
|
</tr>
|
|
<tr className="hover:bg-rose-50/30">
|
|
<td className="p-3 border border-rose-200">Première partie</td>
|
|
<td className="text-center p-3 font-semibold border border-rose-200">{euro(116.34)}</td>
|
|
</tr>
|
|
<tr className="hover:bg-rose-50/30">
|
|
<td className="p-3 border border-rose-200">Plateau découverte</td>
|
|
<td className="text-center p-3 font-semibold border border-rose-200">{euro(116.34)}</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Section Engagés au sein d'autres entreprises */}
|
|
{activeSection === 'chambre' && (
|
|
<div className="space-y-6">
|
|
{/* Minima mensuels */}
|
|
<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>
|
|
Minima mensuels
|
|
</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">Type de contrat</th>
|
|
<th className="text-center p-3 text-indigo-900 font-bold border border-indigo-200 bg-indigo-100">Minimum brut mensuel</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr className="hover:bg-indigo-50/30">
|
|
<td className="p-3 border border-indigo-200 font-semibold">CDI</td>
|
|
<td className="text-center p-3 font-bold text-indigo-900 border border-indigo-200 bg-indigo-50">{euro(2814.14)}</td>
|
|
</tr>
|
|
<tr className="hover:bg-indigo-50/30">
|
|
<td className="p-3 border border-indigo-200">CDD droit commun > 1 mois</td>
|
|
<td className="text-center p-3 font-semibold border border-indigo-200">{euro(2919.06)}</td>
|
|
</tr>
|
|
<tr className="hover:bg-indigo-50/30">
|
|
<td className="p-3 border border-indigo-200">CDD d'usage > 1 mois</td>
|
|
<td className="text-center p-3 font-semibold border border-indigo-200">{euro(3077.15)}</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Services */}
|
|
<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>
|
|
Services de répétition et représentation
|
|
</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">Type de prestation</th>
|
|
<th className="text-center p-3 text-violet-900 font-bold border border-violet-200 bg-violet-100">Montant</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr className="hover:bg-violet-50/30">
|
|
<td className="p-3 border border-violet-200 font-semibold">Un service de répétition (3 heures)</td>
|
|
<td className="text-center p-3 font-bold text-violet-900 border border-violet-200 bg-violet-50">{euro(116.34)}</td>
|
|
</tr>
|
|
<tr className="hover:bg-violet-50/30">
|
|
<td className="p-3 border border-violet-200 font-semibold">Représentation</td>
|
|
<td className="text-center p-3 font-bold text-violet-900 border border-violet-200 bg-violet-50">{euro(116.34)}</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|