From c01afd7e450f9440239aa636d3e6e1baa3d59302 Mon Sep 17 00:00:00 2001
From: MuslemRahimi <moslem_rahimi@hotmail.de>
Date: Sun, 6 Apr 2025 12:51:39 +0200
Subject: [PATCH] bugfixing ipo

---
 src/lib/components/IPOChart.svelte         |  6 ++---
 src/routes/ipos/+layout.svelte             |  4 +--
 src/routes/ipos/+page.svelte               |  7 ++---
 src/routes/ipos/news/+page.svelte          |  2 +-
 src/routes/ipos/statistics/+page.svelte    |  6 ++---
 src/routes/options-calculator/+page.svelte | 31 +++++++++++++++++-----
 6 files changed, 35 insertions(+), 21 deletions(-)

diff --git a/src/lib/components/IPOChart.svelte b/src/lib/components/IPOChart.svelte
index 7b7dcb18..fc91d626 100644
--- a/src/lib/components/IPOChart.svelte
+++ b/src/lib/components/IPOChart.svelte
@@ -120,14 +120,14 @@
         categories: months,
         gridLineWidth: 0,
         labels: {
-          style: { color: $mode === "light" ? "black" : "white" },
+          style: { color: $mode === "light" ? "#545454" : "white" },
         },
       },
       yAxis: {
         gridLineWidth: 1,
         gridLineColor: $mode === "light" ? "#e5e7eb" : "#111827",
         labels: {
-          style: { color: $mode === "light" ? "black" : "white" },
+          style: { color: $mode === "light" ? "#545454" : "white" },
         },
         title: { text: null },
         opposite: true,
@@ -159,7 +159,7 @@
             color: $mode === "light" ? "black" : "white",
             style: {
               fontSize: "13px",
-              fontWeight: "bold",
+              fontWeight: "",
             },
             formatter: function () {
               return this.y;
diff --git a/src/routes/ipos/+layout.svelte b/src/routes/ipos/+layout.svelte
index 5212faaf..d26546df 100644
--- a/src/routes/ipos/+layout.svelte
+++ b/src/routes/ipos/+layout.svelte
@@ -40,7 +40,7 @@
       path: "/ipos/statistics",
     },
     {
-      title: "IPO News",
+      title: "News",
       path: "/ipos/news",
     },
   ];
@@ -100,7 +100,7 @@
 
           {#if activeIdx === 0}
             <nav class="overflow-x-auto whitespace-nowrap">
-              <ul class="flex flex-row items-center w-full text-[1rem]">
+              <ul class="flex flex-row items-center w-full">
                 {#each ["Latest", "2025", "2024", "2023", "2022", "2021", "2020", "2019"] as item}
                   {#if item !== "Latest"}
                     <a
diff --git a/src/routes/ipos/+page.svelte b/src/routes/ipos/+page.svelte
index d89768ef..bb7ff49b 100644
--- a/src/routes/ipos/+page.svelte
+++ b/src/routes/ipos/+page.svelte
@@ -37,10 +37,7 @@
   description="Detailed information the last 200 IPOs (initial public offerings) on the stock market. Includes IPO prices, dates, total returns and more."
 />
 
-<div class="w-full overflow-hidden m-auto mt-5">
-  <h2 class=" text-xl font- text-start mt-5 w-full font-semibold">
-    Last {rawData?.length} IPOs
-  </h2>
+<div class="w-full overflow-hidden m-auto">
   <div class="sm:p-0 flex justify-center w-full m-auto overflow-hidden">
     <div
       class="relative flex justify-center items-start overflow-hidden w-full"
@@ -78,7 +75,7 @@
               </ul>
               <a
                 href={`/ipos/news`}
-                class="flex justify-center items-center rounded cursor-pointer w-full py-2 mt-3 text-[1rem] text-center font-semibold text-white dark:text-black m-auto sm:hover:bg-blue-600 dark:sm:hover:bg-gray-300 bg-[#3B82F6] dark:bg-[#fff] transition duration-100"
+                class="flex justify-center items-center rounded cursor-pointer w-full py-2 -mb-2 text-[1rem] text-center font-semibold text-white dark:text-black m-auto sm:hover:bg-blue-600 dark:sm:hover:bg-gray-300 bg-[#3B82F6] dark:bg-[#fff] transition duration-100"
               >
                 More IPO News
               </a>
diff --git a/src/routes/ipos/news/+page.svelte b/src/routes/ipos/news/+page.svelte
index e1c4c4ce..6bde1b67 100644
--- a/src/routes/ipos/news/+page.svelte
+++ b/src/routes/ipos/news/+page.svelte
@@ -194,7 +194,7 @@
             class="w-full border border-gray-300 dark:border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer bg-inherit"
           >
             <div class="p-4 text-sm">
-              <h3 class="text-xl font-bold mb-3">IPO News</h3>
+              <h3 class="text-xl font-bold mb-3">Stock News</h3>
               <ul class="">
                 {#each marketNews?.slice(0, 10) as item}
                   <li class="mb-3 last:mb-1">
diff --git a/src/routes/ipos/statistics/+page.svelte b/src/routes/ipos/statistics/+page.svelte
index 6e069b77..0d59c4c8 100644
--- a/src/routes/ipos/statistics/+page.svelte
+++ b/src/routes/ipos/statistics/+page.svelte
@@ -91,14 +91,14 @@
         categories: years,
         gridLineWidth: 0,
         labels: {
-          style: { color: $mode === "light" ? "black" : "white" },
+          style: { color: $mode === "light" ? "#545454" : "white" },
         },
       },
       yAxis: {
         gridLineWidth: 1,
         gridLineColor: $mode === "light" ? "#e5e7eb" : "#111827",
         labels: {
-          style: { color: $mode === "light" ? "black" : "white" },
+          style: { color: $mode === "light" ? "#545454" : "white" },
         },
         title: { text: null },
         opposite: true,
@@ -135,7 +135,7 @@
             color: $mode === "light" ? "black" : "white",
             style: {
               fontSize: "13px",
-              fontWeight: "bold",
+              fontWeight: "",
             },
             formatter: function () {
               return this.y;
diff --git a/src/routes/options-calculator/+page.svelte b/src/routes/options-calculator/+page.svelte
index 5b62aebb..61a47cde 100644
--- a/src/routes/options-calculator/+page.svelte
+++ b/src/routes/options-calculator/+page.svelte
@@ -16,6 +16,8 @@
   let selectedStrategy = "Long Call";
   let selectedOptionType = "Call";
   let selectedTicker = "TSLA";
+  let selectedAction = "Buy";
+  let selectedOptionPrice;
 
   let optionData = data?.getData[selectedOptionType];
   let dateList = Object?.keys(optionData);
@@ -274,6 +276,14 @@
       selectedOptionType = "Call";
     }
   }
+  function handleAction() {
+    if (selectedAction === "Buy") {
+      selectedAction = "Sell";
+    } else {
+      selectedAction = "But";
+    }
+  }
+
   onMount(async () => {
     await loadData("default");
   });
@@ -323,7 +333,10 @@
                 >
                   <span>{strategy.name}</span>
                   {#if strategy?.sentiment}
-                    <span class="">({strategy.sentiment})</span>
+                    <span
+                      class="badge px-2 text-xs rounded-full bg-green-100 text-green-800"
+                      >{strategy.sentiment}</span
+                    >
                   {/if}
                 </div>
               {/each}
@@ -417,8 +430,12 @@
                       </td>
                       <td class="px-4 py-3 whitespace-nowrap">
                         <label
-                          class="badge px-2 rounded-md bg-green-100 text-green-800 font-semibold cursor-pointer"
-                          >Buy</label
+                          on:click={handleAction}
+                          class="badge px-2 select-none rounded-md {selectedAction ===
+                          'Buy'
+                            ? 'bg-green-100 text-green-800'
+                            : 'bg-red-100 text-red-800'} font-semibold cursor-pointer"
+                          >{selectedAction}</label
                         >
                       </td>
                       <td class="px-4 py-3 whitespace-nowrap">
@@ -434,7 +451,7 @@
                           <DropdownMenu.Trigger asChild let:builder>
                             <Button
                               builders={[builder]}
-                              class="mb-1 border border-gray-300 dark:border-none shadow-sm bg-white dark:bg-[#000] h-[35px] flex flex-row justify-between items-center min-w-[130px] w-[140px] sm:w-auto  px-3  rounded-md truncate"
+                              class="mb-1 border border-gray-300 dark:border-none  bg-white dark:bg-[#000] h-[35px] flex flex-row justify-between items-center min-w-[130px] w-[140px] sm:w-auto  px-3  rounded-md truncate"
                             >
                               <span class="truncate text-sm"
                                 >{formatDate(selectedDate)}</span
@@ -480,7 +497,7 @@
                           <DropdownMenu.Trigger asChild let:builder>
                             <Button
                               builders={[builder]}
-                              class="mb-1 border border-gray-300 dark:border-none shadow-sm bg-white dark:bg-[#000] h-[35px] flex flex-row justify-between items-center min-w-[130px] w-[140px] sm:w-auto  px-3  rounded-md truncate"
+                              class="mb-1 border border-gray-300 dark:border-none  bg-white dark:bg-[#000] h-[35px] flex flex-row justify-between items-center min-w-[130px] w-[140px] sm:w-auto  px-3  rounded-md truncate"
                             >
                               <span class="truncate text-sm"
                                 >{selectedStrike}</span
@@ -532,8 +549,8 @@
                       <td class="px-4 py-3 whitespace-nowrap">
                         <input
                           type="number"
-                          step="0.01"
-                          value="5.80"
+                          step="0.1"
+                          value={selectedOptionPrice}
                           class="border border-gray-300 rounded px-2 py-1 w-24 focus:outline-none focus:ring-1 focus:ring-blue-500"
                         />
                       </td>