From a80a1a3ff8b1b32c9474038cc6bffdfad9f5b8fc Mon Sep 17 00:00:00 2001
From: MuslemRahimi <moslem_rahimi@hotmail.de>
Date: Thu, 30 Jan 2025 15:17:01 +0100
Subject: [PATCH] ui fixes

---
 src/lib/components/NextEarnings.svelte |  69 ++++++---
 src/routes/+page.svelte                | 198 ++++++++++++++++++-------
 2 files changed, 190 insertions(+), 77 deletions(-)

diff --git a/src/lib/components/NextEarnings.svelte b/src/lib/components/NextEarnings.svelte
index 3998c5fc..c7ddf1df 100644
--- a/src/lib/components/NextEarnings.svelte
+++ b/src/lib/components/NextEarnings.svelte
@@ -68,32 +68,53 @@
           during market hours.
         {/if}
         <br />Analysts project revenue of
-        <span class="font-semibold"
-          >{@html abbreviateNumber(rawData?.revenueEst, true, true)}</span
-        >, reflecting a
-        <span
-          class="{revenueRatio >= 0 && revenueRatio !== 'Infinity'
-            ? "before:content-['+'] text-[#00FC50]"
-            : revenueRatio < 0 && revenueRatio !== 'Infinity'
-              ? 'text-[#FF2F1F]'
-              : 'text-white'} "
-          >{revenueRatio !== "Infinity"
-            ? abbreviateNumber(revenueRatio) + "%"
-            : "n/a"}</span
-        >
-        YoY {revenueRatio > 0 ? "growth" : revenueRatio < 0 ? "shrinking" : ""}
-        {#if epsRatio !== null}
-          and earnings per share of
-          <span class="font-semibold">{rawData?.epsEst}</span>, making a
-          <span
-            class="{epsRatio > 0
-              ? "before:content-['+'] text-[#00FC50]"
-              : 'text-[#FF2F1F]'} ">{epsRatio}%</span
+        {#if data?.user?.tier !== "Pro"}
+          ... Unlock content with
+          <a
+            class="inline-block ml-0.5 text-blue-400 sm:hover:text-white"
+            href="/pricing"
+            >Pro Subscription <svg
+              class="w-4 h-4 mb-1 inline-block text[#A3A3A3] sm:hover:text-white"
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 24 24"
+              ><path
+                fill="currentColor"
+                d="M17 9V7c0-2.8-2.2-5-5-5S7 4.2 7 7v2c-1.7 0-3 1.3-3 3v7c0 1.7 1.3 3 3 3h10c1.7 0 3-1.3 3-3v-7c0-1.7-1.3-3-3-3M9 7c0-1.7 1.3-3 3-3s3 1.3 3 3v2H9z"
+              /></svg
+            ></a
           >
-          {epsRatio > 0 ? "increase" : epsRatio < 0 ? "decrease" : ""} YoY.
         {:else}
-          and earnings per share of
-          <span class="font-semibold">{rawData?.epsEst}</span>.
+          <span class="font-semibold"
+            >{@html abbreviateNumber(rawData?.revenueEst, true, true)}</span
+          >, reflecting a
+          <span
+            class="{revenueRatio >= 0 && revenueRatio !== 'Infinity'
+              ? "before:content-['+'] text-[#00FC50]"
+              : revenueRatio < 0 && revenueRatio !== 'Infinity'
+                ? 'text-[#FF2F1F]'
+                : 'text-white'} "
+            >{revenueRatio !== "Infinity"
+              ? abbreviateNumber(revenueRatio) + "%"
+              : "n/a"}</span
+          >
+          YoY {revenueRatio > 0
+            ? "growth"
+            : revenueRatio < 0
+              ? "shrinking"
+              : ""}
+          {#if epsRatio !== null}
+            and earnings per share of
+            <span class="font-semibold">{rawData?.epsEst}</span>, making a
+            <span
+              class="{epsRatio > 0
+                ? "before:content-['+'] text-[#00FC50]"
+                : 'text-[#FF2F1F]'} ">{epsRatio}%</span
+            >
+            {epsRatio > 0 ? "increase" : epsRatio < 0 ? "decrease" : ""} YoY.
+          {:else}
+            and earnings per share of
+            <span class="font-semibold">{rawData?.epsEst}</span>.
+          {/if}
         {/if}
       </div>
     </div>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 0d5c9203..eadfd0b7 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -387,19 +387,55 @@
             <Card.Content>
               {#if recentWIIM?.length !== 0}
                 <ul style="padding-left: 5px;">
-                  {#each recentWIIM as item}
-                    <li
-                      class="text-sm sm:text-[1rem]"
-                      style="margin-left: 8px; margin-bottom: 15px; list-style-type: disc;"
-                    >
-                      {item?.text}
-
-                      <a
-                        href={`/stocks/${item?.ticker}`}
-                        class="inline-block badge rounded-sm ml-1 px-2 m-auto text-blue-400 sm:hover:text-white"
-                        >{item?.ticker}</a
+                  {#each recentWIIM as item, index}
+                    {#if index >= 3 && data?.user?.tier !== "Pro"}
+                      <li
+                        class="text-sm sm:text-[1rem]"
+                        style="margin-left: 8px; margin-bottom: 15px; list-style-type: disc;"
                       >
-                    </li>
+                        {item?.text?.slice(0, 48) + "..."}
+                        <a href="/pricing" class="inline-block text-sm">
+                          <svg
+                            class="size-5 text-[#fff] inline-block"
+                            viewBox="0 0 20 20"
+                            fill="currentColor"
+                            style="max-width: 40px;"
+                          >
+                            <path
+                              fill-rule="evenodd"
+                              d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z"
+                              clip-rule="evenodd"
+                            >
+                            </path>
+                          </svg>
+
+                          <span
+                            class="ml-1 font-semibold text-gray-300 group-hover:text-white"
+                          >
+                            Upgrade
+                          </span>
+                        </a>
+
+                        <a
+                          href={`/stocks/${item?.ticker}`}
+                          class="inline-block badge rounded-sm ml-1 px-2 m-auto text-blue-400 sm:hover:text-white"
+                          >{item?.ticker}</a
+                        >
+                      </li>
+                    {:else}
+                      <li
+                        class="text-sm sm:text-[1rem]"
+                        style="margin-left: 8px; margin-bottom: 15px; list-style-type: disc;"
+                      >
+                        {item?.text}
+
+                        <a
+                          href={`/stocks/${item?.ticker}`}
+                          class="inline-block badge rounded-sm ml-1 px-2 m-auto text-blue-400 sm:hover:text-white"
+                          >{item?.ticker}</a
+                        >
+                      </li>
+                    {/if}
                   {/each}
                 </ul>
               {:else}
@@ -648,48 +684,104 @@
             <Card.Content>
               {#if data?.getDashboard?.upcomingEarnings?.length !== 0}
                 <ul style="padding-left: 5px;">
-                  {#each data?.getDashboard?.upcomingEarnings as item}
-                    <li
-                      class="text-sm sm:text-[1rem]"
-                      style=" margin-left: 8px;  margin-bottom: 30px; list-style-type: disc;"
-                    >
-                      <strong>{item?.name}</strong> (<HoverStockChart
-                        symbol={item?.symbol}
-                      />)
-                      {item?.isToday === true
-                        ? "will report today"
-                        : [
-                              "Monday",
-                              "Tuesday",
-                              "Wednesday",
-                              "Thursday",
-                            ].includes(
-                              new Date().toLocaleDateString("en-US", {
-                                weekday: "long",
-                              }),
-                            )
-                          ? "will report tomorrow"
-                          : "will report monday"}
-                      {#if item?.time}
-                        {#if compareTimes(item?.time, "16:00") >= 0}
-                          after market closes.
-                        {:else if compareTimes(item?.time, "09:30") <= 0}
-                          before market opens.
-                        {:else}
-                          during market.
+                  {#each data?.getDashboard?.upcomingEarnings as item, index}
+                    {#if index >= 3 && data?.user?.tier !== "Pro"}
+                      <li
+                        class="text-sm sm:text-[1rem]"
+                        style=" margin-left: 8px;  margin-bottom: 30px; list-style-type: disc;"
+                      >
+                        <strong>{item?.name}</strong> (<HoverStockChart
+                          symbol={item?.symbol}
+                        />)
+                        {item?.isToday === true
+                          ? "will report today"
+                          : [
+                                "Monday",
+                                "Tuesday",
+                                "Wednesday",
+                                "Thursday",
+                              ].includes(
+                                new Date().toLocaleDateString("en-US", {
+                                  weekday: "long",
+                                }),
+                              )
+                            ? "will report tomorrow"
+                            : "will report monday"}
+                        {#if item?.time}
+                          {#if compareTimes(item?.time, "16:00") >= 0}
+                            after market closes.
+                          {:else if compareTimes(item?.time, "09:30") <= 0}
+                            before market opens.
+                          {:else}
+                            during market.
+                          {/if}
+                        {/if}Analysts estimate ...
+                        <a href="/pricing" class="inline-block text-sm">
+                          <svg
+                            class="size-5 text-[#fff] inline-block"
+                            viewBox="0 0 20 20"
+                            fill="currentColor"
+                            style="max-width: 40px;"
+                          >
+                            <path
+                              fill-rule="evenodd"
+                              d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z"
+                              clip-rule="evenodd"
+                            >
+                            </path>
+                          </svg>
+
+                          <span
+                            class="ml-1 font-semibold text-gray-300 group-hover:text-white"
+                          >
+                            Upgrade
+                          </span>
+                        </a>
+                      </li>
+                    {:else}
+                      <li
+                        class="text-sm sm:text-[1rem]"
+                        style=" margin-left: 8px;  margin-bottom: 30px; list-style-type: disc;"
+                      >
+                        <strong>{item?.name}</strong> (<HoverStockChart
+                          symbol={item?.symbol}
+                        />)
+                        {item?.isToday === true
+                          ? "will report today"
+                          : [
+                                "Monday",
+                                "Tuesday",
+                                "Wednesday",
+                                "Thursday",
+                              ].includes(
+                                new Date().toLocaleDateString("en-US", {
+                                  weekday: "long",
+                                }),
+                              )
+                            ? "will report tomorrow"
+                            : "will report monday"}
+                        {#if item?.time}
+                          {#if compareTimes(item?.time, "16:00") >= 0}
+                            after market closes.
+                          {:else if compareTimes(item?.time, "09:30") <= 0}
+                            before market opens.
+                          {:else}
+                            during market.
+                          {/if}
+                        {/if}Analysts estimate {abbreviateNumber(
+                          item?.revenueEst,
+                        )} in revenue ({(
+                          (item?.revenueEst / item?.revenuePrior - 1) *
+                          100
+                        )?.toFixed(2)}% YoY) and {item?.epsEst} in earnings per share
+                        {#if item?.epsPrior !== 0}
+                          ({(
+                            (item?.epsEst / item?.epsPrior - 1) *
+                            100
+                          )?.toFixed(2)}% YoY).
                         {/if}
-                      {/if}Analysts estimate {abbreviateNumber(
-                        item?.revenueEst,
-                      )} in revenue ({(
-                        (item?.revenueEst / item?.revenuePrior - 1) *
-                        100
-                      )?.toFixed(2)}% YoY) and {item?.epsEst} in earnings per share
-                      {#if item?.epsPrior !== 0}
-                        ({((item?.epsEst / item?.epsPrior - 1) * 100)?.toFixed(
-                          2,
-                        )}% YoY).
-                      {/if}
-                    </li>
+                      </li>
+                    {/if}
                   {/each}
                 </ul>
               {:else}