feat: Afficher tableau des salaires par date dans pages détails contrats
- Ajouter tableau structuré dans contrats/[id] (CDDU mono) - Ajouter tableau structuré dans contrats-multi/[id] (CDDU multi) - Affichage conditionnel : tableau si salaires_par_date, sinon montant global - Tableau avec colonnes Date, Type et Montant - Séparation claire par sections : Représentations, Répétitions, Jours travaillés - Total affiché en bas du tableau
This commit is contained in:
parent
5131552e18
commit
c4520a22f6
2 changed files with 191 additions and 46 deletions
|
|
@ -940,7 +940,114 @@ export default function ContratMultiPage() {
|
|||
<Field label="Profession" value={data.profession} />
|
||||
<Field label="Catégorie professionnelle" value={data.categorie_prof} />
|
||||
<Field label="Type de salaire demandé" value={data.type_salaire} />
|
||||
<Field label="Salaire demandé" value={data.salaire_demande} />
|
||||
|
||||
{/* Affichage conditionnel : soit salaire global, soit détail par date */}
|
||||
{(data as any).salaires_par_date ? (
|
||||
<>
|
||||
<Field label="Salaire demandé" value={(data as any).salaires_par_date.total_calcule} />
|
||||
<div className="col-span-full">
|
||||
<div className="mt-2 p-3 bg-slate-50 rounded-lg border border-slate-200">
|
||||
<div className="text-xs font-semibold text-slate-700 mb-2">Détail des salaires par date</div>
|
||||
|
||||
{/* Représentations */}
|
||||
{(data as any).salaires_par_date.representations && (data as any).salaires_par_date.representations.length > 0 && (
|
||||
<div className="mb-3">
|
||||
<div className="text-xs font-semibold text-indigo-700 uppercase tracking-wide mb-1">Représentations</div>
|
||||
<div className="overflow-hidden rounded-md border border-slate-200">
|
||||
<table className="w-full text-xs">
|
||||
<thead className="bg-slate-100">
|
||||
<tr>
|
||||
<th className="text-left px-3 py-2 font-semibold text-slate-700 border-b border-slate-200">Date</th>
|
||||
<th className="text-left px-3 py-2 font-semibold text-slate-700 border-b border-slate-200">Type</th>
|
||||
<th className="text-right px-3 py-2 font-semibold text-slate-700 border-b border-slate-200">Montant</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="bg-white divide-y divide-slate-100">
|
||||
{(data as any).salaires_par_date.representations.map((rep: any, repIdx: number) => (
|
||||
rep.items && rep.items.map((item: any, itemIdx: number) => (
|
||||
<tr key={`${repIdx}-${itemIdx}`} className="hover:bg-slate-50">
|
||||
<td className="px-3 py-2 font-medium text-slate-700">{rep.date}</td>
|
||||
<td className="px-3 py-2 text-slate-600">R{item.numero}</td>
|
||||
<td className="px-3 py-2 text-right font-semibold text-slate-900">{item.montant.toFixed(2)} €</td>
|
||||
</tr>
|
||||
))
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Répétitions */}
|
||||
{(data as any).salaires_par_date.repetitions && (data as any).salaires_par_date.repetitions.length > 0 && (
|
||||
<div className="mb-3">
|
||||
<div className="text-xs font-semibold text-purple-700 uppercase tracking-wide mb-1">Répétitions</div>
|
||||
<div className="overflow-hidden rounded-md border border-slate-200">
|
||||
<table className="w-full text-xs">
|
||||
<thead className="bg-slate-100">
|
||||
<tr>
|
||||
<th className="text-left px-3 py-2 font-semibold text-slate-700 border-b border-slate-200">Date</th>
|
||||
<th className="text-left px-3 py-2 font-semibold text-slate-700 border-b border-slate-200">Type</th>
|
||||
<th className="text-right px-3 py-2 font-semibold text-slate-700 border-b border-slate-200">Montant</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="bg-white divide-y divide-slate-100">
|
||||
{(data as any).salaires_par_date.repetitions.map((rep: any, repIdx: number) => (
|
||||
rep.items && rep.items.map((item: any, itemIdx: number) => (
|
||||
<tr key={`${repIdx}-${itemIdx}`} className="hover:bg-slate-50">
|
||||
<td className="px-3 py-2 font-medium text-slate-700">{rep.date}</td>
|
||||
<td className="px-3 py-2 text-slate-600">S{item.numero}</td>
|
||||
<td className="px-3 py-2 text-right font-semibold text-slate-900">{item.montant.toFixed(2)} €</td>
|
||||
</tr>
|
||||
))
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Jours travaillés */}
|
||||
{(data as any).salaires_par_date.jours_travail && (data as any).salaires_par_date.jours_travail.length > 0 && (
|
||||
<div className="mb-3">
|
||||
<div className="text-xs font-semibold text-green-700 uppercase tracking-wide mb-1">Jours travaillés</div>
|
||||
<div className="overflow-hidden rounded-md border border-slate-200">
|
||||
<table className="w-full text-xs">
|
||||
<thead className="bg-slate-100">
|
||||
<tr>
|
||||
<th className="text-left px-3 py-2 font-semibold text-slate-700 border-b border-slate-200">Date</th>
|
||||
<th className="text-left px-3 py-2 font-semibold text-slate-700 border-b border-slate-200">Type</th>
|
||||
<th className="text-right px-3 py-2 font-semibold text-slate-700 border-b border-slate-200">Montant</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="bg-white divide-y divide-slate-100">
|
||||
{(data as any).salaires_par_date.jours_travail.map((jour: any, jourIdx: number) => (
|
||||
<tr key={jourIdx} className="hover:bg-slate-50">
|
||||
<td className="px-3 py-2 font-medium text-slate-700">{jour.date}</td>
|
||||
<td className="px-3 py-2 text-slate-600">Jour</td>
|
||||
<td className="px-3 py-2 text-right font-semibold text-slate-900">{jour.montant.toFixed(2)} €</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Total */}
|
||||
<div className="pt-2 border-t border-slate-200">
|
||||
<div className="flex justify-between items-center">
|
||||
<span className="text-xs font-semibold text-slate-700">Total</span>
|
||||
<span className="text-sm font-bold text-indigo-900">{(data as any).salaires_par_date.total_calcule.toFixed(2)} €</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<Field label="Salaire demandé" value={data.salaire_demande} />
|
||||
)}
|
||||
|
||||
<Field label="Début contrat" value={formatDateFR(data.date_debut)} />
|
||||
<Field label="Fin contrat" value={formatDateFR(data.date_fin)} />
|
||||
<Field label="Panier repas" value={boolBadge(data.panier_repas)} />
|
||||
|
|
|
|||
|
|
@ -1339,73 +1339,111 @@ return (
|
|||
<Field label="Catégorie professionnelle" value={data.categorie_prof} />
|
||||
<Field label="Type de salaire demandé" value={data.type_salaire} />
|
||||
|
||||
<Field label="Type de salaire demandé" value={data.type_salaire} />
|
||||
|
||||
{/* Affichage conditionnel : soit salaire global, soit détail par date */}
|
||||
{data.salaires_par_date ? (
|
||||
<Field
|
||||
label="Salaire demandé (par date)"
|
||||
value={
|
||||
<div className="space-y-2 text-sm">
|
||||
<>
|
||||
<Field label="Salaire demandé" value={formatEUR(data.salaires_par_date.total_calcule)} />
|
||||
<div className="col-span-full">
|
||||
<div className="mt-2 p-3 bg-slate-50 rounded-lg border border-slate-200">
|
||||
<div className="text-xs font-semibold text-slate-700 mb-2">Détail des salaires par date</div>
|
||||
|
||||
{/* Représentations */}
|
||||
{data.salaires_par_date.representations && data.salaires_par_date.representations.length > 0 && (
|
||||
<div className="space-y-1">
|
||||
<div className="text-xs font-semibold text-indigo-700 uppercase tracking-wide">Représentations</div>
|
||||
{data.salaires_par_date.representations.map((rep: any, idx: number) => (
|
||||
<div key={idx} className="flex items-center gap-2 text-xs">
|
||||
<span className="font-medium text-slate-700 w-12">{rep.date}</span>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{rep.items.map((item: any, itemIdx: number) => (
|
||||
<span key={itemIdx} className="text-slate-600">
|
||||
R{item.numero}: <span className="font-semibold">{formatEUR(item.montant)}</span>
|
||||
</span>
|
||||
<div className="mb-3">
|
||||
<div className="text-xs font-semibold text-indigo-700 uppercase tracking-wide mb-1">Représentations</div>
|
||||
<div className="overflow-hidden rounded-md border border-slate-200">
|
||||
<table className="w-full text-xs">
|
||||
<thead className="bg-slate-100">
|
||||
<tr>
|
||||
<th className="text-left px-3 py-2 font-semibold text-slate-700 border-b border-slate-200">Date</th>
|
||||
<th className="text-left px-3 py-2 font-semibold text-slate-700 border-b border-slate-200">Type</th>
|
||||
<th className="text-right px-3 py-2 font-semibold text-slate-700 border-b border-slate-200">Montant</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="bg-white divide-y divide-slate-100">
|
||||
{data.salaires_par_date.representations.map((rep: any, repIdx: number) => (
|
||||
rep.items && rep.items.map((item: any, itemIdx: number) => (
|
||||
<tr key={`${repIdx}-${itemIdx}`} className="hover:bg-slate-50">
|
||||
<td className="px-3 py-2 font-medium text-slate-700">{rep.date}</td>
|
||||
<td className="px-3 py-2 text-slate-600">R{item.numero}</td>
|
||||
<td className="px-3 py-2 text-right font-semibold text-slate-900">{formatEUR(item.montant)}</td>
|
||||
</tr>
|
||||
))
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Répétitions */}
|
||||
{data.salaires_par_date.repetitions && data.salaires_par_date.repetitions.length > 0 && (
|
||||
<div className="space-y-1">
|
||||
<div className="text-xs font-semibold text-purple-700 uppercase tracking-wide">Répétitions</div>
|
||||
{data.salaires_par_date.repetitions.map((rep: any, idx: number) => (
|
||||
<div key={idx} className="flex items-center gap-2 text-xs">
|
||||
<span className="font-medium text-slate-700 w-12">{rep.date}</span>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{rep.items.map((item: any, itemIdx: number) => (
|
||||
<span key={itemIdx} className="text-slate-600">
|
||||
S{item.numero}: <span className="font-semibold">{formatEUR(item.montant)}</span>
|
||||
</span>
|
||||
<div className="mb-3">
|
||||
<div className="text-xs font-semibold text-purple-700 uppercase tracking-wide mb-1">Répétitions</div>
|
||||
<div className="overflow-hidden rounded-md border border-slate-200">
|
||||
<table className="w-full text-xs">
|
||||
<thead className="bg-slate-100">
|
||||
<tr>
|
||||
<th className="text-left px-3 py-2 font-semibold text-slate-700 border-b border-slate-200">Date</th>
|
||||
<th className="text-left px-3 py-2 font-semibold text-slate-700 border-b border-slate-200">Type</th>
|
||||
<th className="text-right px-3 py-2 font-semibold text-slate-700 border-b border-slate-200">Montant</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="bg-white divide-y divide-slate-100">
|
||||
{data.salaires_par_date.repetitions.map((rep: any, repIdx: number) => (
|
||||
rep.items && rep.items.map((item: any, itemIdx: number) => (
|
||||
<tr key={`${repIdx}-${itemIdx}`} className="hover:bg-slate-50">
|
||||
<td className="px-3 py-2 font-medium text-slate-700">{rep.date}</td>
|
||||
<td className="px-3 py-2 text-slate-600">S{item.numero}</td>
|
||||
<td className="px-3 py-2 text-right font-semibold text-slate-900">{formatEUR(item.montant)}</td>
|
||||
</tr>
|
||||
))
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Jours travaillés */}
|
||||
{data.salaires_par_date.jours_travail && data.salaires_par_date.jours_travail.length > 0 && (
|
||||
<div className="space-y-1">
|
||||
<div className="text-xs font-semibold text-green-700 uppercase tracking-wide">Jours travaillés</div>
|
||||
{data.salaires_par_date.jours_travail.map((jour: any, idx: number) => (
|
||||
<div key={idx} className="flex items-center gap-2 text-xs">
|
||||
<span className="font-medium text-slate-700 w-12">{jour.date}</span>
|
||||
<span className="text-slate-600">
|
||||
Jour: <span className="font-semibold">{formatEUR(jour.montant)}</span>
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
<div className="mb-3">
|
||||
<div className="text-xs font-semibold text-green-700 uppercase tracking-wide mb-1">Jours travaillés</div>
|
||||
<div className="overflow-hidden rounded-md border border-slate-200">
|
||||
<table className="w-full text-xs">
|
||||
<thead className="bg-slate-100">
|
||||
<tr>
|
||||
<th className="text-left px-3 py-2 font-semibold text-slate-700 border-b border-slate-200">Date</th>
|
||||
<th className="text-left px-3 py-2 font-semibold text-slate-700 border-b border-slate-200">Type</th>
|
||||
<th className="text-right px-3 py-2 font-semibold text-slate-700 border-b border-slate-200">Montant</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="bg-white divide-y divide-slate-100">
|
||||
{data.salaires_par_date.jours_travail.map((jour: any, jourIdx: number) => (
|
||||
<tr key={jourIdx} className="hover:bg-slate-50">
|
||||
<td className="px-3 py-2 font-medium text-slate-700">{jour.date}</td>
|
||||
<td className="px-3 py-2 text-slate-600">Jour</td>
|
||||
<td className="px-3 py-2 text-right font-semibold text-slate-900">{formatEUR(jour.montant)}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Total */}
|
||||
<div className="pt-2 border-t border-slate-200 mt-2">
|
||||
<span className="text-xs font-semibold text-slate-700">Total: </span>
|
||||
<span className="text-sm font-bold text-indigo-900">{formatEUR(data.salaires_par_date.total_calcule)}</span>
|
||||
<div className="pt-2 border-t border-slate-200">
|
||||
<div className="flex justify-between items-center">
|
||||
<span className="text-xs font-semibold text-slate-700">Total</span>
|
||||
<span className="text-sm font-bold text-indigo-900">{formatEUR(data.salaires_par_date.total_calcule)}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<Field label="Salaire demandé" value={formatEUR(data.salaire_demande)} />
|
||||
)}
|
||||
|
|
|
|||
Loading…
Reference in a new issue