AmineTMIRI/frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ui fix

Browse Source
This commit is contained in:
MuslemRahimi 2025-04-05 21:49:15 +02:00
parent 8693ca0918
commit 66296658a0
28 changed files with 907 additions and 131 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

0
src/lib/components/Adsense/BottomAds.svelte
View File

5
src/lib/components/AnalystEstimate.svelte
View File

@ -1041,9 +1041,10 @@
<div class="flex justify-center items-center h-80"> <div class="flex justify-center items-center h-80">
<div class="relative"> <div class="relative">
<label <label
class="bg-secondary rounded-md h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2" class="shadow-sm bg-gray-300 dark:bg-secondary rounded h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"
> >
<span class="loading loading-spinner loading-md text-gray-400" <span
class="loading loading-spinner loading-md text-muted dark:text-gray-400"
></span> ></span>
</label> </label>
</div> </div>

17
src/lib/components/ImpliedVolatility.svelte
View File

@ -148,14 +148,15 @@
{/if} {/if}
{:else} {:else}
<div class="flex justify-center items-center h-80"> <div class="flex justify-center items-center h-80">
<div class="relative"> <div class="relative">
<label <label
class="bg-secondary rounded-md h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2" class="shadow-sm bg-gray-300 dark:bg-secondary rounded h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"
> >
<span class="loading loading-spinner loading-md text-gray-400" <span
></span> class="loading loading-spinner loading-md text-muted dark:text-gray-400"
</label> ></span>
</div> </label>
</div>
</div> </div>
{/if} {/if}
{:else} {:else}

6
src/lib/components/Lazy.svelte
View File

@ -22,9 +22,11 @@
<div bind:this={el} class="flex justify-center items-center h-80"> <div bind:this={el} class="flex justify-center items-center h-80">
<div class="relative"> <div class="relative">
<label <label
class="bg-secondary rounded-md h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2" class="shadow-sm bg-gray-300 dark:bg-secondary rounded h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"
> >
<span class="loading loading-spinner loading-md text-gray-400"></span> <span
class="loading loading-spinner loading-md text-muted dark:text-gray-400"
></span>
</label> </label>
</div> </div>
</div> </div>

5
src/lib/components/LoginPopup.svelte
View File

@ -1573,9 +1573,10 @@ const output = await response.json();
<div class="absolute right-1/2 left-1/2 top-1/2 bottom-1/2"> <div class="absolute right-1/2 left-1/2 top-1/2 bottom-1/2">
<div class="relative"> <div class="relative">
<label <label
class="bg-secondary rounded-md h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2" class="shadow-sm bg-gray-300 dark:bg-secondary rounded h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"
> >
<span class="loading loading-spinner loading-md text-gray-400" <span
class="loading loading-spinner loading-md text-muted dark:text-gray-400"
></span> ></span>
</label> </label>
</div> </div>

69
src/lib/components/Options/ContractLookup.svelte
View File

@ -1,6 +1,6 @@
<script lang="ts"> <script lang="ts">
import { abbreviateNumber } from "$lib/utils"; import { abbreviateNumber, buildOptionSymbol } from "$lib/utils";
import { setCache, getCache, screenWidth } from "$lib/store"; import { setCache, getCache } from "$lib/store";
import * as DropdownMenu from "$lib/components/shadcn/dropdown-menu/index.js"; import * as DropdownMenu from "$lib/components/shadcn/dropdown-menu/index.js";
import { Button } from "$lib/components/shadcn/button/index.js"; import { Button } from "$lib/components/shadcn/button/index.js";
import Infobox from "$lib/components/Infobox.svelte"; import Infobox from "$lib/components/Infobox.svelte";
@ -43,25 +43,6 @@
}); });
}; };
function buildOptionSymbol(dateExpiration, optionType, strikePrice) {
// Format the expiration date as YYMMDD
const date = new Date(dateExpiration);
const year = date.getFullYear() % 100; // Last two digits of the year
const month = (date.getMonth() + 1).toString().padStart(2, "0"); // Months are 0-indexed
const day = date.getDate().toString().padStart(2, "0");
const expirationStr = `${year}${month}${day}`;
// Convert option type to a single uppercase letter (C for Call, P for Put)
const optionTypeChar = optionType.charAt(0).toUpperCase();
// Format strike price as 8 digits (multiply by 1000 and pad with leading zeros)
const strikePriceScaled = Math.round(strikePrice * 1000);
const strikeStr = strikePriceScaled.toString().padStart(8, "0");
// Combine all components into the final option symbol
return `${ticker}${expirationStr}${optionTypeChar}${strikeStr}`;
}
const currentTime = new Date( const currentTime = new Date(
new Date().toLocaleString("en-US", { timeZone: "America/New_York" }), new Date().toLocaleString("en-US", { timeZone: "America/New_York" }),
)?.getTime(); )?.getTime();
@ -410,6 +391,7 @@
rawDataHistory = []; rawDataHistory = [];
optionSymbol = buildOptionSymbol( optionSymbol = buildOptionSymbol(
ticker,
selectedDate, selectedDate,
selectedOptionType, selectedOptionType,
selectedStrike, selectedStrike,
@ -888,27 +870,32 @@
</table> </table>
</div> </div>
<div class="pb-8 sm:pb-2 rounded-md overflow-hidden"> <div class="mt-5 pb-2 rounded-md overflow-hidden">
<div <div class="flex flex-row items-center justify-between w-full mt-2">
class="flex flex-row items-center justify-between gap-x-2 ml-auto w-fit mt-2" <h2 class="text-xl sm:text-2xl font-bold text-start">
> Contract Chart
{#each ["Vol/OI", "IV"] as item} </h2>
<label <div class="w-fit ml-auto">
on:click={() => { {#each ["Vol/OI", "IV"] as item, index}
selectGraphType = item; <label
loadData("default"); on:click={() => {
}} selectGraphType = item;
class="px-3 py-1.5 {selectGraphType === item loadData("default");
? 'shadow-sm bg-gray-100 dark:bg-white text-black ' }}
: 'shadow-sm text-opacity-[0.6] border border-gray-300 dark:border-gray-600'} transition ease-out duration-100 sm:hover:bg-white sm:hover:text-black rounded-md cursor-pointer" class="px-3 py-1.5 text-sm {index === 0
> ? 'mr-2'
{item} : ''} {selectGraphType === item
</label> ? 'shadow-sm border border-gray-300 dark:border-gray-600 bg-gray-100 dark:bg-white text-black '
{/each} : 'shadow-sm text-opacity-[0.6] border border-gray-300 dark:border-gray-600'} transition ease-out duration-100 sm:hover:bg-white sm:hover:text-black rounded-md cursor-pointer"
>
{item}
</label>
{/each}
</div>
</div> </div>
{#if config} {#if config}
<div> <div>
<div class="grow pt-5"> <div class="grow pt-3">
<div class="relative"> <div class="relative">
<!-- Apply the blur class to the chart --> <!-- Apply the blur class to the chart -->
<div <div
@ -946,6 +933,10 @@
</div> </div>
{#if isLoaded && displayList?.length > 0} {#if isLoaded && displayList?.length > 0}
<h2 class="text-xl sm:text-2xl font-bold text-start mt-5">
Contract History
</h2>
<div <div
class="flex justify-start items-center m-auto overflow-x-auto cursor-normal" class="flex justify-start items-center m-auto overflow-x-auto cursor-normal"
> >

5
src/lib/components/Options/HottestContracts.svelte
View File

@ -1051,9 +1051,10 @@
<div class="m-auto flex justify-center items-center h-80"> <div class="m-auto flex justify-center items-center h-80">
<div class="relative"> <div class="relative">
<label <label
class="bg-[#272727] rounded-xl h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2" class="shadow-sm bg-gray-300 dark:bg-secondary rounded h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"
> >
<span class="loading loading-spinner loading-md text-gray-400" <span
class="loading loading-spinner loading-md text-muted dark:text-gray-400"
></span> ></span>
</label> </label>
</div> </div>

5
src/lib/components/Options/UnusualActivity.svelte
View File

@ -1126,9 +1126,10 @@
<div class="m-auto flex justify-center items-center h-80"> <div class="m-auto flex justify-center items-center h-80">
<div class="relative"> <div class="relative">
<label <label
class="bg-[#272727] rounded-xl h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2" class="shadow-sm bg-gray-300 dark:bg-secondary rounded h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"
> >
<span class="loading loading-spinner loading-md text-gray-400" <span
class="loading loading-spinner loading-md text-muted dark:text-gray-400"
></span> ></span>
</label> </label>
</div> </div>

6
src/lib/components/OptionsData.svelte
View File

@ -269,9 +269,11 @@
<div class="flex justify-center items-center h-80"> <div class="flex justify-center items-center h-80">
<div class="relative"> <div class="relative">
<label <label
class="bg-secondary rounded-md h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2" class="shadow-sm bg-gray-300 dark:bg-secondary rounded h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"
> >
<span class="loading loading-spinner loading-md"></span> <span
class="loading loading-spinner loading-md text-muted dark:text-gray-400"
></span>
</label> </label>
</div> </div>
</div> </div>

4
src/lib/components/RatingsChart.svelte
View File

@ -368,10 +368,10 @@
<div class="flex justify-center items-center h-80"> <div class="flex justify-center items-center h-80">
<div class="relative"> <div class="relative">
<label <label
class="bg-default rounded-md h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2" class="shadow-sm bg-gray-300 dark:bg-secondary rounded h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"
> >
<span <span
class="loading loading-spinner loading-md sm:loading-[1rem] text-gray-400" class="loading loading-spinner loading-md text-muted dark:text-gray-400"
></span> ></span>
</label> </label>
</div> </div>

14
src/lib/components/ShareStatistics.svelte
View File

@ -169,12 +169,14 @@
{:else} {:else}
<div class="flex justify-center items-center h-80"> <div class="flex justify-center items-center h-80">
<div class="relative"> <div class="relative">
<label <label
class="bg-secondary rounded-md h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2" class="shadow-sm bg-gray-300 dark:bg-secondary rounded h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"
> >
<span class="loading loading-spinner loading-md"></span> <span
</label> class="loading loading-spinner loading-md text-muted dark:text-gray-400"
</div> ></span>
</label>
</div>
</div> </div>
{/if} {/if}
</main> </main>

20
src/lib/utils.ts
View File

@ -24,6 +24,26 @@ if (!name) return "";
return wordsToRemove?.reduce((acc, word) => acc.replace(word, "").trim(), name); return wordsToRemove?.reduce((acc, word) => acc.replace(word, "").trim(), name);
} }
export function buildOptionSymbol(ticker, dateExpiration, optionType, strikePrice) {
// Format the expiration date as YYMMDD
const date = new Date(dateExpiration);
const year = date.getFullYear() % 100; // Last two digits of the year
const month = (date.getMonth() + 1).toString().padStart(2, "0"); // Months are 0-indexed
const day = date.getDate().toString().padStart(2, "0");
const expirationStr = `${year}${month}${day}`;
// Convert option type to a single uppercase letter (C for Call, P for Put)
const optionTypeChar = optionType.charAt(0).toUpperCase();
// Format strike price as 8 digits (multiply by 1000 and pad with leading zeros)
const strikePriceScaled = Math.round(strikePrice * 1000);
const strikeStr = strikePriceScaled.toString().padStart(8, "0");
// Combine all components into the final option symbol
return `${ticker}${expirationStr}${optionTypeChar}${strikeStr}`;
}
export function convertToSlug(title) { export function convertToSlug(title) {
// Remove punctuation, hyphens, and special characters // Remove punctuation, hyphens, and special characters
const cleanedTitle = title const cleanedTitle = title

3
src/routes/dark-pool-flow/+page.svelte
View File

@ -1309,7 +1309,8 @@
<label <label
class="bg-secondary rounded-md h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2" class="bg-secondary rounded-md h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"
> >
<span class="loading loading-spinner loading-md text-gray-400" <span
class="loading loading-spinner loading-md text-muted dark:text-gray-400"
></span> ></span>
</label> </label>
</div> </div>

2
src/routes/etf/[tickerID]/+page.svelte
View File

@ -760,7 +760,7 @@
class="bg-secondary rounded-md h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2" class="bg-secondary rounded-md h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"
> >
<span <span
class="loading loading-spinner loading-md text-gray-400" class="loading loading-spinner loading-md text-muted dark:text-gray-400"
></span> ></span>
</label> </label>
</div> </div>

5
src/routes/etf/[tickerID]/insider/+page.svelte
View File

@ -431,9 +431,10 @@
<div class="flex justify-center items-center h-80"> <div class="flex justify-center items-center h-80">
<div class="relative"> <div class="relative">
<label <label
class="bg-secondary rounded h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2" class="shadow-sm bg-gray-300 dark:bg-secondary rounded h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"
> >
<span class="loading loading-spinner loading-md text-gray-400" <span
class="loading loading-spinner loading-md text-muted dark:text-gray-400"
></span> ></span>
</label> </label>
</div> </div>

4
src/routes/index/[tickerID]/+page.svelte
View File

@ -771,10 +771,10 @@
> >
<div class="relative"> <div class="relative">
<label <label
class="bg-secondary rounded-md h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2" class="shadow-sm bg-gray-300 dark:bg-secondary rounded h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"
> >
<span <span
class="loading loading-spinner loading-md text-gray-400" class="loading loading-spinner loading-md text-muted dark:text-gray-400"
></span> ></span>
</label> </label>
</div> </div>

4
src/routes/login/+page.svelte
View File

@ -774,7 +774,9 @@
<label <label
class="bg-secondary rounded-md h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2" class="bg-secondary rounded-md h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"
> >
<span class="loading loading-spinner loading-md text-gray-400"></span> <span
class="loading loading-spinner loading-md text-muted dark:text-gray-400"
></span>
</label> </label>
</div> </div>
</div> </div>

32
src/routes/options-calculator/+page.server.ts
View File

@ -1,25 +1,49 @@
export const load = async ({ locals }) => { export const load = async ({ locals }) => {
const { apiKey, apiURL } = locals; const { apiKey, apiURL } = locals;
const getData = async () => { const getData = async () => {
const postData = {
ticker: 'TSLA',
};
// make the POST request to the endpoint const response = await fetch(apiURL + "/contract-lookup-summary", {
const response = await fetch(apiURL + "/potus-tracker", { method: "POST",
method: "GET",
headers: { headers: {
"Content-Type": "application/json", "Content-Type": "application/json",
"X-API-KEY": apiKey, "X-API-KEY": apiKey,
}, },
body: JSON.stringify(postData),
}); });
const output = await response.json(); const output = await response.json();
return output; return output;
}; };
const getStockQuote = async () => {
const postData = { ticker: 'TSLA' };
const response = await fetch(apiURL + "/historical-price", {
method: "POST",
headers: {
"Content-Type": "application/json",
"X-API-KEY": apiKey,
},
body: JSON.stringify(postData),
});
const output = await response.json();
return output;
};
// Make sure to return a promise // Make sure to return a promise
return { return {
getData: await getData(), getData: await getData(),
getStockQuote: await getStockQuote(),
}; };
}; };

787
src/routes/options-calculator/+page.svelte
View File

@ -1,19 +1,36 @@
<script lang="ts"> <script lang="ts">
import * as DropdownMenu from "$lib/components/shadcn/dropdown-menu/index.js";
import { Button } from "$lib/components/shadcn/button/index.js";
import SEO from "$lib/components/SEO.svelte"; import SEO from "$lib/components/SEO.svelte";
import { onMount } from "svelte";
import { buildOptionSymbol } from "$lib/utils";
import { setCache, getCache } from "$lib/store";
import { mode } from "mode-watcher"; import { mode } from "mode-watcher";
import highcharts from "$lib/highcharts.ts"; import highcharts from "$lib/highcharts.ts";
export let data; export let data;
let isLoaded = true;
let config = null; let config = null;
let selectedStrategy = "Long Call"; let selectedStrategy = "Long Call";
let selectedOptionType = "Call";
let selectedTicker = "TSLA";
let optionData = data?.getData[selectedOptionType];
let dateList = Object?.keys(optionData);
let selectedDate = Object?.keys(optionData)[0];
let strikeList = optionData[selectedDate] || [];
let selectedStrike = strikeList?.at(0) || [];
let optionSymbol;
let strategies = [ let strategies = [
{ name: "Custom Strategy", sentiment: "" },
{ name: "Long Call", sentiment: "Bullish" }, { name: "Long Call", sentiment: "Bullish" },
{ name: "Long Put", sentiment: "Bearish" }, { name: "Long Put", sentiment: "Bearish" },
{ name: "Short Call", sentiment: "Bearish" }, { name: "Short Call", sentiment: "Bearish" },
{ name: "Short Put", sentiment: "Bullish" }, { name: "Short Put", sentiment: "Bullish" },
/*
{ name: "Custom Strategy", sentiment: "" },
{ name: "Covered Call", sentiment: "Bullish" }, { name: "Covered Call", sentiment: "Bullish" },
{ name: "Protective Put", sentiment: "Bullish" }, { name: "Protective Put", sentiment: "Bullish" },
{ name: "Cash Secured Put", sentiment: "Bullish" }, { name: "Cash Secured Put", sentiment: "Bullish" },
@ -28,8 +45,28 @@
{ name: "Long Call Butterfly", sentiment: "Neutral" }, { name: "Long Call Butterfly", sentiment: "Neutral" },
{ name: "Long Straddle", sentiment: "Neutral" }, { name: "Long Straddle", sentiment: "Neutral" },
{ name: "Short Straddle", sentiment: "Neutral" }, { name: "Short Straddle", sentiment: "Neutral" },
*/
]; ];
const tradeInfo = {
type: "Long Call",
details: "BUY +1 TSLA Apr 11, 2025 280.0 call @$30.0",
currentPrice: "$239.34",
breakEvenPrice: "$310.00",
costOfTrade: "$3,000.00",
maxProfit: "Unlimited",
maxLoss: "-$3,000.00",
};
const formatDate = (dateString) => {
const date = new Date(dateString);
return date.toLocaleDateString("en-US", {
month: "short",
day: "2-digit",
year: "numeric",
});
};
function plotData() { function plotData() {
const action = "Buy"; const action = "Buy";
const optionType = "Call"; const optionType = "Call";
@ -57,7 +94,6 @@
dataPoints.push([s, payoff]); dataPoints.push([s, payoff]);
} }
// 2) Create Highcharts configuration
const options = { const options = {
credits: { credits: {
enabled: false, enabled: false,
@ -79,10 +115,10 @@
tickInterval: 50, tickInterval: 50,
title: { title: {
text: "TSLA Price at Expiration ($)", text: "TSLA Price at Expiration ($)",
style: { color: $mode === "light" ? "black" : "white" }, style: { color: $mode === "light" ? "#545454" : "white" },
}, },
labels: { labels: {
style: { color: $mode === "light" ? "black" : "white" }, style: { color: $mode === "light" ? "#545454" : "white" },
}, },
plotLines: [ plotLines: [
// Strike Price // Strike Price
@ -112,12 +148,12 @@
yAxis: { yAxis: {
title: { title: {
text: "Expected Profit/Loss ($)", text: "Expected Profit/Loss ($)",
style: { color: $mode === "light" ? "black" : "white" }, style: { color: $mode === "light" ? "#545454" : "white" },
}, },
gridLineWidth: 1, gridLineWidth: 1,
gridLineColor: $mode === "light" ? "#e5e7eb" : "#111827", gridLineColor: $mode === "light" ? "#e5e7eb" : "#111827",
labels: { labels: {
style: { color: $mode === "light" ? "black" : "white" }, style: { color: $mode === "light" ? "#545454" : "white" },
formatter: function () { formatter: function () {
return "$" + this.value.toFixed(0); return "$" + this.value.toFixed(0);
}, },
@ -179,6 +215,69 @@
return options; return options;
} }
const getContractHistory = async (contractId) => {
let output;
const cachedData = getCache(contractId, "getContractHistory");
if (cachedData) {
output = cachedData;
} else {
const postData = {
ticker: selectedTicker,
contract: contractId,
};
// make the POST request to the endpoint
const response = await fetch("/api/options-contract-history", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(postData),
});
output = await response.json();
setCache(contractId, output, "getContractHistory");
}
return output;
};
async function loadData(state: string) {
isLoaded = false;
optionData = data?.getData[selectedOptionType];
dateList = [...Object?.keys(optionData)];
strikeList = [...optionData[selectedDate]];
if (!strikeList?.includes(selectedStrike)) {
selectedStrike = strikeList?.at(0); // Set to first element if not found
}
optionSymbol = buildOptionSymbol(
selectedTicker,
selectedDate,
selectedOptionType,
selectedStrike,
);
const output = await getContractHistory(optionSymbol);
selectedOptionPrice = output?.history?.at(-1)?.mark;
isLoaded = true;
}
function handleOptionType() {
if (selectedOptionType === "Call") {
selectedOptionType = "Put";
} else {
selectedOptionType = "Call";
}
}
onMount(async () => {
await loadData("default");
});
config = plotData(); config = plotData();
</script> </script>
@ -250,67 +349,67 @@
<tr> <tr>
<th <th
scope="col" scope="col"
class="px-4 py-3 text-left text-sm font-semibold" class="px-4 py-1.5 text-left text-sm font-semibold"
> >
Ticker Ticker
</th> </th>
<th <th
scope="col" scope="col"
class="px-4 py-3 text-left text-sm font-semibold" class="px-4 py-1.5 text-left text-sm font-semibold"
> >
Action Action
</th> </th>
<th <th
scope="col" scope="col"
class="px-4 py-3 text-left text-sm font-semibold" class="px-4 py-1.5 text-left text-sm font-semibold"
> >
Quantity Quantity
</th> </th>
<th <th
scope="col" scope="col"
class="px-4 py-3 text-left text-sm font-semibold" class="px-4 py-1.5 text-left text-sm font-semibold"
> >
Expiration Date Expiration Date
</th> </th>
<th <th
scope="col" scope="col"
class="px-4 py-3 text-left text-sm font-semibold" class="px-4 py-1.5 text-left text-sm font-semibold"
> >
Strike Strike
</th> </th>
<th <th
scope="col" scope="col"
class="px-4 py-3 text-left text-sm font-semibold" class="px-4 py-1.5 text-left text-sm font-semibold"
> >
Type Type
</th> </th>
<th <th
scope="col" scope="col"
class="px-4 py-3 text-left text-sm font-semibold" class="px-4 py-1.5 text-left text-sm font-semibold"
> >
Price Price
</th> </th>
<th <th
scope="col" scope="col"
class="px-4 py-3 text-left text-sm font-semibold" class="px-4 py-1.5 text-left text-sm font-semibold"
> >
Delta Delta
</th> </th>
<th <th
scope="col" scope="col"
class="px-4 py-3 text-left text-sm font-semibold" class="px-4 py-1.5 text-left text-sm font-semibold"
> >
Adjustment Adjustment
</th> </th>
<th <th
scope="col" scope="col"
class="px-4 py-3 text-left text-sm font-semibold" class="px-4 py-1.5 text-left text-sm font-semibold"
></th> ></th>
</tr> </tr>
</thead> </thead>
<!-- Table body --> <!-- Table body -->
<tbody class="bg-white divide-y divide-gray-200 text-sm"> <tbody class="bg-[#F8F9FA] divide-y divide-gray-200 text-sm">
<!-- Example Option Leg Row --> <!-- Example Option Leg Row -->
<tr> <tr>
<td class="px-4 py-3 whitespace-nowrap font-bold"> <td class="px-4 py-3 whitespace-nowrap font-bold">
@ -331,24 +430,103 @@
/> />
</td> </td>
<td class="px-4 py-3 whitespace-nowrap"> <td class="px-4 py-3 whitespace-nowrap">
<input <DropdownMenu.Root>
type="date" <DropdownMenu.Trigger asChild let:builder>
class="border border-gray-300 rounded px-2 py-1 focus:outline-none focus:ring-1 focus:ring-blue-500" <Button
value="2025-05-12" 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"
>
<span class="truncate text-sm"
>{formatDate(selectedDate)}</span
>
<svg
class="-mr-1 ml-2 h-5 w-5 inline-block"
viewBox="0 0 20 20"
fill="currentColor"
style="max-width:40px"
aria-hidden="true"
>
<path
fill-rule="evenodd"
d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
clip-rule="evenodd"
></path>
</svg>
</Button>
</DropdownMenu.Trigger>
<DropdownMenu.Content
class="w-auto max-w-60 max-h-[400px] overflow-y-auto scroller relative"
>
<!-- Dropdown items -->
<DropdownMenu.Group class="pb-2"
>{#each dateList as item}
<DropdownMenu.Item
on:click={() => {
selectedDate = item;
loadData("default");
}}
class="sm:hover:bg-gray-200 dark:sm:hover:bg-primary cursor-pointer "
>
{formatDate(item)}
</DropdownMenu.Item>
{/each}</DropdownMenu.Group
>
</DropdownMenu.Content>
</DropdownMenu.Root>
</td> </td>
<td class="px-4 py-3 whitespace-nowrap"> <td class="px-4 py-3 whitespace-nowrap">
<input <DropdownMenu.Root>
type="number" <DropdownMenu.Trigger asChild let:builder>
step="0.01" <Button
value="280.0" builders={[builder]}
class="border border-gray-300 rounded px-2 py-1 w-24 focus:outline-none focus:ring-1 focus:ring-blue-500" 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"
/> >
<span class="truncate text-sm"
>{selectedStrike}</span
>
<svg
class="-mr-1 ml-2 h-5 w-5 inline-block"
viewBox="0 0 20 20"
fill="currentColor"
style="max-width:40px"
aria-hidden="true"
>
<path
fill-rule="evenodd"
d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
clip-rule="evenodd"
></path>
</svg>
</Button>
</DropdownMenu.Trigger>
<DropdownMenu.Content
class="w-auto max-w-60 max-h-[400px] overflow-y-auto scroller relative"
>
<!-- Dropdown items -->
<DropdownMenu.Group class="pb-2">
<!-- Added padding to avoid overlapping with Reset button -->
{#each strikeList as item}
<DropdownMenu.Item
on:click={() => {
selectedStrike = item;
loadData("default");
}}
class="sm:hover:bg-gray-200 dark:sm:hover:bg-primary cursor-pointer "
>
{item}
</DropdownMenu.Item>
{/each}
</DropdownMenu.Group>
</DropdownMenu.Content>
</DropdownMenu.Root>
</td> </td>
<td class="px-4 py-3 whitespace-nowrap"> <td class="px-4 py-3 whitespace-nowrap">
<label <label
class="badge px-2 rounded-md bg-blue-100 text-blue-800 font-semibold cursor-pointer" on:click={handleOptionType}
>Call</label class="select-none badge px-2 rounded-md bg-blue-100 text-blue-800 font-semibold cursor-pointer"
>{selectedOptionType}</label
> >
</td> </td>
<td class="px-4 py-3 whitespace-nowrap"> <td class="px-4 py-3 whitespace-nowrap">
@ -403,11 +581,550 @@
</tbody> </tbody>
</table> </table>
</div> </div>
{#if config} {#if isLoaded}
<div {#if config}
class="shadow-sm mt-5 border border-gray-300 dark:border-gray-800 rounded" <div
use:highcharts={config} class="shadow-sm mt-5 border border-gray-300 dark:border-gray-800 rounded"
></div> use:highcharts={config}
></div>
{/if}
<div class="mt-5">
<h1 class="text-2xl font-bold text-gray-800 mb-6">
Trade Information
</h1>
<!-- Trade Information Card -->
<div
class="border border-gray-300 dark:border-gray-800 rounded-lg p-4 mb-6 shadow-sm max-w-sm"
>
<div>Long Call</div>
<div class="text-green-800 font-semibold">
BUY +1 TSLA Apr 11, 2025 280.0 call @$30.0
</div>
</div>
<!-- Stock Section -->
<h2 class="text-xl font-bold text-gray-800 mb-4">Stock</h2>
<div class="grid grid-cols-2 sm:grid-cols-4 mb-6">
<div>
<div class="text-gray-600">TSLA Current Price</div>
<div class="flex items-baseline">
<span class="text-lg font-semibold"
>{tradeInfo.currentPrice}</span
>
</div>
</div>
<div>
<div class="flex items-center text-gray-600">
TSLA Breakeven Price
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-4 w-4 ml-1"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
/>
</svg>
</div>
<div class="flex items-baseline">
<span class="text-lg font-semibold"
>{tradeInfo.breakEvenPrice}</span
>
</div>
</div>
</div>
<!-- Trade Details Section -->
<h2 class="text-xl font-bold text-gray-800 mb-4">
Trade Details
</h2>
<div
class="grid grid-cols-2 md:grid-cols-4 gap-y-6 sm:gap-y-0 mb-6"
>
<div>
<div class="flex items-center text-gray-600">
Cost of Trade
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-4 w-4 ml-1"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
/>
</svg>
</div>
<div class="flex items-baseline">
<span class="text-lg font-semibold"
>{tradeInfo.costOfTrade}</span
>
</div>
</div>
<div>
<div class="flex items-center text-gray-600">
Maximum Profit
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-4 w-4 ml-1"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
/>
</svg>
</div>
<div class="text-lg font-semibold text-green-800">
{tradeInfo.maxProfit}
</div>
</div>
<div>
<div class="flex items-center text-gray-600">
Maximum Loss
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-4 w-4 ml-1"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
/>
</svg>
</div>
<div class="text-lg font-semibold text-red-600">
{tradeInfo.maxLoss}
</div>
</div>
</div>
<!--
<h2 class="text-xl font-bold text-gray-800 mb-4">
Probability Analysis
</h2>
<div class="grid grid-cols-2 md:grid-cols-4 mb-6">
<div>
<div class="flex items-center text-gray-600">
Probability of Profit (PoP)
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-4 w-4 ml-1"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
/>
</svg>
</div>
<div class="text-xl text-start">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"
/>
</svg>
</div>
</div>
<div>
<div class="flex items-center text-gray-600">
Probability of Max Profit
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-4 w-4 ml-1"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
/>
</svg>
</div>
<div class="text-xl text-center">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6 mx-auto"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"
/>
</svg>
</div>
</div>
<div>
<div class="flex items-center text-gray-600">
Probability of Max Loss
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-4 w-4 ml-1"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
/>
</svg>
</div>
<div class="text-xl text-center">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6 mx-auto"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"
/>
</svg>
</div>
</div>
</div>
<h2 class="text-xl font-bold text-gray-800 mb-4">
Risk Reward Analysis
</h2>
<div class="grid grid-cols-2 md:grid-cols-3 gap-6 mb-6">
<div>
<div class="flex items-center text-gray-600">
Expected Value (EV)
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-4 w-4 ml-1"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
/>
</svg>
</div>
<div class="text-xl text-center">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6 mx-auto"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"
/>
</svg>
</div>
</div>
<div>
<div class="flex items-center text-gray-600">
Expected Return (EV/risk)
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-4 w-4 ml-1"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
/>
</svg>
</div>
<div class="text-xl text-center">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6 mx-auto"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"
/>
</svg>
</div>
</div>
<div>
<div class="flex items-center text-gray-600">
Reward/Risk
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-4 w-4 ml-1"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
/>
</svg>
</div>
<div class="text-xl text-center">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6 mx-auto"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"
/>
</svg>
</div>
</div>
</div>
<h2
class="text-xl font-bold text-gray-800 mb-4 flex items-center"
>
Position Greeks
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-4 w-4 ml-1"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
/>
</svg>
</h2>
<div class="grid grid-cols-2 md:grid-cols-4 gap-6 mb-6">
<div>
<div class="flex items-center text-gray-600">
Delta (Δ)
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-4 w-4 ml-1"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
/>
</svg>
</div>
<div class="text-xl text-center">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6 mx-auto"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"
/>
</svg>
</div>
</div>
<div>
<div class="flex items-center text-gray-600">
Gamma (Γ)
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-4 w-4 ml-1"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
/>
</svg>
</div>
<div class="text-xl text-center">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6 mx-auto"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"
/>
</svg>
</div>
</div>
<div>
<div class="flex items-center text-gray-600">
Theta (Θ)
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-4 w-4 ml-1"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
/>
</svg>
</div>
<div class="text-xl text-center">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6 mx-auto"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"
/>
</svg>
</div>
</div>
<div>
<div class="flex items-center text-gray-600">
Vega (v)
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-4 w-4 ml-1"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
/>
</svg>
</div>
<div class="text-xl text-center">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6 mx-auto"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"
/>
</svg>
</div>
</div>
</div>
-->
</div>
{:else}
<div class="flex justify-center items-center h-80">
<div class="relative">
<label
class="shadow-sm bg-gray-300 dark:bg-secondary rounded h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"
>
<span
class="loading loading-spinner loading-md text-muted dark:text-gray-400"
></span>
</label>
</div>
</div>
{/if} {/if}
</div> </div>
</div> </div>

5
src/routes/politicians/+page.svelte
View File

@ -356,9 +356,10 @@
<div class="flex justify-center items-center h-80"> <div class="flex justify-center items-center h-80">
<div class="relative"> <div class="relative">
<label <label
class="bg-secondary rounded-md h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2" class="shadow-sm bg-gray-300 dark:bg-secondary rounded h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"
> >
<span class="loading loading-spinner loading-md text-gray-400" <span
class="loading loading-spinner loading-md text-muted dark:text-gray-400"
></span> ></span>
</label> </label>
</div> </div>

4
src/routes/register/+page.svelte
View File

@ -797,7 +797,9 @@
<label <label
class="bg-secondary rounded-md h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2" class="bg-secondary rounded-md h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"
> >
<span class="loading loading-spinner loading-md text-gray-400"></span> <span
class="loading loading-spinner loading-md text-muted dark:text-gray-400"
></span>
</label> </label>
</div> </div>
</div> </div>

6
src/routes/stock-screener/+page.svelte
View File

@ -3529,9 +3529,11 @@ const handleKeyDown = (event) => {
<div class="flex justify-center items-center h-80"> <div class="flex justify-center items-center h-80">
<div class="relative"> <div class="relative">
<label <label
class="bg-primary rounded-xl h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2" class="shadow-sm bg-gray-300 dark:bg-secondary rounded h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"
> >
<span class="loading loading-spinner loading-md text-gray-400"></span> <span
class="loading loading-spinner loading-md text-muted dark:text-gray-400"
></span>
</label> </label>
</div> </div>
</div> </div>

2
src/routes/stocks/[tickerID]/+page.svelte
View File

@ -766,7 +766,7 @@
class="bg-secondary rounded-md h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2" class="bg-secondary rounded-md h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"
> >
<span <span
class="loading loading-spinner loading-md text-gray-400" class="loading loading-spinner loading-md text-muted dark:text-gray-400"
></span> ></span>
</label> </label>
</div> </div>

5
src/routes/stocks/[tickerID]/insider/+page.svelte
View File

@ -250,9 +250,10 @@
<div class="flex justify-center items-center h-80"> <div class="flex justify-center items-center h-80">
<div class="relative"> <div class="relative">
<label <label
class="bg-secondary rounded-md h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2" class="shadow-sm bg-gray-300 dark:bg-secondary rounded h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"
> >
<span class="loading loading-spinner loading-md text-gray-400" <span
class="loading loading-spinner loading-md text-muted dark:text-gray-400"
></span> ></span>
</label> </label>
</div> </div>

5
src/routes/stocks/[tickerID]/insider/transcripts/+page.svelte
View File

@ -279,9 +279,10 @@
<div class="flex justify-center items-center h-80"> <div class="flex justify-center items-center h-80">
<div class="relative"> <div class="relative">
<label <label
class="bg-secondary rounded-md h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2" class="shadow-sm bg-gray-300 dark:bg-secondary rounded h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"
> >
<span class="loading loading-spinner loading-md text-gray-400" <span
class="loading loading-spinner loading-md text-muted dark:text-gray-400"
></span> ></span>
</label> </label>
</div> </div>

4
src/routes/stocks/[tickerID]/metrics/+page.svelte
View File

@ -162,7 +162,7 @@
</h2> </h2>
<div <div
class="no-scrollbar flex justify-start items-center w-screen sm:w-full mt-6 m-auto overflow-x-auto pr-5 sm:pr-0" class="no-scrollbar flex justify-start items-center w-screen sm:w-full mt-6 m-auto overflow-x-auto ovef pr-5 sm:pr-0"
> >
<table <table
class="table table-sm table-compact no-scrollbar rounded-none sm:rounded-md w-full border border-gray-300 dark:border-gray-800 m-auto" class="table table-sm table-compact no-scrollbar rounded-none sm:rounded-md w-full border border-gray-300 dark:border-gray-800 m-auto"
@ -175,7 +175,7 @@
> >
{#each geographicXData as item} {#each geographicXData as item}
<th <th
class="z-20 bg-default border-b border-gray-800 text-white font-semibold text-sm text-center bg-default" class="z-20 border-b border-gray-300 dark:border-gray-800 font-semibold text-sm text-center"
>{new Date(item ?? null)?.toLocaleString("en-US", { >{new Date(item ?? null)?.toLocaleString("en-US", {
month: "short", month: "short",
day: "numeric", day: "numeric",

5
src/routes/watchlist/options/+page.svelte
View File

@ -1108,9 +1108,10 @@
<div class="m-auto flex justify-center items-center h-80"> <div class="m-auto flex justify-center items-center h-80">
<div class="relative"> <div class="relative">
<label <label
class="bg-[#272727] rounded-xl h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2" class="shadow-sm bg-gray-300 dark:bg-secondary rounded h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"
> >
<span class="loading loading-spinner loading-md text-gray-400" <span
class="loading loading-spinner loading-md text-muted dark:text-gray-400"
></span> ></span>
</label> </label>
</div> </div>

5
src/routes/watchlist/stocks/+page.svelte
View File

@ -1995,9 +1995,10 @@
<div class="flex justify-center items-center h-80"> <div class="flex justify-center items-center h-80">
<div class="relative"> <div class="relative">
<label <label
class="bg-secondary rounded h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2" class="shadow-sm bg-gray-300 dark:bg-secondary rounded h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"
> >
<span class="loading loading-spinner loading-md text-gray-400" <span
class="loading loading-spinner loading-md text-muted dark:text-gray-400"
></span> ></span>
</label> </label>
</div> </div>