87 lines
4.2 KiB
TypeScript
87 lines
4.2 KiB
TypeScript
"use client";
|
||
|
||
import React from 'react';
|
||
import { Clapperboard, Info } from 'lucide-react';
|
||
|
||
function euro(value: number): string {
|
||
return new Intl.NumberFormat('fr-FR', {
|
||
style: 'currency',
|
||
currency: 'EUR',
|
||
}).format(value);
|
||
}
|
||
|
||
export default function FictionRealisateur() {
|
||
const lines = [
|
||
{ label: 'Journalier', duree: '9 heures', montant: 300.07 },
|
||
{ label: 'Hebdomadaire', duree: '45 heures', montant: 1500.96 },
|
||
{ label: 'Mensuel', duree: '45 heures / semaine', montant: 5250.04 },
|
||
];
|
||
|
||
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>
|
||
);
|
||
|
||
return (
|
||
<div className="space-y-6">
|
||
{/* En-tête */}
|
||
<div 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-orange-500 to-rose-600 flex items-center justify-center">
|
||
<Clapperboard className="w-6 h-6 text-white" />
|
||
</div>
|
||
<div className="flex-1 min-w-0">
|
||
<div className="flex items-center gap-2 mb-1">
|
||
<h2 className="text-xl font-semibold text-slate-900">Fiction - Réalisateur</h2>
|
||
<span className="inline-flex items-center px-2 py-0.5 rounded-full text-[11px] font-semibold bg-gradient-to-r from-orange-500 to-rose-600 text-white">
|
||
Filière G — Hors niveau
|
||
</span>
|
||
</div>
|
||
<p className="text-sm text-slate-600">
|
||
Annexe A de l'accord du 15 septembre 2023 relatif aux réalisateurs — applicable au 1er novembre 2023 (non étendu)
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Tableau */}
|
||
<div className="rounded-2xl border overflow-hidden">
|
||
<div className="grid grid-cols-4 text-sm font-semibold text-white">
|
||
<div className="col-span-1 bg-sky-600 px-4 py-3">Salaire minimum</div>
|
||
<div className="col-span-1 bg-sky-600 px-4 py-3">Durée du travail</div>
|
||
<div className="col-span-1 bg-sky-600 px-4 py-3">Montant minimum garanti</div>
|
||
<div className="col-span-1 bg-sky-600 px-4 py-3">Applicable si</div>
|
||
</div>
|
||
{lines.map((l, idx) => (
|
||
<div key={idx} className={`grid grid-cols-4 text-sm ${idx % 2 === 1 ? 'bg-slate-50' : 'bg-white'}`}>
|
||
<div className="col-span-1 border-t px-4 py-3 font-semibold text-slate-900">{l.label}</div>
|
||
<div className="col-span-1 border-t px-4 py-3 text-slate-700">{l.duree}</div>
|
||
<div className="col-span-1 border-t px-4 py-3 font-semibold text-slate-900">{euro(l.montant)}</div>
|
||
<div className="col-span-1 border-t px-4 py-3 text-slate-700">
|
||
{l.label === 'Journalier' && (<span>Engagement < 5 jours sur une même semaine calendaire</span>)}
|
||
{l.label === 'Hebdomadaire' && (<span>Engagement ≥ 5 jours sur la même semaine calendaire</span>)}
|
||
{l.label === 'Mensuel' && (<span>Engagement ≥ 13 semaines réparties sur 4 mois consécutifs</span>)}
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
|
||
{/* Notes */}
|
||
<div className="rounded-2xl border bg-white p-4 space-y-3">
|
||
<InfoRow>
|
||
Depuis la loi du 7 juillet 2016, les réalisateurs relèvent du statut d’artistes du spectacle (art. L7121-2 du Code du travail) et de l’annexe X du règlement général d’assurance chômage.
|
||
</InfoRow>
|
||
<InfoRow>
|
||
La rémunération peut être établie en cachets ou en heures. Les montants indiqués sont des minima garantis, même si la durée effective n’atteint pas 9h ou 45h.
|
||
</InfoRow>
|
||
<InfoRow>
|
||
L’accord du 15 septembre 2023 précise la fonction et les conditions d’engagement des réalisateurs. L’annexe A fixe les minima spécifiques aux réalisateurs de fictions audiovisuelles. Application à compter du 1er novembre 2023 (non étendu).
|
||
</InfoRow>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|