fix: Regrouper les items par date dans les tableaux de salaires côté client
Problème: Les tableaux affichaient une ligne par item (R1, R2 sur des lignes séparées), ce qui rendait les tableaux longs et moins lisibles. Solution: - Consolidation des représentations : une seule ligne par date avec "R1, R2" dans la colonne Type - Consolidation des répétitions : une seule ligne par date avec "S1, S2" dans la colonne Type - Le montant affiché est la somme de tous les items de cette date - Amélioration de la lisibilité et réduction de la taille des tableaux
This commit is contained in:
parent
c2a54ecd89
commit
695a75a709
2 changed files with 80 additions and 42 deletions
|
|
@ -1381,15 +1381,21 @@ return (
|
|||
</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">
|
||||
{data.salaires_par_date.representations.map((rep: any, repIdx: number) => {
|
||||
if (!rep.items || rep.items.length === 0) return null;
|
||||
|
||||
// Regrouper tous les items de cette date en une seule ligne
|
||||
const typesLabel = rep.items.map((item: any) => `R${item.numero}`).join(', ');
|
||||
const totalMontant = rep.items.reduce((sum: number, item: any) => sum + item.montant, 0);
|
||||
|
||||
return (
|
||||
<tr key={repIdx} 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>
|
||||
<td className="px-3 py-2 text-slate-600">{typesLabel}</td>
|
||||
<td className="px-3 py-2 text-right font-semibold text-slate-900">{formatEUR(totalMontant)}</td>
|
||||
</tr>
|
||||
))
|
||||
))}
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
|
@ -1410,15 +1416,21 @@ return (
|
|||
</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">
|
||||
{data.salaires_par_date.repetitions.map((rep: any, repIdx: number) => {
|
||||
if (!rep.items || rep.items.length === 0) return null;
|
||||
|
||||
// Regrouper tous les items de cette date en une seule ligne
|
||||
const typesLabel = rep.items.map((item: any) => `S${item.numero}`).join(', ');
|
||||
const totalMontant = rep.items.reduce((sum: number, item: any) => sum + item.montant, 0);
|
||||
|
||||
return (
|
||||
<tr key={repIdx} 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>
|
||||
<td className="px-3 py-2 text-slate-600">{typesLabel}</td>
|
||||
<td className="px-3 py-2 text-right font-semibold text-slate-900">{formatEUR(totalMontant)}</td>
|
||||
</tr>
|
||||
))
|
||||
))}
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -190,27 +190,40 @@ export function SalaireParDateEditor({ salairesParDate, contractId, onUpdate }:
|
|||
</tr>
|
||||
</thead>
|
||||
<tbody className="bg-white divide-y divide-slate-100">
|
||||
{currentData.representations.map((rep, repIdx) => (
|
||||
rep.items && rep.items.map((item, itemIdx) => (
|
||||
<tr key={`${repIdx}-${itemIdx}`} className="hover:bg-slate-50">
|
||||
{currentData.representations.map((rep, repIdx) => {
|
||||
if (!rep.items || rep.items.length === 0) return null;
|
||||
|
||||
// Regrouper tous les items de cette date en une seule ligne
|
||||
const typesLabel = rep.items.map(item => `R${item.numero}`).join(', ');
|
||||
const totalMontant = rep.items.reduce((sum, item) => sum + item.montant, 0);
|
||||
|
||||
return (
|
||||
<tr key={repIdx} 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-slate-600">{typesLabel}</td>
|
||||
<td className="px-3 py-2 text-right">
|
||||
{isEditing ? (
|
||||
<Input
|
||||
type="number"
|
||||
step="0.01"
|
||||
value={item.montant}
|
||||
onChange={(e) => updateRepresentationItem(repIdx, itemIdx, e.target.value)}
|
||||
className="h-7 text-right text-xs w-24 ml-auto"
|
||||
/>
|
||||
<div className="space-y-1">
|
||||
{rep.items.map((item, itemIdx) => (
|
||||
<div key={itemIdx} className="flex items-center justify-end gap-2">
|
||||
<span className="text-xs text-slate-500">R{item.numero}:</span>
|
||||
<Input
|
||||
type="number"
|
||||
step="0.01"
|
||||
value={item.montant}
|
||||
onChange={(e) => updateRepresentationItem(repIdx, itemIdx, e.target.value)}
|
||||
className="h-6 text-right text-xs w-20"
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<span className="font-semibold text-slate-900">{item.montant.toFixed(2)} €</span>
|
||||
<span className="font-semibold text-slate-900">{totalMontant.toFixed(2)} €</span>
|
||||
)}
|
||||
</td>
|
||||
</tr>
|
||||
))
|
||||
))}
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
|
@ -231,27 +244,40 @@ export function SalaireParDateEditor({ salairesParDate, contractId, onUpdate }:
|
|||
</tr>
|
||||
</thead>
|
||||
<tbody className="bg-white divide-y divide-slate-100">
|
||||
{currentData.repetitions.map((rep, repIdx) => (
|
||||
rep.items && rep.items.map((item, itemIdx) => (
|
||||
<tr key={`${repIdx}-${itemIdx}`} className="hover:bg-slate-50">
|
||||
{currentData.repetitions.map((rep, repIdx) => {
|
||||
if (!rep.items || rep.items.length === 0) return null;
|
||||
|
||||
// Regrouper tous les items de cette date en une seule ligne
|
||||
const typesLabel = rep.items.map(item => `S${item.numero}`).join(', ');
|
||||
const totalMontant = rep.items.reduce((sum, item) => sum + item.montant, 0);
|
||||
|
||||
return (
|
||||
<tr key={repIdx} 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-slate-600">{typesLabel}</td>
|
||||
<td className="px-3 py-2 text-right">
|
||||
{isEditing ? (
|
||||
<Input
|
||||
type="number"
|
||||
step="0.01"
|
||||
value={item.montant}
|
||||
onChange={(e) => updateRepetitionItem(repIdx, itemIdx, e.target.value)}
|
||||
className="h-7 text-right text-xs w-24 ml-auto"
|
||||
/>
|
||||
<div className="space-y-1">
|
||||
{rep.items.map((item, itemIdx) => (
|
||||
<div key={itemIdx} className="flex items-center justify-end gap-2">
|
||||
<span className="text-xs text-slate-500">S{item.numero}:</span>
|
||||
<Input
|
||||
type="number"
|
||||
step="0.01"
|
||||
value={item.montant}
|
||||
onChange={(e) => updateRepetitionItem(repIdx, itemIdx, e.target.value)}
|
||||
className="h-6 text-right text-xs w-20"
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<span className="font-semibold text-slate-900">{item.montant.toFixed(2)} €</span>
|
||||
<span className="font-semibold text-slate-900">{totalMontant.toFixed(2)} €</span>
|
||||
)}
|
||||
</td>
|
||||
</tr>
|
||||
))
|
||||
))}
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in a new issue