Enhance SheetHeader component: add total attribute calculation methods (LP, AP, KP, SP), update progress bar logic, and streamline data handling.

src/modules/main/modules/sheetHeader/components/SheetHeader.tsx

@@ -91,6 +91,43 @@ export default function SheetHeader({jsonData}: { jsonData: CharacterData }) {
     );
   }
   
+  const calculateTotalLp = () => {
+    // GW der Spezies + KO + KO
+    const tempRaceLp = 5 // TODO: Needs to be pulled from universal stats
+    const constVal = attributes.find(attr => attr.id === 'ATTR_7')?.value || 0; // ATTR_7 = Constitution
+    const bonusMalus = 0 // Negative when malus
+    const zukauf = 0
+    return (jsonData.attr.lp + constVal * 2 + tempRaceLp + zukauf + bonusMalus);
+  }
+  
+  const calculateTotalAP = () => {
+    // TODO: Only show if Zauberer
+    // 20 durch Zauberer + Leiteigenschaft
+    const initial = 20
+    const leiteigenschaft = 0 // TODO: needs to be pulled
+    const bonusMalus = 0 // Negative when malus
+    const zukauf = 0
+    return (jsonData.attr.ae + initial + leiteigenschaft + bonusMalus + zukauf);
+  }
+  
+  const calculateTotalKP = () => {
+    // TODO: Only show if Geweihter
+    // 20 durch Geweiht + Leiteigenschaft
+    const initial = 20
+    const leiteigenschaft = 0 // TODO: needs to be pulled
+    const bonusMalus = 0 // Negative when malus
+    const zukauf = 0
+    return (jsonData.attr.kp + initial + leiteigenschaft + bonusMalus + zukauf);
+  }
+  
+  const calculateTotalSp = () => {
+    // TODO: needs to be pulled
+    const initial = 3
+    const bonus = 0
+    return (jsonData.attr.sp || 0 + initial + bonus);
+  }
+  
+  
   return (
       <>
         <div className="flex justify-between items-end py-5 px-5">
@@ -148,10 +185,10 @@ export default function SheetHeader({jsonData}: { jsonData: CharacterData }) {
                   className="ms-5 w-[100%] bg-gray-600 rounded-full h-6 flex items-center overflow-hidden relative">
                 <div
                     className="bg-gradient-to-r from-red-900 to-red-600 h-full transition-all duration-300"
-                    style={{width: `${Math.min(((jsonData.attr.lp - jsonData.attr.permanentLP.lost) / jsonData.attr.lp) * 100, 100)}%`}}
+                    style={{width: `${Math.min(((calculateTotalLp() - jsonData.attr.permanentLP.lost) / calculateTotalLp()) * 100, 100)}%`}}
                 />
                 <div className="absolute inset-0 flex items-center justify-center text-white text-sm font-medium">
-                  {jsonData.attr.lp} / {jsonData.attr.lp - jsonData.attr.permanentLP.lost}
+                  {calculateTotalLp()} / {calculateTotalLp() - jsonData.attr.permanentLP.lost}
                 </div>
               </div>
             </div>
@@ -168,10 +205,10 @@ export default function SheetHeader({jsonData}: { jsonData: CharacterData }) {
                   className="ms-5 w-[100%] bg-gray-600 rounded-full h-6 flex items-center overflow-hidden relative">
                 <div
                     className="bg-gradient-to-r from-blue-900 to-blue-500 h-full transition-all duration-300"
-                    style={{width: `${Math.min(((jsonData.attr.ae - jsonData.attr.permanentAE.lost) / jsonData.attr.ae) * 100, 100)}%`}}
+                    style={{width: `${Math.min(((calculateTotalAP() - jsonData.attr.permanentAE.lost) / calculateTotalAP()) * 100, 100)}%`}}
                 />
                 <div className="absolute inset-0 flex items-center justify-center text-white text-sm font-medium">
-                  {jsonData.attr.ae} / {jsonData.attr.ae - jsonData.attr.permanentAE.lost}
+                  {calculateTotalAP()} / {calculateTotalAP() - jsonData.attr.permanentAE.lost}
                 </div>
               </div>
             </div>
@@ -188,10 +225,10 @@ export default function SheetHeader({jsonData}: { jsonData: CharacterData }) {
                   className="ms-5 w-[100%] bg-gray-600 rounded-full h-6 flex items-center overflow-hidden relative">
                 <div
                     className="bg-gradient-to-r from-emerald-900 to-emerald-500 h-full transition-all duration-300"
-                    style={{width: `${Math.min(((jsonData.attr.kp - jsonData.attr.permanentKP.lost) / jsonData.attr.kp) * 100, 100)}%`}}
+                    style={{width: `${Math.min(((calculateTotalKP() - jsonData.attr.permanentKP.lost) / calculateTotalKP()) * 100, 100)}%`}}
                 />
                 <div className="absolute inset-0 flex items-center justify-center text-white text-sm font-medium">
-                  {jsonData.attr.kp} / {jsonData.attr.kp - jsonData.attr.permanentKP.lost}
+                  {calculateTotalKP()} / {calculateTotalKP() - jsonData.attr.permanentKP.lost}
                 </div>
               </div>
             </div>
@@ -205,7 +242,7 @@ export default function SheetHeader({jsonData}: { jsonData: CharacterData }) {
                     </span>
                   </span>
               <div className="ms-5 w-[100%] flex items-center gap-2">
-                {Array.from({length: jsonData.attr.sp}, (_, index) => (
+                {Array.from({length: calculateTotalSp()}, (_, index) => (
                     <div
                         key={`sp-available-${index}`}
                         className="rounded-full w-5 h-5 bg-gradient-to-br from-violet-700 to-violet-500"