From 3e80d072741a85ffe347a468022db39b75b10b4b Mon Sep 17 00:00:00 2001
From: MuslemRahimi <moslem_rahimi@hotmail.de>
Date: Mon, 7 Apr 2025 22:26:02 +0200
Subject: [PATCH] ui fix

---
 src/routes/login/+page.svelte              |   2 +-
 src/routes/options-calculator/+page.svelte | 100 +++++++++++++--------
 src/routes/register/+page.svelte           |   2 +-
 3 files changed, 63 insertions(+), 41 deletions(-)

diff --git a/src/routes/login/+page.svelte b/src/routes/login/+page.svelte
index f4cea95f..4a21a5e3 100644
--- a/src/routes/login/+page.svelte
+++ b/src/routes/login/+page.svelte
@@ -772,7 +772,7 @@
   <div class="absolute right-1/2 left-1/2 top-1/2 bottom-1/2">
     <div class="relative">
       <label
-        class="bg-secondary rounded-md h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"
+        class="shadow-sm bg-gray-300 dark:bg-secondary rounded h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"
       >
         <span
           class="loading loading-spinner loading-md text-muted dark:text-gray-400"
diff --git a/src/routes/options-calculator/+page.svelte b/src/routes/options-calculator/+page.svelte
index cf91c568..a9179219 100644
--- a/src/routes/options-calculator/+page.svelte
+++ b/src/routes/options-calculator/+page.svelte
@@ -169,8 +169,6 @@
     });
   };
 
-  // CHART FUNCTIONS
-
   function plotData() {
     // Determine x-axis range based on current stock price and max leg strike
     if (!userStrategy || userStrategy.length === 0) {
@@ -345,53 +343,77 @@
     return options;
   }
 
-  // Calculate break-even price and profit/loss limits
   function calculateBreakEvenAndLimits() {
+    let totalPremium = 0;
+    let overallMaxProfit = 0;
+    let overallMaxLoss = 0;
+    let unlimitedProfit = false;
+    let unlimitedLoss = false;
+
+    // Loop through each leg in the strategy
+    for (let i = 0; i < userStrategy.length; i++) {
+      const leg = userStrategy[i];
+      totalPremium += leg.optionPrice; // accumulate total premium
+      const scenarioKey = `${leg?.action} ${leg?.optionType}`;
+
+      let legProfit = 0;
+      let legLoss = 0;
+
+      // Determine limits for each leg based on its scenario
+      if (scenarioKey === "Buy Call") {
+        // Profit is unlimited for a long call, loss limited to the premium paid.
+        legProfit = Infinity;
+        legLoss = -leg.optionPrice;
+        unlimitedProfit = true;
+      } else if (scenarioKey === "Sell Call") {
+        // Profit is limited to the premium received; loss is unlimited.
+        legProfit = leg.optionPrice;
+        legLoss = -Infinity;
+        unlimitedLoss = true;
+      } else if (scenarioKey === "Buy Put") {
+        // For a long put, profit is (strike * 100) minus the premium, loss is the premium paid.
+        legProfit = leg.strike * 100 - leg.optionPrice;
+        legLoss = -leg.optionPrice;
+      } else if (scenarioKey === "Sell Put") {
+        // For a short put, profit is the premium received, loss is (strike * 100 - premium).
+        legProfit = leg.optionPrice;
+        legLoss = -(leg.strike * 100 - leg.optionPrice);
+      } else {
+        console.error("Limits not defined for scenario:", scenarioKey);
+        // Defaulting to zero contribution if unknown
+        legProfit = 0;
+        legLoss = 0;
+      }
+
+      // Sum only the finite numbers. If any leg is unlimited, the corresponding flag is set.
+      if (isFinite(legProfit)) {
+        overallMaxProfit += legProfit;
+      }
+      if (isFinite(legLoss)) {
+        overallMaxLoss += legLoss;
+      }
+    }
+
+    // Format the aggregated limits: if any leg was unlimited, set overall accordingly.
+    limits = {
+      maxProfit: unlimitedProfit
+        ? "Unlimited"
+        : `$${formatCurrency(overallMaxProfit)}`,
+      maxLoss: unlimitedLoss
+        ? "Unlimited"
+        : `$${formatCurrency(overallMaxLoss)}`,
+    };
+
+    // For break-even price, if there's exactly one leg, compute it; otherwise, set it to null.
     if (userStrategy.length === 1) {
       const leg = userStrategy[0];
       const scenarioKey = `${leg?.action} ${leg?.optionType}`;
-
-      // Calculate break-even price
       if (breakEvenCalculators[scenarioKey]) {
         breakEvenPrice = breakEvenCalculators[scenarioKey](
           leg.strike,
           leg.optionPrice,
         );
-      } else {
-        breakEvenPrice = null;
       }
-
-      // Set profit/loss limits based on strategy
-      if (scenarioKey === "Buy Call") {
-        limits = {
-          maxProfit: "Unlimited",
-          maxLoss: `-$${formatCurrency(totalPremium)}`,
-        };
-      } else if (scenarioKey === "Sell Call") {
-        limits = {
-          maxProfit: `$${formatCurrency(totalPremium)}`,
-          maxLoss: "Unlimited",
-        };
-      } else if (scenarioKey === "Buy Put") {
-        limits = {
-          maxProfit: `$${formatCurrency(leg.strike * 100 - totalPremium)}`,
-          maxLoss: `-$${formatCurrency(totalPremium)}`,
-        };
-      } else if (scenarioKey === "Sell Put") {
-        limits = {
-          maxProfit: `$${formatCurrency(totalPremium)}`,
-          maxLoss: `-$${formatCurrency(leg.strike * 100 - totalPremium)}`,
-        };
-      } else {
-        console.error("Limits not defined for scenario:", scenarioKey);
-        limits = { maxProfit: "n/a", maxLoss: "n/a" };
-      }
-    } else {
-      // For multiple legs, display the aggregated premium info
-      breakEvenPrice = null;
-      limits = {
-        info: `Aggregated Premium: $${formatCurrency(totalPremium)}`,
-      };
     }
   }
 
diff --git a/src/routes/register/+page.svelte b/src/routes/register/+page.svelte
index 827ae136..dc3ee5bb 100644
--- a/src/routes/register/+page.svelte
+++ b/src/routes/register/+page.svelte
@@ -795,7 +795,7 @@
   <div class="absolute right-1/2 left-1/2 top-1/2 bottom-1/2">
     <div class="relative">
       <label
-        class="bg-secondary rounded-md h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"
+        class="shadow-sm bg-gray-300 dark:bg-secondary rounded h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"
       >
         <span
           class="loading loading-spinner loading-md text-muted dark:text-gray-400"