423 lines
15 KiB
TypeScript
423 lines
15 KiB
TypeScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
import { useRouter } from "next/navigation";
|
|
import { ArrowLeft, Loader2, ChevronLeft, ChevronRight } from "lucide-react";
|
|
import { usePageTitle } from "@/hooks/usePageTitle";
|
|
import { useState, useMemo } from "react";
|
|
|
|
// Types
|
|
type SalarieDetail = {
|
|
matricule: string;
|
|
civilite?: string;
|
|
prenom?: string;
|
|
nom_naissance?: string;
|
|
nom_usage?: string;
|
|
pseudo?: string;
|
|
date_naissance?: string;
|
|
lieu_naissance?: string;
|
|
email?: string;
|
|
telephone?: string;
|
|
adresse?: string;
|
|
nir?: string | number;
|
|
conges_spectacles?: string;
|
|
iban?: string;
|
|
bic?: string;
|
|
transat_connecte?: boolean;
|
|
justificatifs?: string;
|
|
mineur_moins_16?: boolean;
|
|
resident_fr?: boolean;
|
|
rib_pdf?: string | null;
|
|
};
|
|
|
|
type ContratListItem = {
|
|
id: string;
|
|
reference: string;
|
|
profession?: string;
|
|
date_debut?: string;
|
|
date_fin?: string;
|
|
is_multi_mois?: boolean;
|
|
regime?: "CDDU_MONO" | "CDDU_MULTI" | "RG" | string;
|
|
};
|
|
|
|
// Données fictives du salarié de démonstration
|
|
const DEMO_SALARIE: SalarieDetail = {
|
|
matricule: "DEMO-SAL-2024",
|
|
civilite: "Mme",
|
|
prenom: "Marie",
|
|
nom_naissance: "DUPONT",
|
|
nom_usage: "MARTIN",
|
|
pseudo: "Marie M.",
|
|
date_naissance: "1990-05-15",
|
|
lieu_naissance: "Paris (75)",
|
|
email: "marie.martin@demo.fr",
|
|
telephone: "06 12 34 56 78",
|
|
adresse: "42 Rue de la Démo, 75001 Paris",
|
|
nir: "2 90 05 75 101 234 56",
|
|
conges_spectacles: "1234567890",
|
|
iban: "FR76 XXXX XXXX XXXX XXXX XXXX XXX",
|
|
bic: "XXXXFRXX",
|
|
transat_connecte: true,
|
|
justificatifs: "Tous les documents fournis",
|
|
mineur_moins_16: false,
|
|
resident_fr: true,
|
|
rib_pdf: null
|
|
};
|
|
|
|
// Contrats fictifs du salarié
|
|
const DEMO_CONTRATS_ALL: ContratListItem[] = [
|
|
{
|
|
id: "demo-cont-001",
|
|
reference: "DEMO-2024-001",
|
|
profession: "04201 - Comédien",
|
|
date_debut: "2024-01-15",
|
|
date_fin: "2024-06-30",
|
|
is_multi_mois: true,
|
|
regime: "CDDU_MULTI"
|
|
},
|
|
{
|
|
id: "demo-cont-002",
|
|
reference: "DEMO-2024-002",
|
|
profession: "04201 - Comédien",
|
|
date_debut: "2024-07-05",
|
|
date_fin: "2024-07-28",
|
|
is_multi_mois: false,
|
|
regime: "CDDU_MONO"
|
|
},
|
|
{
|
|
id: "demo-cont-003",
|
|
reference: "DEMO-2024-003",
|
|
profession: "04205 - Metteur en scène",
|
|
date_debut: "2024-09-15",
|
|
date_fin: "2024-12-31",
|
|
is_multi_mois: true,
|
|
regime: "CDDU_MULTI"
|
|
},
|
|
{
|
|
id: "demo-cont-004",
|
|
reference: "DEMO-2023-015",
|
|
profession: "04201 - Comédien",
|
|
date_debut: "2023-09-01",
|
|
date_fin: "2023-12-20",
|
|
is_multi_mois: true,
|
|
regime: "CDDU_MULTI"
|
|
},
|
|
{
|
|
id: "demo-cont-005",
|
|
reference: "DEMO-2023-008",
|
|
profession: "04220 - Danseur",
|
|
date_debut: "2023-03-10",
|
|
date_fin: "2023-05-30",
|
|
is_multi_mois: false,
|
|
regime: "CDDU_MONO"
|
|
}
|
|
];
|
|
|
|
// Helper pour formater les valeurs
|
|
function formatValue(value: any): string {
|
|
if (value === null || value === undefined) return "—";
|
|
if (value === "n/a" || value === "N/A" || value === "") return "—";
|
|
return String(value);
|
|
}
|
|
|
|
// Composant Field pour l'affichage des données
|
|
function Field({ label, value }: { label: string; value: string }) {
|
|
return (
|
|
<div className="grid grid-cols-1 sm:grid-cols-[160px_1fr] gap-2 py-2">
|
|
<div className="text-sm text-slate-500">{label}</div>
|
|
<div className="text-sm break-words">{value}</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// Composant Section
|
|
function Section({ title, children }: { title: string; children: React.ReactNode }) {
|
|
return (
|
|
<section className="rounded-2xl border bg-white">
|
|
<div className="px-4 py-3 border-b font-medium text-slate-700 bg-slate-50/60">
|
|
{title}
|
|
</div>
|
|
<div className="p-4">{children}</div>
|
|
</section>
|
|
);
|
|
}
|
|
|
|
// Fonction pour déterminer le lien vers un contrat
|
|
function hrefContrat(c: ContratListItem) {
|
|
// En mode démo, tous les contrats redirigent vers la page demo
|
|
return `/contrats/demo`;
|
|
}
|
|
|
|
// Fonction pour formater les dates
|
|
function formatDateFR(iso?: string) {
|
|
if (!iso) return "—";
|
|
const d = new Date(iso);
|
|
if (isNaN(d.getTime())) return "—";
|
|
return d.toLocaleDateString("fr-FR", { day: "2-digit", month: "2-digit", year: "numeric" });
|
|
}
|
|
|
|
export default function SalarieDemoPage() {
|
|
const router = useRouter();
|
|
const salarie = DEMO_SALARIE;
|
|
|
|
const now = new Date();
|
|
const [year, setYear] = useState<number>(now.getFullYear());
|
|
const [page, setPage] = useState<number>(1);
|
|
const limit = 20;
|
|
|
|
// Options d'années (N → N-6)
|
|
const yearOptions = useMemo(() => {
|
|
const base = now.getFullYear();
|
|
return Array.from({ length: 7 }, (_, i) => base - i);
|
|
}, [now]);
|
|
|
|
// Filtrer les contrats par année
|
|
const contrats = useMemo(() => {
|
|
return DEMO_CONTRATS_ALL.filter(contrat => {
|
|
if (!contrat.date_debut) return true;
|
|
const contractYear = new Date(contrat.date_debut).getFullYear();
|
|
return contractYear === year;
|
|
});
|
|
}, [year]);
|
|
|
|
const hasMore = false; // Pas de pagination en démo
|
|
|
|
const [newContratOpen, setNewContratOpen] = useState(false);
|
|
|
|
// Titre dynamique
|
|
const salarieName = `${salarie.prenom} ${salarie.nom_usage || salarie.nom_naissance}`.trim();
|
|
usePageTitle(`${salarieName}`);
|
|
|
|
return (
|
|
<div className="space-y-5">
|
|
{/* Navigation */}
|
|
<div className="flex items-center gap-2">
|
|
<Link href="/salaries" className="inline-flex items-center gap-1 text-sm underline">
|
|
<ArrowLeft className="w-4 h-4" /> Retour
|
|
</Link>
|
|
<div className="ml-auto text-sm text-slate-500">Fiche salarié·e</div>
|
|
</div>
|
|
|
|
{/* Titre */}
|
|
<div className="rounded-2xl border bg-white p-4">
|
|
<div className="flex flex-wrap items-center gap-3">
|
|
<div className="text-lg font-semibold">
|
|
{formatValue(salarie.nom_usage).toUpperCase()} {formatValue(salarie.prenom)}
|
|
</div>
|
|
<div className="text-sm text-slate-500">Matricule : {salarie.matricule}</div>
|
|
|
|
{/* Spacer pour pousser le bouton à droite */}
|
|
<div className="ml-auto" />
|
|
|
|
<button
|
|
type="button"
|
|
onClick={() => setNewContratOpen(true)}
|
|
className="inline-flex items-center gap-2 px-3 py-2 rounded-lg text-sm text-white border-transparent bg-[#019669] hover:opacity-90 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-[#019669]"
|
|
title="Créer un nouveau contrat"
|
|
>
|
|
+ Nouveau contrat
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Grille : Informations / Contrats */}
|
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-5">
|
|
{/* Colonne gauche : Informations du salarié */}
|
|
<Section title="Informations du salarié">
|
|
<div className="space-y-2">
|
|
<Field label="Matricule" value={salarie.matricule} />
|
|
<Field label="Civilité" value={formatValue(salarie.civilite)} />
|
|
<Field label="Prénom" value={formatValue(salarie.prenom)} />
|
|
<Field label="Nom d'usage" value={formatValue(salarie.nom_usage)} />
|
|
<Field label="Nom de naissance" value={formatValue(salarie.nom_naissance)} />
|
|
<Field label="Pseudonyme" value={formatValue(salarie.pseudo)} />
|
|
<Field label="Date de naissance" value={formatDateFR(salarie.date_naissance)} />
|
|
<Field label="Lieu de naissance" value={formatValue(salarie.lieu_naissance)} />
|
|
<Field label="Adresse email" value={formatValue(salarie.email)} />
|
|
<Field label="Téléphone" value={formatValue(salarie.telephone)} />
|
|
<Field label="Adresse" value={formatValue(salarie.adresse)} />
|
|
<Field label="NIR" value={formatValue(salarie.nir)} />
|
|
<Field label="Congés Spectacles" value={formatValue(salarie.conges_spectacles)} />
|
|
<Field label="IBAN" value={formatValue(salarie.iban)} />
|
|
<Field label="BIC" value={formatValue(salarie.bic)} />
|
|
<Field label="Justificatifs" value={formatValue(salarie.justificatifs)} />
|
|
|
|
<div className="pt-3 border-t">
|
|
<Field
|
|
label="Espace Transat"
|
|
value={salarie.transat_connecte !== undefined
|
|
? (salarie.transat_connecte ? "Connecté" : "Non connecté")
|
|
: "—"
|
|
}
|
|
/>
|
|
<Field
|
|
label="Mineur < 16 ans"
|
|
value={salarie.mineur_moins_16 !== undefined
|
|
? (salarie.mineur_moins_16 ? "Oui" : "Non")
|
|
: "—"
|
|
}
|
|
/>
|
|
<Field
|
|
label="Résident français"
|
|
value={salarie.resident_fr !== undefined
|
|
? (salarie.resident_fr ? "Oui" : "Non")
|
|
: "—"
|
|
}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</Section>
|
|
|
|
{/* Colonne droite : Contrats du salarié */}
|
|
<Section title="Contrats du salarié">
|
|
{/* Filtres année + pagination */}
|
|
<div className="flex flex-col sm:flex-row sm:items-center gap-3 mb-3">
|
|
<div className="flex items-center gap-2">
|
|
<span className="text-sm text-slate-600">Année :</span>
|
|
<select
|
|
value={year}
|
|
onChange={(e) => {
|
|
setYear(parseInt(e.target.value, 10));
|
|
setPage(1);
|
|
}}
|
|
className="px-3 py-2 rounded-lg border bg-white text-sm"
|
|
>
|
|
{yearOptions.map((y) => (
|
|
<option key={y} value={y}>
|
|
{y}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
|
|
<div className="sm:ml-auto flex items-center gap-2">
|
|
<button
|
|
onClick={() => setPage((p) => Math.max(1, p - 1))}
|
|
disabled={page === 1}
|
|
className="px-2 py-1 rounded-lg border disabled:opacity-40"
|
|
title="Page précédente"
|
|
>
|
|
<ChevronLeft className="w-4 h-4" />
|
|
</button>
|
|
<div className="text-sm">Page <strong>{page}</strong></div>
|
|
<button
|
|
onClick={() => setPage((p) => p + 1)}
|
|
disabled={!hasMore}
|
|
className="px-2 py-1 rounded-lg border disabled:opacity-40"
|
|
title="Page suivante"
|
|
>
|
|
<ChevronRight className="w-4 h-4" />
|
|
</button>
|
|
<div className="ml-2 text-sm text-slate-500">
|
|
{contrats.length} élément{contrats.length > 1 ? "s" : ""}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Grille des contrats */}
|
|
<div className="space-y-3">
|
|
{contrats.length === 0 ? (
|
|
<div className="p-6 text-center text-slate-500 bg-slate-50 rounded-xl">
|
|
Aucun contrat pour {year}.
|
|
</div>
|
|
) : (
|
|
contrats.map((c) => (
|
|
<Link
|
|
key={c.id}
|
|
href={hrefContrat(c)}
|
|
className="block p-4 border rounded-xl bg-gray-50 hover:shadow-md transition-shadow focus:outline-none focus:ring-2 focus:ring-blue-500"
|
|
>
|
|
<h3 className="text-lg font-semibold">{c.reference}</h3>
|
|
<div className="flex flex-wrap items-center gap-2 mt-1">
|
|
{c.profession && (
|
|
<span className="inline-block px-2 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
|
|
{c.profession}
|
|
</span>
|
|
)}
|
|
{c.regime && (
|
|
<span className="inline-block px-2 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-600">
|
|
{c.regime === 'CDDU_MULTI' ? 'Multi-mois' : c.regime === 'CDDU_MONO' ? 'Mono-mois' : c.regime}
|
|
</span>
|
|
)}
|
|
</div>
|
|
<div className="flex flex-col sm:flex-row gap-1 sm:gap-4 mt-2">
|
|
<span className="flex items-center text-sm text-slate-600">
|
|
<svg className="w-4 h-4 mr-1 stroke-current" fill="none" viewBox="0 0 24 24">
|
|
<rect x="3" y="4" width="18" height="16" rx="2"/>
|
|
<path d="M7 2v2M17 2v2M3 10h18"/>
|
|
</svg>
|
|
Début : {formatDateFR(c.date_debut)}
|
|
</span>
|
|
<span className="flex items-center text-sm text-slate-600">
|
|
<svg className="w-4 h-4 mr-1 stroke-current" fill="none" viewBox="0 0 24 24">
|
|
<rect x="3" y="4" width="18" height="16" rx="2"/>
|
|
<path d="M7 2v2M17 2v2M3 10h18"/>
|
|
</svg>
|
|
Fin : {formatDateFR(c.date_fin)}
|
|
</span>
|
|
</div>
|
|
</Link>
|
|
))
|
|
)}
|
|
</div>
|
|
</Section>
|
|
</div>
|
|
|
|
{newContratOpen && (
|
|
<div className="fixed inset-0 z-50 flex items-center justify-center">
|
|
{/* Backdrop */}
|
|
<div
|
|
className="absolute inset-0 bg-black/50"
|
|
onClick={() => setNewContratOpen(false)}
|
|
/>
|
|
|
|
{/* Modal */}
|
|
<div className="relative z-10 w-full max-w-md rounded-2xl border bg-white p-5 shadow-xl">
|
|
<div className="text-base font-medium mb-1">Créer un nouveau contrat</div>
|
|
<p className="text-sm text-slate-500 mb-4">
|
|
Pour quel type de contrat souhaitez-vous procéder ?
|
|
</p>
|
|
|
|
<div className="grid grid-cols-1 gap-3">
|
|
<button
|
|
type="button"
|
|
onClick={() => {
|
|
setNewContratOpen(false);
|
|
router.push(`/contrats/nouveau?salarie=${encodeURIComponent(salarie.matricule)}`);
|
|
}}
|
|
className="w-full px-3 py-2 rounded-lg border text-sm hover:bg-slate-50 text-left"
|
|
>
|
|
CDDU
|
|
<div className="text-xs text-slate-500">Contrat à durée déterminée d'usage</div>
|
|
</button>
|
|
|
|
<button
|
|
type="button"
|
|
onClick={() => {
|
|
setNewContratOpen(false);
|
|
}}
|
|
className="w-full px-3 py-2 rounded-lg border text-sm opacity-70 cursor-not-allowed text-left"
|
|
title="Bientôt disponible"
|
|
disabled
|
|
>
|
|
Régime général
|
|
<div className="text-xs text-slate-500">Bientôt disponible</div>
|
|
</button>
|
|
</div>
|
|
|
|
<div className="mt-4 flex justify-end">
|
|
<button
|
|
type="button"
|
|
onClick={() => setNewContratOpen(false)}
|
|
className="text-sm px-3 py-2 rounded-lg border"
|
|
>
|
|
Annuler
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|