clean code

src/lib/components/FinancialTable.svelte

@@ -1,27 +1,47 @@
 <script lang="ts">
   import { abbreviateNumber } from "$lib/utils";
-  export let data;
+  export let data: any[];
-  export let fields;
+  export let fields: { label: string; key: string }[];
+
+  // Use a Set for fast margin lookup
+  const marginKeys = new Set([
+    "pretaxProfitMargin",
+    "freeCashFlowMargin",
+    "grossProfitMargin",
+    "netProfitMargin",
+    "operatingProfitMargin",
+    "ebitdaMargin",
+  ]);
+
+  // Precompute fields with an additional flag
+  $: computedFields = fields.map((field) => ({
+    ...field,
+    isMargin: marginKeys.has(field.key),
+  }));
+
+  // Helper to format the cell value
+  function formatValue(
+    value: number | null | undefined,
+    isMargin: boolean,
+  ): string {
+    if (value === null || value === undefined || value === 0) {
+      return "n/a";
+    }
+    const formatted = abbreviateNumber(value.toFixed(2));
+    return isMargin ? formatted + "%" : formatted;
+  }
 </script>
 
-{#each fields as { label, key }}
+{#each computedFields as { label, key, isMargin } (key)}
   <tr class="text-white odd:bg-odd whitespace-nowrap border-b border-gray-800">
     <td
       class="text-start border-r border-gray-700 text-white text-sm sm:text-[1rem]"
     >
       {label}
     </td>
-    {#each data as item}
+    {#each data as item, index (index)}
       <td class="text-sm sm:text-[1rem] text-end">
-        {#if ["pretaxProfitMargin", "freeCashFlowMargin", "grossProfitMargin", "netProfitMargin", "operatingProfitMargin", "ebitdaMargin"]?.includes(key)}
+        {formatValue(item[key], isMargin)}
-          {item[key] !== null && item[key] !== 0 && item[key] !== undefined
-            ? abbreviateNumber(item[key]?.toFixed(2)) + "%"
-            : "n/a"}
-        {:else}
-          {item[key] !== null && item[key] !== 0 && item[key] !== undefined
-            ? abbreviateNumber(item[key]?.toFixed(2))
-            : "n/a"}
-        {/if}
       </td>
     {/each}
   </tr>

src/lib/components/Sidecard.svelte

@@ -87,77 +87,87 @@
   }
 </script>
 
-<div class="px-0.5 lg:px-0">
+<div class="space-y-3">
-  <h2 class="mb-2 text-2xl text-white font-semibold">
+  <div class="h-auto w-full">
-    About {$stockTicker}
+    <!--Start Content-->
-  </h2>
+    <div class="w-auto lg:w-full flex flex-col m-auto">
-  <p class="text-gray-200">
+      <h2 class="mb-2 text-2xl text-white font-semibold">
-    {snippet}
+        About {$stockTicker}
-  </p>
+      </h2>
-  <div class="inline-block">
+      <p class="text-gray-200">
-    <a
+        {snippet}
-      href={`/stocks/${$stockTicker}/profile`}
+      </p>
-      class="w-full text-md mt-1 cursor-pointer font-medium sm:hover:text-white text-blue-400 sm:hover:underline"
+      <div class="inline-block">
-    >
-      [Show more]
-    </a>
-  </div>
-
-  <div
-    class="mt-3 grid grid-cols-2 gap-3 w-full border-b border-gray-600 lg:border-none pb-8 lg:pb-0"
-  >
-    <div class="col-span-1 text-gray-200">
-      <span class="block font-semibold">Industry</span>
-      <a
-        href={getIndustryHref(industry)}
-        class="sm:hover:text-blue-400 text-white underline underline-offset-4"
-        >{industry}</a
-      >
-    </div>
-    <div class="col-span-1 text-gray-200">
-      <span class="block font-semibold">Sector</span>
-      <a
-        href={sectorNavigation?.find((item) => item?.title === sector)?.link}
-        class="sm:hover:text-blue-400 text-white underline underline-offset-4"
-        >{sector}</a
-      >
-    </div>
-    <div class="col-span-1 text-gray-200">
-      <span class="block font-semibold">IPO Date</span>
-      <span>{ipoDate}</span>
-    </div>
-    <div class="col-span-1 text-gray-200">
-      <span class="block font-semibold">Employees</span>
-      <a
-        href={`/stocks/${$stockTicker}/statistics/employees`}
-        class="sm:hover:text-blue-400 text-white underline underline-offset-4"
-        >{new Intl.NumberFormat("en")?.format(employees)}</a
-      >
-    </div>
-    <div class="col-span-1 text-gray-200">
-      <span class="block font-semibold">Stock Exchange</span>
-      <span>{exchange}</span>
-    </div>
-    <div class="col-span-1 text-gray-200">
-      <span class="block font-semibold">Ticker Symbol</span>
-      <span>{$stockTicker}</span>
-    </div>
-    {#if website}
-      <div class="col-span-1 whitespace-nowrap text-gray-200">
-        <span class="block font-semibold">Website</span>
         <a
-          href={website}
+          href={`/stocks/${$stockTicker}/profile`}
-          class="hover:sm:text-white truncate text-blue-400"
+          class="w-full text-md mt-1 cursor-pointer font-medium sm:hover:text-white text-blue-400 sm:hover:underline"
-          target="_blank">{website}</a
         >
+          [Show more]
+        </a>
       </div>
-    {/if}
+
+      <div class="mt-3 grid grid-cols-2 gap-3 w-full">
+        <div class="col-span-1 text-gray-200">
+          <span class="block font-semibold">Industry</span>
+          <a
+            href={getIndustryHref(industry)}
+            class="sm:hover:text-blue-400 text-white underline underline-offset-4"
+            >{industry}</a
+          >
+        </div>
+        <div class="col-span-1 text-gray-200">
+          <span class="block font-semibold">Sector</span>
+          <a
+            href={sectorNavigation?.find((item) => item?.title === sector)
+              ?.link}
+            class="sm:hover:text-blue-400 text-white underline underline-offset-4"
+            >{sector}</a
+          >
+        </div>
+        <div class="col-span-1 text-gray-200">
+          <span class="block font-semibold">IPO Date</span>
+          <span>{ipoDate}</span>
+        </div>
+        <div class="col-span-1 text-gray-200">
+          <span class="block font-semibold">Employees</span>
+          <a
+            href={`/stocks/${$stockTicker}/statistics/employees`}
+            class="sm:hover:text-blue-400 text-white underline underline-offset-4"
+            >{new Intl.NumberFormat("en")?.format(employees)}</a
+          >
+        </div>
+        <div class="col-span-1 text-gray-200">
+          <span class="block font-semibold">Stock Exchange</span>
+          <span>{exchange}</span>
+        </div>
+        <div class="col-span-1 text-gray-200">
+          <span class="block font-semibold">Ticker Symbol</span>
+          <span>{$stockTicker}</span>
+        </div>
+        {#if website}
+          <div class="col-span-1 whitespace-nowrap text-gray-200">
+            <span class="block font-semibold">Website</span>
+            <a
+              href={website}
+              class="hover:sm:text-white truncate text-blue-400"
+              target="_blank">{website}</a
+            >
+          </div>
+        {/if}
+      </div>
+      <a
+        href={`/stocks/${$stockTicker}/profile`}
+        class="rounded cursor-pointer w-full m-auto py-2 h-full mt-6 text-lg text-center font-semibold text-black sm:hover:hover:bg-gray-300 bg-[#ffff] transition duration-100"
+      >
+        Full Company Profile
+      </a>
+    </div>
   </div>
 </div>
 
 {#if Object?.keys(data?.getAnalystRating ?? {})?.length !== 0}
   <div
-    class="space-y-3 pt-5 {Object?.keys(data?.getAnalystRating ?? {})
+    class="space-y-3 pt-10 sm:pt-5 {Object?.keys(data?.getAnalystRating ?? {})
       ?.length !== 0
       ? ''
       : 'hidden'}"

src/routes/stocks/[tickerID]/+page.svelte

@@ -1186,7 +1186,7 @@
               </div>
 
               <div
-                class="w-full mt-5 m-auto sm:pl-6 sm:pb-6 {Object?.keys(
+                class="w-full m-auto mt-5 sm:mt-0 sm:pl-6 sm:pb-6 {Object?.keys(
                   data?.getNextEarnings || {},
                 )?.length !== 0
                   ? ''
@@ -1196,7 +1196,7 @@
               </div>
 
               <div
-                class="w-full mt-5 sm:mt-0 m-auto sm:pl-6 sm:pb-6 {data
+                class="w-full mt-10 sm:mt-0 m-auto sm:pl-6 sm:pb-6 {data
                   ?.getWhyPriceMoved?.length !== 0
                   ? ''
                   : 'hidden'}"

src/routes/stocks/[tickerID]/financials/+page.svelte

@@ -19,7 +19,7 @@
   import { CanvasRenderer } from "echarts/renderers";
   import Infobox from "$lib/components/Infobox.svelte";
   import SEO from "$lib/components/SEO.svelte";
-  
+
   use([LineChart, BarChart, GridComponent, TooltipComponent, CanvasRenderer]);
 
   export let data;
@@ -422,7 +422,6 @@
   }
 </script>
 
-
 <SEO
   title={`${$displayCompanyName} (${$stockTicker}) Financials - Income Statement · Stocknear`}
   description={`Detailed annual and timeFramely income statement for ${$displayCompanyName} (${$stockTicker}). See many years of revenue, expenses and profits or losses.`}
@@ -445,9 +444,7 @@
                     (item) => item?.propertyName === displayStatement,
                   )?.label}
                 {:else}
-                  Income Statement {filterRule === "annual"
+                  {$displayCompanyName?.replace("Inc.", "")} Income Statement
-                    ? "(Annual)"
-                    : "(Quarter)"}
                 {/if}
               </h1>
             </div>