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,7 +87,10 @@
   }
 </script>
 
-<div class="px-0.5 lg:px-0">
+<div class="space-y-3">
+  <div class="h-auto w-full">
+    <!--Start Content-->
+    <div class="w-auto lg:w-full flex flex-col m-auto">
       <h2 class="mb-2 text-2xl text-white font-semibold">
         About {$stockTicker}
       </h2>
@@ -103,9 +106,7 @@
         </a>
       </div>
 
-  <div
+      <div class="mt-3 grid grid-cols-2 gap-3 w-full">
-    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
@@ -117,7 +118,8 @@
         <div class="col-span-1 text-gray-200">
           <span class="block font-semibold">Sector</span>
           <a
-        href={sectorNavigation?.find((item) => item?.title === sector)?.link}
+            href={sectorNavigation?.find((item) => item?.title === sector)
+              ?.link}
             class="sm:hover:text-blue-400 text-white underline underline-offset-4"
             >{sector}</a
           >
@@ -153,11 +155,19 @@
           </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

@@ -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>