ui fixes

src/routes/+layout.svelte

@@ -361,7 +361,7 @@ $: {
   <!--<ViewTransition />-->
 
   <!--Start Navbar-->
-  <div id="navbar" class="navbar {$screenWidth < 640 && hideHeader ? 'invisible -mt-20' : ''} border-b border-[#0F0F0F] w-screen sticky top-0 z-40 bg-[#202020]">
+  <div id="navbar" class="navbar {$screenWidth < 640 && hideHeader ? 'invisible -mt-20' : ''} border-b border-[#0F0F0F] w-screen fixed top-0 e z-40 bg-[#202020]">
 
   <div class="w-full max-w-[1600px] m-auto">
     <div class="flex flex-row items-center w-full xl:px-2">

src/routes/options-flow/+page.svelte

@@ -1,6 +1,6 @@
 <script lang='ts'>
   import { goto } from '$app/navigation';
-  import { userRegion, numberOfUnreadNotification, etfTicker, stockTicker, isOpen } from '$lib/store';
+  import { screenWidth, userRegion, numberOfUnreadNotification, etfTicker, stockTicker, isOpen } from '$lib/store';
   import notifySound from '$lib/audio/options-flow-reader.mp3';
   import UpgradeToPro from '$lib/components/UpgradeToPro.svelte';
   import { abbreviateNumber } from '$lib/utils';
@@ -49,6 +49,23 @@
   let mode = $isOpen === true ? true : false;
   let showMore = false;
   
+  let optionSymbol;
+  let optionDescription;
+  let optionPremium;
+  let optionExpiry;
+  let optionContract;
+  let optionType;
+  let optionStrike;
+  let optionVolume;
+  let optionSpot;
+
+  let optionOpenInterest;
+  let optionSentiment;
+  let optionPrice;
+  let optionTradeCount;
+  let optionExecutionEstimate;
+  let optionExchange;
+
   function toggleMode()
   {
       if ($isOpen) {
@@ -64,6 +81,29 @@
   }
   
   
+function handleViewData(optionData) {
+  //optionStart = optionData['Start Date'] === null ? 'n/a' : new Date(optionData['Start Date'])?.toLocaleString('en-US', { month: 'short', day: 'numeric', year: 'numeric', daySuffix: '2-digit' });
+  optionSymbol = optionData?.option_symbol;
+  optionDescription = optionData?.description;
+  optionPremium = abbreviateNumber(optionData?.cost_basis,true);
+  optionExpiry = reformatDate(optionData?.date_expiration);
+  optionContract = optionData?.put_call;
+  optionType = optionData?.type;
+  optionStrike = optionData?.strike_price;
+  optionVolume = new Intl.NumberFormat("en", {minimumFractionDigits: 0, maximumFractionDigits: 0}).format(optionData?.volume);
+  optionSpot = optionData?.underlying_price;
+  optionOpenInterest = new Intl.NumberFormat("en", {minimumFractionDigits: 0, maximumFractionDigits: 0}).format(optionData?.open_interest);
+  optionSentiment = optionData?.sentiment;
+  optionPrice = optionData?.price;
+  optionTradeCount = optionData?.tradeCount;
+  optionExecutionEstimate = optionData?.executionEstimate;
+  optionExchange = optionData?.exchange;
+
+  const openPopup = $screenWidth < 640 ? document.getElementById("optionDetailsMobileModal") : document.getElementById("optionDetailsDesktopModal");
+  openPopup?.dispatchEvent(new MouseEvent('click'))
+
+}
+
   async function websocketRealtimeData() {
   
   try {
@@ -185,6 +225,7 @@
     
     async function assetSelector(symbol, assetType)
       {    
+
         if(assetType === 'etf')
         {
           etfTicker.update(value => symbol);
@@ -804,13 +845,13 @@ $: {
                     <tbody>
                       {#each optionList as item,index}
                       <!-- row -->
-                      <tr on:click={() => assetSelector(item?.ticker, item?.assetType)} class="w-full odd:bg-[#202020] cursor-pointer {index+1 === optionList?.length && data?.user?.tier !== 'Pro' ? 'opacity-[0.1]' : ''}">
+                      <tr on:click={() => handleViewData(item)} class="w-full odd:bg-[#202020] cursor-pointer {index+1 === optionList?.length && data?.user?.tier !== 'Pro' ? 'opacity-[0.1]' : ''}">
                         
                         <td class="text-white pb-3 text-xs sm:text-sm text-start">
                           {item?.time}
                         </td>
     
-                        <th class="{index % 2 ? 'bg-[#0F0F0F]' : 'bg-[#202020]'} text-blue-400 text-start font-normal">
+                        <th on:click|stopPropagation={() => assetSelector(item?.ticker, item?.assetType)} class="{index % 2 ? 'bg-[#0F0F0F]' : 'bg-[#202020]'} text-blue-400 text-start font-normal">
                           {item?.ticker}
                         </th>
   
@@ -973,3 +1014,161 @@ $: {
         
       </div>
   </dialog>
+
+
+
+
+
+<!--Start Options Detail Desktop Modal-->
+
+
+<!-- Put this part before </body> tag -->
+<input type="checkbox" id="optionDetailsDesktopModal" class="modal-toggle" />
+
+<label for="optionDetailsDesktopModal" class="hidden sm:modal modal-bottom sm:modal-middle cursor-pointer">
+
+  <label for="optionDetailsDesktopModal"  class="cursor-pointer modal-backdrop"></label>
+
+
+
+  <!-- svelte-ignore a11y-label-has-associated-control -->
+  <label class="modal-box w-full relative bg-[#202020] h-auto max-h-[900px] overflow-y-scroll">
+    <label for="optionDetailsDesktopModal" class="cursor-pointer absolute right-5 top-2 bg-[#202020] text-2xl text-white">
+      ✕
+    </label>
+
+    <p class="text-gray-200 mt-10">
+      <span class="text-white text-xl font-semibold">Order Details:</span>
+      <br>
+      {optionSymbol}
+
+    </p>
+    <p class="py-4 text-gray-200 bg-[#202020] w-full">
+      <span class="font-semibold text-white">Description:</span>
+      <br>
+      {optionDescription}
+    </p>
+
+    <table class="table table-sm table-compact bg-[#202020] w-full mt-5 mb-10 text-white">
+      <tbody>
+        <!-- row 1 -->
+        <tr class="border-b border-slate-700 odd:bg-[#202020]">
+          <td class="font-semibold">Premium</td>
+          <td class="">{optionPremium}</td>
+          <td class="font-semibold">C/P</td>
+          <td class="">{optionContract}</td>
+        </tr>
+        <tr class="border-b border-slate-700 odd:bg-[#202020]">
+          <td class="font-semibold">Expiry</td>
+          <td class="">{optionExpiry}</td>
+          <td class="font-semibold">Type</td>
+          <td class="">{optionType}</td>
+        </tr>
+        <tr class="border-b border-slate-700 odd:bg-[#202020]">
+          <td class="font-semibold">Strike</td>
+          <td class="">${optionStrike}</td>
+          <td class="font-semibold">Volume</td>
+          <td class="">{optionVolume}</td>
+        </tr>
+        <tr class="border-b border-slate-700 odd:bg-[#202020]">
+          <td class="font-semibold">Spot</td>
+          <td class="">${optionSpot}</td>
+          <td class="font-semibold">Open Interest</td>
+          <td class="">{optionOpenInterest}</td>
+        </tr>
+        <tr class="border-b border-slate-700 odd:bg-[#202020]">
+          <td class="font-semibold">Price</td>
+          <td class="">${optionPrice}</td>
+          <td class="font-semibold">Sentiment</td>
+          <td class="">{optionSentiment}</td>
+        </tr>
+        <tr class="border-b border-slate-700 odd:bg-[#202020]">
+          <td class="font-semibold">Trade Count</td>
+          <td class="">{optionTradeCount}</td>
+          <td class="font-semibold">Exchange</td>
+          <td class="">{optionExchange}</td>
+        </tr>
+      </tbody>
+    </table>
+
+
+  </label>
+</label>
+
+
+<!--End Options Detial Desktop Modal-->
+
+  <!--Start Options Detail Modal-->
+<div class="sm:hidden drawer drawer-end z-40 overflow-hidden w-screen">
+  <input id="optionDetailsMobileModal" type="checkbox" class="drawer-toggle"/>
+  <div class="drawer-side overflow-hidden">
+  
+      
+    <div class="bg-[#000] min-h-screen w-screen pb-20 overflow-hidden">
+
+        <label for="optionDetailsMobileModal" class="absolute left-6 top-6">
+          <svg class="w-6 h-6 inline-block mb-0.5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#fff" d="M9.125 21.1L.7 12.7q-.15-.15-.213-.325T.425 12q0-.2.063-.375T.7 11.3l8.425-8.425q.35-.35.875-.35t.9.375q.375.375.375.875t-.375.875L3.55 12l7.35 7.35q.35.35.35.863t-.375.887q-.375.375-.875.375t-.875-.375Z"/></svg>
+        </label>
+
+  
+  <div class="w-full overflow-hidden overflow-y-scroll p-2">
+
+    <p class="text-xl font-semibold text-white mt-16 p-3">
+      <span class="text-xl font-semibold">Order Details:</span>
+      <br>
+      {optionSymbol}
+    </p>
+    <p class="py-4 text-gray-200 w-full p-3">
+      <span class="font-semibold text-white">Description:</span>
+      {optionDescription}
+    </p>
+
+    <table class="table table-sm table-compact w-full mt-5 mb-10 text-white">
+      <tbody>
+        <!-- row 1 -->
+        <tr class="border-b border-slate-700 odd:bg-[#202020]">
+          <td class="font-semibold">Premium</td>
+          <td class="">{optionPremium}</td>
+          <td class="font-semibold">C/P</td>
+          <td class="">{optionContract}</td>
+        </tr>
+        <tr class="border-b border-slate-700 odd:bg-[#202020]">
+          <td class="font-semibold">Expiry</td>
+          <td class="">{optionExpiry}</td>
+          <td class="font-semibold">Type</td>
+          <td class="">{optionType}</td>
+        </tr>
+        <tr class="border-b border-slate-700 odd:bg-[#202020]">
+          <td class="font-semibold">Strike</td>
+          <td class="">${optionStrike}</td>
+          <td class="font-semibold">Volume</td>
+          <td class="">{optionVolume}</td>
+        </tr>
+        <tr class="border-b border-slate-700 odd:bg-[#202020]">
+          <td class="font-semibold">Spot</td>
+          <td class="">${optionSpot}</td>
+          <td class="font-semibold">Open Interest</td>
+          <td class="">{optionOpenInterest}</td>
+        </tr>
+        <tr class="border-b border-slate-700 odd:bg-[#202020]">
+          <td class="font-semibold">Price</td>
+          <td class="">${optionPrice}</td>
+          <td class="font-semibold">Sentiment</td>
+          <td class="">{optionSentiment}</td>
+        </tr>
+        <tr class="odd:bg-[#202020]">
+          <td class="font-semibold">Trade Count</td>
+          <td class="">{optionTradeCount}</td>
+          <td class="font-semibold">Exchange</td>
+          <td class="">{optionExchange}</td>
+        </tr>
+      </tbody>
+    </table>
+
+        
+  </div>
+
+</div>
+</div>
+</div>
+<!--End Options Detail Modal-->