grafische kostenübersicht added

backend/public/js/costs.js

@@ -7,14 +7,25 @@ window.loadCosts = async function(){
     let year = 0
     let domainYear = 0
 
+    const parts = []
+    let resourceYearTotal = 0
+
     resources.forEach(r => {
 
         if(r.kosten_monat){
             month += parseFloat(r.kosten_monat)
         }
 
-        if(r.kosten_jahr){
-            year += parseFloat(r.kosten_jahr)
+        const resourceYear = getResourceYearCost(r)
+        resourceYearTotal += resourceYear
+
+        if(resourceYear > 0){
+            parts.push({
+                label: r.name || "Unbenannter Server",
+                amount: resourceYear,
+                type: "server",
+                colorIndex: parts.length
+            })
         }
 
     })
@@ -28,11 +39,68 @@ window.loadCosts = async function(){
     })
 
     document.getElementById("costMonth").innerText = month.toFixed(2)
-    document.getElementById("costYear").innerText = year.toFixed(2)
+    document.getElementById("costYear").innerText = resourceYearTotal.toFixed(2)
     document.getElementById("costDomain").innerText = domainYear.toFixed(2)
 
-    const total = year + domainYear
+    const total = resourceYearTotal + domainYear
 
     document.getElementById("costTotal").innerText = total.toFixed(2)
+    renderCostChart(parts, domainYear, total)
 
 }
+
+function getResourceYearCost(resource){
+    if(resource.kosten_jahr){
+        return parseFloat(resource.kosten_jahr) || 0
+    }
+
+    if(resource.kosten_monat){
+        return (parseFloat(resource.kosten_monat) || 0) * 12
+    }
+
+    return 0
+}
+
+function renderCostChart(serverParts, domainYear, total){
+    const container = document.getElementById("costChart")
+    if(!container) return
+
+    const parts = [...serverParts]
+
+    if(domainYear > 0){
+        parts.push({
+            label: "Domains gesamt",
+            amount: domainYear,
+            type: "domains",
+            colorIndex: parts.length
+        })
+    }
+
+    if(!total || !parts.length){
+        container.innerHTML = `<div class="cost-empty">Keine Kosten erfasst</div>`
+        return
+    }
+
+    container.innerHTML = `
+        <div class="cost-bar">
+            ${parts.map((part, index) => `
+                <div class="cost-segment ${part.type}"
+                    style="width:${((part.amount / total) * 100).toFixed(2)}%; --segment-index:${part.colorIndex}"
+                    title="${part.label}: ${part.amount.toFixed(2)} EUR">
+                </div>
+            `).join("")}
+        </div>
+        <div class="cost-breakdown">
+            ${parts
+                .sort((a, b) => b.amount - a.amount)
+                .map((part, index) => `
+                    <div class="cost-row">
+                        <span class="cost-dot ${part.type}" style="--segment-index:${part.colorIndex}"></span>
+                        <span class="cost-label">${part.label}</span>
+                        <span class="cost-value">${part.amount.toFixed(2)} EUR</span>
+                        <span class="cost-share">${((part.amount / total) * 100).toFixed(1)}%</span>
+                    </div>
+                `).join("")}
+        </div>
+    `
+}