|
|
@@ -980,15 +980,39 @@
|
|
|
`;
|
|
|
|
|
|
tableData.forEach(row => {
|
|
|
- const deltaClass = row.delta > 0 ? 'negative' : (row.delta === 0 ? 'neutral' : 'positive');
|
|
|
- const percentageClass = row.percentage >= 80 ? 'good' : (row.percentage >= 50 ? 'warning' : 'bad');
|
|
|
+ const earned = parseFloat(row.earned) || 0;
|
|
|
+ const total = parseFloat(row.total) || 0;
|
|
|
+ const delta = Math.max(0, total - earned);
|
|
|
+
|
|
|
+ // Fix percentage calculation and display logic
|
|
|
+ let percentage = 0;
|
|
|
+ let percentageDisplay = '—';
|
|
|
+ let percentageClass = 'neutral';
|
|
|
+
|
|
|
+ if (total > 0) {
|
|
|
+ percentage = Math.round((earned / total) * 100);
|
|
|
+ percentageDisplay = percentage + '%';
|
|
|
+
|
|
|
+ // Color based on completion
|
|
|
+ if (percentage >= 100) {
|
|
|
+ percentageClass = 'good';
|
|
|
+ } else if (percentage >= 80) {
|
|
|
+ percentageClass = 'warning';
|
|
|
+ } else {
|
|
|
+ percentageClass = 'bad';
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // Delta styling: positive when delta is 0 (fully paid), negative when there's missing amount
|
|
|
+ const deltaClass = (total > 0 && delta === 0) ? 'positive' :
|
|
|
+ (delta > 0) ? 'negative' : 'neutral';
|
|
|
|
|
|
tableHtml += `
|
|
|
<div class="table-row">
|
|
|
<div class="table-cell month">${row.month}</div>
|
|
|
<div class="table-cell participants">${row.participants}</div>
|
|
|
- <div class="table-cell delta ${deltaClass}">€${new Intl.NumberFormat('it-IT').format(Math.abs(row.delta))}</div>
|
|
|
- <div class="table-cell percentage ${percentageClass}">${row.percentage}%</div>
|
|
|
+ <div class="table-cell delta ${deltaClass}">€${new Intl.NumberFormat('it-IT').format(delta)}</div>
|
|
|
+ <div class="table-cell percentage ${percentageClass}">${percentageDisplay}</div>
|
|
|
</div>
|
|
|
`;
|
|
|
});
|