109 lines
5.1 KiB
TypeScript
109 lines
5.1 KiB
TypeScript
"use client";
|
|
|
|
import React from 'react';
|
|
import { Music, Info } from 'lucide-react';
|
|
|
|
function euro(n: number) {
|
|
return new Intl.NumberFormat('fr-FR', { style: 'currency', currency: 'EUR' }).format(n);
|
|
}
|
|
|
|
const MUSICIENS_CACHETS = [
|
|
{ def: 'Cachet initial (avec un mode) pour un service de 3 heures', montant: 106.05 },
|
|
{ def: 'Cachet initial (avec un mode) pour un service de 4 heures', montant: 137.87 },
|
|
{ def: 'Cachet initial (avec un mode) pour un engagement à la journée (isolée, enregistrement)', montant: 228.02 },
|
|
{ def: 'Cachet initial (avec un mode) pour un engagement à la journée (3 journées isolées ou 2 journées consécutives sur 7 jours)', montant: 217.41 },
|
|
{ def: 'Cachet initial (avec un mode) pour un engagement à la journée (5 journées isolées ou 3 journées consécutives sur 7 jours)', montant: 190.89 },
|
|
];
|
|
|
|
const MUSICIENS_ABATTEMENTS = [
|
|
{ seuil: '+ 10 musiciens', value: '-10%' },
|
|
{ seuil: '+ 20 musiciens', value: '-15%' },
|
|
{ seuil: '+ 30 musiciens', value: '-20%' },
|
|
{ seuil: '+ 40 musiciens', value: '-25%' },
|
|
];
|
|
|
|
const MUSICIENS_REPETITIONS = [
|
|
{ def: 'Cachet pour un service de trois heures', montant: 63.63 },
|
|
{ def: 'Cachet pour un double service de trois heures', montant: 106.05 },
|
|
];
|
|
|
|
const InfoRow: React.FC<{ children: React.ReactNode }> = ({ children }) => (
|
|
<div className="flex items-start gap-2">
|
|
<div className="mt-0.5 flex-shrink-0 w-5 h-5 rounded-full bg-slate-100 border border-slate-200 flex items-center justify-center">
|
|
<Info className="w-3.5 h-3.5 text-slate-600" aria-hidden="true" />
|
|
</div>
|
|
<p className="text-sm text-slate-600">{children}</p>
|
|
</div>
|
|
);
|
|
|
|
export default function ArtistesMusiciens() {
|
|
return (
|
|
<div className="space-y-6">
|
|
{/* En-tête */}
|
|
<section className="rounded-2xl border bg-white p-6">
|
|
<div className="flex items-start gap-3">
|
|
<div className="flex-shrink-0 w-12 h-12 rounded-xl bg-gradient-to-br from-fuchsia-500 to-pink-600 flex items-center justify-center">
|
|
<Music className="w-6 h-6 text-white" />
|
|
</div>
|
|
<div className="flex-1 min-w-0">
|
|
<h2 className="text-xl font-semibold text-slate-900">Artistes Musiciens</h2>
|
|
<p className="text-sm text-slate-600">Salaires applicables au 1er janvier 2025 (Avenant n°20 du 29 novembre 2024, non étendu)</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Cachets minima */}
|
|
<section className="rounded-2xl border overflow-hidden">
|
|
<div className="grid grid-cols-2 text-sm font-semibold text-white">
|
|
<div className="bg-fuchsia-600 px-4 py-3">Définition du cachet</div>
|
|
<div className="bg-fuchsia-600 px-4 py-3">Cachets minima</div>
|
|
</div>
|
|
{MUSICIENS_CACHETS.map((row, idx) => (
|
|
<div key={idx} className={`grid grid-cols-2 text-sm ${idx % 2 === 1 ? 'bg-slate-50' : 'bg-white'}`}>
|
|
<div className="border-t px-4 py-3 text-slate-900">{row.def}</div>
|
|
<div className="border-t px-4 py-3 font-semibold text-slate-900">{euro(row.montant)}</div>
|
|
</div>
|
|
))}
|
|
</section>
|
|
|
|
{/* Abattement pour ensemble */}
|
|
<section className="rounded-2xl border bg-white p-4">
|
|
<div className="grid md:grid-cols-2 gap-4 items-start">
|
|
<div>
|
|
<h4 className="text-sm font-semibold text-slate-900 mb-1">Abattement pour ensemble</h4>
|
|
<p className="text-sm text-slate-600">
|
|
En cas d'interprétation d'ensemble, abattement appliqué sur les cachets définis ci-avant en fonction du nombre de musiciens participant à l'ensemble.
|
|
</p>
|
|
</div>
|
|
<div className="rounded-xl border overflow-hidden">
|
|
<div className="grid grid-cols-2 text-xs font-semibold text-white">
|
|
<div className="bg-fuchsia-600 px-3 py-2">Seuil</div>
|
|
<div className="bg-fuchsia-600 px-3 py-2">Abattement</div>
|
|
</div>
|
|
{MUSICIENS_ABATTEMENTS.map((a, i) => (
|
|
<div key={i} className={`grid grid-cols-2 text-sm ${i % 2 === 1 ? 'bg-slate-50' : 'bg-white'}`}>
|
|
<div className="border-t px-3 py-2 text-slate-900">{a.seuil}</div>
|
|
<div className="border-t px-3 py-2 text-slate-900">{a.value}</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Cachets répétitions */}
|
|
<section className="rounded-2xl border overflow-hidden">
|
|
<div className="bg-slate-50 px-4 py-2 text-sm font-semibold text-slate-800">Cachet pour répétitions</div>
|
|
<div className="grid grid-cols-2 text-sm font-semibold text-white">
|
|
<div className="bg-fuchsia-600 px-4 py-3">Définition</div>
|
|
<div className="bg-fuchsia-600 px-4 py-3">Cachet</div>
|
|
</div>
|
|
{MUSICIENS_REPETITIONS.map((r, idx) => (
|
|
<div key={idx} className={`grid grid-cols-2 text-sm ${idx % 2 === 1 ? 'bg-slate-50' : 'bg-white'}`}>
|
|
<div className="border-t px-4 py-3 text-slate-900">{r.def}</div>
|
|
<div className="border-t px-4 py-3 font-semibold text-slate-900">{euro(r.montant)}</div>
|
|
</div>
|
|
))}
|
|
</section>
|
|
</div>
|
|
);
|
|
}
|