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

refactor code

Browse Source
This commit is contained in:
MuslemRahimi 2024-10-27 20:34:10 +01:00
parent a7af133376
commit b2d943a0cc
19 changed files with 992 additions and 413 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

275
src/lib/components/AIScore.svelte
View File

@ -1,131 +1,195 @@
<script lang="ts">
import { scoreComponent, stockTicker } from '$lib/store';
import { scoreComponent, stockTicker } from "$lib/store";
export let score;
export let tier;
// Use the correct reactive declaration
$: {
if ($stockTicker && typeof window !== 'undefined') {
if ($stockTicker && typeof window !== "undefined") {
// Correctly check if score is neither undefined nor null
$scoreComponent = score !== undefined && score !== null && score !== 0;
}
}
</script>
<section class="overflow-hidden text-white">
<main class="overflow-hidden ">
<div class="w-full">
<div class="flex flex-col items-center w-auto p-4 sm:p-4 bg-[#09090B] sm:bg-[#09090B] rounded-lg relative">
<div class="relative">
<h3 class="text-center text-white text-sm sm:text-[1rem] mb-2">AI Score</h3>
<label for="scoreInfo" class="absolute -top-3 -right-4 cursor-pointer border border-gray-900 rounded-full bg-[#242424] sm:hover:bg-[#313131] duration-100 p-1 text-gray-300 hover:text-gray-600 dark:text-dark-400 dark:hover:text-dark-300">
<svg class="h-[8px] w-[8px]" viewBox="0 0 4 16" fill="white" style="max-width:20px">
<path d="M0 6h4v10h-4v-10zm2-6c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2z"></path>
</svg>
</label>
</div>
<div class="flex flex-row items-center justify-between">
<div class="relative size-[50px] sm:size-[60px] ml-auto">
<svg class="size-full w-[50px] h-[50px] sm:w-[60px] sm:h-[60px]" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg">
<!-- Background Circle -->
<circle cx="18" cy="18" r="16" fill="none" class="stroke-current text-[#303030]" stroke-width="2"></circle>
<!-- score Circle inside a group with rotation -->
<g class="origin-center -rotate-90 transform">
<!-- score Circle -->
<circle cx="18" cy="18" r="16" fill="none"
class="stroke-current {score >= 7 ? 'text-[#37C97D]' : score >=4 ? 'text-[#FF9E21]' : 'text-[#FF2F1F]'}"
stroke-width="3"
stroke-dasharray="100.48"
stroke-dashoffset="{100.48 - ((tier === 'Pro' || ['AAPL','NVDA','GOOGL','META','AMD']?.includes($stockTicker) ? score : 0) / 10) * 100.48}">
</circle>
</g>
<!-- Text in the middle -->
<text x="18" y="21" text-anchor="middle" font-size="10" fill="#000">{tier === 'Pro' || ['AAPL','NVDA','GOOGL','META','AMD']?.includes($stockTicker) ? score : 0}</text>
</svg>
<!-- Percentage Text -->
<div class="absolute top-1/2 start-1/2 transform -translate-y-1/2 -translate-x-1/2">
{#if tier === 'Pro' || ['AAPL','NVDA','GOOGL','META','AMD']?.includes($stockTicker) }
<span class="text-center text-white text-xl font-semibold">
{score}
</span>
{:else}
<a class="block relative" href="/pricing">
<span class="text-base font-semibold text-blue-link blur group-hover:blur-[3px]">
XX
</span>
<div class="absolute top-0.5 flex items-center">
<svg class="size-5 text-[#FBCE3C]"
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>
</div>
</a>
{/if}
</div>
</div>
</div>
<h4 class="text-center text-white text-sm mt-1 font-semibold {tier === 'Pro' || ['AAPL','NVDA','GOOGL','META','AMD']?.includes($stockTicker) ? '': 'invisible'}">
{#if score === 10}
Strong Buy
{:else if score >=7}
Buy
{:else if score >=4}
Hold
{:else if score >=2}
Sell
{:else}
Strong Sell
{/if}
</h4>
</div>
</div>
</main>
</section>
<section class="overflow-hidden text-white">
<main class="overflow-hidden">
<div class="w-full">
<div
class="flex flex-col items-center w-auto p-4 sm:p-4 bg-[#09090B] sm:bg-[#09090B] rounded-lg relative"
>
<div class="relative">
<h3 class="text-center text-white text-sm sm:text-[1rem] mb-2">
AI Score
</h3>
<label
for="scoreInfo"
class="absolute -top-3 -right-4 cursor-pointer border border-gray-900 rounded-full bg-[#242424] sm:hover:bg-[#313131] duration-100 p-1 text-gray-300 hover:text-gray-600 dark:text-dark-400 dark:hover:text-dark-300"
>
<svg
class="h-[8px] w-[8px]"
viewBox="0 0 4 16"
fill="white"
style="max-width:20px"
>
<path
d="M0 6h4v10h-4v-10zm2-6c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2z"
></path>
</svg>
</label>
</div>
<div class="flex flex-row items-center justify-between">
<div class="relative size-[50px] sm:size-[60px] ml-auto">
<svg
class="size-full w-[50px] h-[50px] sm:w-[60px] sm:h-[60px]"
viewBox="0 0 36 36"
xmlns="http://www.w3.org/2000/svg"
>
<!-- Background Circle -->
<circle
cx="18"
cy="18"
r="16"
fill="none"
class="stroke-current text-[#303030]"
stroke-width="2"
></circle>
<!-- score Circle inside a group with rotation -->
<g class="origin-center -rotate-90 transform">
<!-- score Circle -->
<circle
cx="18"
cy="18"
r="16"
fill="none"
class="stroke-current {score >= 7
? 'text-[#37C97D]'
: score >= 4
? 'text-[#FF9E21]'
: 'text-[#FF2F1F]'}"
stroke-width="3"
stroke-dasharray="100.48"
stroke-dashoffset={100.48 -
((tier === "Pro" ||
["AAPL", "NVDA", "GOOGL", "META", "AMD"]?.includes(
$stockTicker,
)
? score
: 0) /
10) *
100.48}
>
</circle>
</g>
<!-- Text in the middle -->
<text
x="18"
y="21"
text-anchor="middle"
font-size="10"
fill="#000"
>{tier === "Pro" ||
["AAPL", "NVDA", "GOOGL", "META", "AMD"]?.includes($stockTicker)
? score
: 0}</text
>
</svg>
<!-- Percentage Text -->
<div
class="absolute top-1/2 start-1/2 transform -translate-y-1/2 -translate-x-1/2"
>
{#if tier === "Pro" || ["AAPL", "NVDA", "GOOGL", "META", "AMD"]?.includes($stockTicker)}
<span class="text-center text-white text-xl font-semibold">
{score}
</span>
{:else}
<a class="block relative" href="/pricing">
<span
class="text-base font-semibold text-blue-link blur group-hover:blur-[3px]"
>
XX
</span>
<div class="absolute top-0.5 flex items-center">
<svg
class="size-5 text-[#FBCE3C]"
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>
</div>
</a>
{/if}
</div>
</div>
</div>
<h4
class="text-center text-white text-sm mt-1 font-semibold {tier ===
'Pro' ||
['AAPL', 'NVDA', 'GOOGL', 'META', 'AMD']?.includes($stockTicker)
? ''
: 'invisible'}"
>
{#if score === 10}
Strong Buy
{:else if score >= 7}
Buy
{:else if score >= 4}
Hold
{:else if score >= 2}
Sell
{:else}
Strong Sell
{/if}
</h4>
</div>
</div>
</main>
</section>
<!-- Put this part before </body> tag -->
<input type="checkbox" id="scoreInfo" class="modal-toggle" />
<label for="scoreInfo" class="modal modal-bottom sm:modal-middle cursor-pointer">
<label for="scoreInfo" class="cursor-pointer modal-backdrop"></label>
<label
for="scoreInfo"
class="modal modal-bottom sm:modal-middle cursor-pointer"
>
<label for="scoreInfo" class="cursor-pointer modal-backdrop"></label>
<!-- svelte-ignore a11y-label-has-associated-control -->
<label class="modal-box w-full relative bg-[#09090B] border border-gray-800 h-auto">
<label for="scoreInfo" class="cursor-pointer absolute right-5 top-2 bg-[#09090B] text-2xl text-white">
<label
class="modal-box w-full relative bg-[#09090B] border border-gray-800 h-auto"
>
<label
for="scoreInfo"
class="cursor-pointer absolute right-5 top-2 bg-[#09090B] text-2xl text-white"
>
✕
</label>
<h3 class="text-2xl font-bold text-white">
AI Score
</h3>
<h3 class="text-2xl font-bold text-white">AI Score</h3>
<p class="py-4 text-gray-200 bg-[#09090B] w-full">
Our AI model analyzes fundamental, technical, and statistical indicators to predict the probability of a bullish trend over the next three months.
<br>
<br>
We regularly update and refine our models to deliver the most reliable forecasts for you.
Our AI model analyzes fundamental, technical, and statistical indicators
to predict the probability of a bullish trend over the next three months.
<br />
<br />
We regularly update and refine our models to deliver the most reliable forecasts
for you.
</p>
<table class="table table-sm table-compact bg-[#09090B] w-full mt-5 mb-10 text-white">
<table
class="table table-sm table-compact bg-[#09090B] w-full mt-5 mb-10 text-white"
>
<!-- head -->
<thead>
<tr class="border-b border-slate-700 odd:bg-[#27272A]">
@ -159,10 +223,8 @@
<td class="text-sm sm:text-[1rem] text-end">8</td>
</tr>
<tr class="border-b border-slate-700 odd:bg-[#27272A]">
<td class="text-sm sm:text-[1rem]">
+60%
</td>
<td class="text-sm sm:text-[1rem]">Buy</td>
<td class="text-sm sm:text-[1rem]"> +60% </td>
<td class="text-sm sm:text-[1rem]">Buy</td>
<td class="text-sm sm:text-[1rem] text-end">7</td>
</tr>
<tr class="border-b border-slate-700 odd:bg-[#27272A]">
@ -197,8 +259,5 @@
</tr>
</tbody>
</table>
</label>
</label>

1
src/lib/store.ts
View File

@ -45,6 +45,7 @@ export const clearCache = () => {
export const showCookieConsent = writable(<boolean>false);
export const shouldUpdatePriceChart = writable(<boolean>false);
export const coolMode = writable(<boolean>false);
export const executiveClicked = writable(<boolean>false);
export const secFilingsClicked = writable(<boolean>false);

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

@ -347,7 +347,7 @@ function handleTypeOfTrade(state:string)
<svelte:window bind:scrollY={y} />
<body
class="bg-[#09090B] w-full max-w-screen min-h-screen sm:max-w-7xl xl:max-w-screen-2xl overflow-hidden"
class="bg-[#09090B] w-full max-w-screen sm:max-w-7xl min-h-screen xl:max-w-screen-2xl overflow-hidden"
>
<!-- Page wrapper -->
<div class="flex flex-col w-full mt-5 relative w-full">
@ -554,7 +554,7 @@ function handleTypeOfTrade(state:string)
</div>
<!--End Mobile Navbar-->
<div class="pt-14 sm:pt-0 w-auto max-w-7xl px-3 sm:px-0">
<div class="pt-14 sm:pt-0 w-full max-w-7xl px-3 sm:px-0">
<div
class="md:flex md:justify-between md:divide-x md:divide-slate-800"
>

85
src/routes/stocks/[tickerID]/dividends/+layout.svelte
View File

@ -1,11 +1,80 @@
<section
class="w-full max-w-5xl bg-[#09090B] overflow-hidden text-black h-full mb-40"
>
<div class="h-full overflow-hidden">
<main class="w-full">
<div class="sm:ml-8 w-screen mb-2"></div>
</main>
<script lang="ts">
import ArrowLogo from "lucide-svelte/icons/move-up-right";
<slot />
export let data;
</script>
<section class="w-auto overflow-hidden min-h-screen">
<div class="w-full overflow-hidden m-auto">
<div class="sm:p-0 flex justify-center w-full m-auto overflow-hidden">
<div
class="relative flex justify-center items-start overflow-hidden w-full"
>
<main class="w-full lg:w-3/4">
<slot />
</main>
<aside class="hidden lg:block relative fixed w-1/4 ml-4">
{#if data?.user?.tier !== "Pro" || data?.user?.freeTrial}
<div
class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer"
>
<a
href="/pricing"
class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"
>
<div class="w-full flex justify-between items-center p-3 mt-3">
<h2 class="text-start text-xl font-semibold text-white ml-3">
Pro Subscription 🔥
</h2>
<ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
</div>
<span class="text-white p-3 ml-3 mr-3">
Upgrade now for unlimited access to all data and tools.
</span>
</a>
</div>
{/if}
<div
class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer"
>
<a
href={"/price-alert"}
class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"
>
<div class="w-full flex justify-between items-center p-3 mt-3">
<h2 class="text-start text-xl font-semibold text-white ml-3">
Price Alert ⏰
</h2>
<ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
</div>
<span class="text-white p-3 ml-3 mr-3">
Customize your alerts to never miss out again
</span>
</a>
</div>
<div
class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer"
>
<a
href={"/stock-screener"}
class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"
>
<div class="w-full flex justify-between items-center p-3 mt-3">
<h2 class="text-start text-xl font-semibold text-white ml-3">
Stock Screener 🔎
</h2>
<ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
</div>
<span class="text-white p-3 ml-3 mr-3">
Build your Stock Screener to find profitable stocks.
</span>
</a>
</div>
</aside>
</div>
</div>
</div>
</section>

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

@ -132,16 +132,14 @@
<!-- Add more Twitter meta tags as needed -->
</svelte:head>
<section
class="w-full max-w-5xl bg-[#09090B] overflow-hidden text-white h-full mb-40 sm:mb-0"
>
<section class="w-full bg-[#09090B] overflow-hidden text-white h-full">
<div class="w-full flex h-full overflow-hidden">
<div
class="w-full relative flex justify-center items-center overflow-hidden"
>
<div class="sm:p-7 w-full m-auto mt-2 sm:mt-0">
<div class="w-full mb-6">
<h1 class="text-2xl sm:text-3xl text-gray-200 font-bold mb-4">
<h1 class="text-2xl sm:text-3xl text-gray-200 font-bold mb-4 w-full">
Dividends
</h1>
@ -191,7 +189,9 @@
dividends for over 12 months.
{/if}
{:else}
No dividend history available for {$displayCompanyName}.
<div class="w-full">
No dividend history available for {$displayCompanyName}.
</div>
{/if}
</div>
</div>

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

@ -43,7 +43,7 @@
}
</script>
<section class="w-auto bg-[#09090B] overflow-hidden text-black h-full">
<section class="w-auto bg-[#09090B] overflow-hidden h-full">
<div class="m-auto h-full overflow-hidden">
<main class="w-full">
<div class="m-auto">

87
src/routes/stocks/[tickerID]/financials/balance-sheet/+layout.svelte Normal file
View File

@ -0,0 +1,87 @@
<script lang="ts">
import ArrowLogo from "lucide-svelte/icons/move-up-right";
import { coolMode } from "$lib/store";
export let data;
</script>
<section class="w-full overflow-hidden min-h-screen">
<div class="w-full overflow-hidden m-auto">
<div class="sm:p-0 flex justify-center w-full m-auto overflow-hidden">
<div
class="relative flex justify-center items-start overflow-hidden w-full"
>
<main class="w-full {$coolMode ? 'lg:w-3/4' : 'w-full'} ">
<slot />
</main>
{#if $coolMode}
<aside class="hidden lg:block relative fixed w-1/4 ml-4">
{#if data?.user?.tier !== "Pro" || data?.user?.freeTrial}
<div
class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer"
>
<a
href="/pricing"
class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"
>
<div
class="w-full flex justify-between items-center p-3 mt-3"
>
<h2
class="text-start text-xl font-semibold text-white ml-3"
>
Pro Subscription 🔥
</h2>
<ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
</div>
<span class="text-white p-3 ml-3 mr-3">
Upgrade now for unlimited access to all data and tools.
</span>
</a>
</div>
{/if}
<div
class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer"
>
<a
href={"/price-alert"}
class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"
>
<div class="w-full flex justify-between items-center p-3 mt-3">
<h2 class="text-start text-xl font-semibold text-white ml-3">
Price Alert ⏰
</h2>
<ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
</div>
<span class="text-white p-3 ml-3 mr-3">
Customize your alerts to never miss out again
</span>
</a>
</div>
<div
class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer"
>
<a
href={"/stock-screener"}
class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"
>
<div class="w-full flex justify-between items-center p-3 mt-3">
<h2 class="text-start text-xl font-semibold text-white ml-3">
Stock Screener 🔎
</h2>
<ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
</div>
<span class="text-white p-3 ml-3 mr-3">
Build your Stock Screener to find profitable stocks.
</span>
</a>
</div>
</aside>
{/if}
</div>
</div>
</div>
</section>

33
src/routes/stocks/[tickerID]/financials/balance-sheet/+page.svelte
View File

@ -2,6 +2,7 @@
import { Chart } from "svelte-echarts";
import {
numberOfUnreadNotification,
coolMode,
displayCompanyName,
stockTicker,
} from "$lib/store";
@ -27,7 +28,7 @@
let displayStatement = "cashAndCashEquivalents";
let mode = false;
$: $coolMode = false;
let timeFrame = "10Y";
const statementConfig = [
@ -198,7 +199,7 @@
let namingList = statementConfig?.map((config) => config?.propertyName) || [];
function toggleMode() {
mode = !mode;
$coolMode = !$coolMode;
}
function changeStatement(event) {
@ -406,7 +407,7 @@
balanceSheet = filterStatement(fullStatement, timeFrame);
if (mode === true) {
if ($coolMode === true) {
optionsData = plotData();
}
}
@ -459,7 +460,7 @@
<div class="sm:p-7 m-auto mt-2 sm:mt-0">
<div class="mb-3">
<h1 class="text-2xl text-gray-200 font-bold">
{#if mode}
{#if $coolMode}
{statementConfig?.find(
(item) => item?.propertyName === displayStatement,
)?.label}
@ -485,7 +486,7 @@
/></svg
>
{#if mode}
{#if $coolMode}
{statementConfig?.find(
(item) => item?.propertyName === displayStatement,
)?.text}
@ -543,7 +544,7 @@
</ul>
<div
class="mb-2 flex flex-row items-center w-full justify-end sm:justify-center"
class="mb-6 sm:mb-3 flex flex-row items-center w-full justify-end sm:justify-center mt-3 sm:mt-0"
>
<label
class="inline-flex mt-2 sm:mt-0 cursor-pointer relative mr-auto"
@ -551,14 +552,14 @@
<input
on:click={toggleMode}
type="checkbox"
checked={mode}
value={mode}
checked={$coolMode}
value={$coolMode}
class="sr-only peer"
/>
<div
class="w-11 h-6 bg-gray-400 rounded-full peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-[#1563F9]"
></div>
{#if mode}
{#if $coolMode}
<span class="ml-2 text-sm font-medium text-white">
Cool Mode
</span>
@ -645,7 +646,7 @@
</div>
</div>
{#if mode}
{#if $coolMode}
<div class="sm:w-full">
<div class="relative">
<select
@ -730,24 +731,20 @@
>
<thead>
<tr class="border border-slate-800">
<th
class="text-white font-semibold text-start text-sm sm:text-[1rem]"
<th class="text-white font-semibold text-start text-sm"
>{filterRule === "annual"
? "Fiscal Year End"
: "Quarter Ends"}</th
>
<th
class="text-white font-semibold text-end text-sm sm:text-[1rem]"
<th class="text-white font-semibold text-end text-sm"
>{statementConfig?.find(
(item) => item?.propertyName === displayStatement,
)?.label}</th
>
<th
class="text-white font-semibold text-end text-sm sm:text-[1rem]"
<th class="text-white font-semibold text-end text-sm"
>Change</th
>
<th
class="text-white font-semibold text-end text-sm sm:text-[1rem]"
<th class="text-white font-semibold text-end text-sm"
>Growth</th
>
</tr>

8
src/routes/stocks/[tickerID]/insider/+layout.svelte
View File

@ -2,6 +2,8 @@
import { stockTicker, screenWidth } from "$lib/store";
import { page } from "$app/stores";
export let data;
let displaySubSection = "";
if (!displaySubSection || displaySubSection.length === 0) {
@ -37,10 +39,8 @@
}
</script>
<section
class="w-full max-w-5xl bg-[#09090B] overflow-hidden text-black h-full mb-40"
>
<div class="h-full overflow-hidden">
<section class="w-full bg-[#09090B] overflow-hidden h-full">
<div class="h-full overflow-hidden w-full">
<main class="w-full">
<div
class="sm:ml-8 w-screen sm:w-full {$screenWidth < 640

80
src/routes/stocks/[tickerID]/insider/congress-trading/+layout.svelte Normal file
View File

@ -0,0 +1,80 @@
<script lang="ts">
import ArrowLogo from "lucide-svelte/icons/move-up-right";
export let data;
</script>
<section class="w-full overflow-hidden min-h-screen">
<div class="w-full overflow-hidden m-auto">
<div class="sm:p-0 flex justify-center w-full m-auto overflow-hidden">
<div
class="relative flex justify-center items-start overflow-hidden w-full"
>
<main class="w-full lg:w-3/4">
<slot />
</main>
<aside class="hidden lg:block relative fixed w-1/4 ml-4">
{#if data?.user?.tier !== "Pro" || data?.user?.freeTrial}
<div
class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer"
>
<a
href="/pricing"
class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"
>
<div class="w-full flex justify-between items-center p-3 mt-3">
<h2 class="text-start text-xl font-semibold text-white ml-3">
Pro Subscription 🔥
</h2>
<ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
</div>
<span class="text-white p-3 ml-3 mr-3">
Upgrade now for unlimited access to all data and tools.
</span>
</a>
</div>
{/if}
<div
class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer"
>
<a
href={"/price-alert"}
class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"
>
<div class="w-full flex justify-between items-center p-3 mt-3">
<h2 class="text-start text-xl font-semibold text-white ml-3">
Price Alert ⏰
</h2>
<ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
</div>
<span class="text-white p-3 ml-3 mr-3">
Customize your alerts to never miss out again
</span>
</a>
</div>
<div
class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer"
>
<a
href={"/stock-screener"}
class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"
>
<div class="w-full flex justify-between items-center p-3 mt-3">
<h2 class="text-start text-xl font-semibold text-white ml-3">
Stock Screener 🔎
</h2>
<ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
</div>
<span class="text-white p-3 ml-3 mr-3">
Build your Stock Screener to find profitable stocks.
</span>
</a>
</div>
</aside>
</div>
</div>
</div>
</section>

602
src/routes/stocks/[tickerID]/insider/congress-trading/+page.svelte
View File

@ -1,292 +1,422 @@
<script lang="ts">
import { onMount } from 'svelte';
import { displayCompanyName, numberOfUnreadNotification, stockTicker } from '$lib/store';
import { getPartyForPoliticians } from '$lib/utils';
import { onMount } from "svelte";
import {
displayCompanyName,
numberOfUnreadNotification,
stockTicker,
} from "$lib/store";
import { getPartyForPoliticians } from "$lib/utils";
export let data;
let rawData = data?.getSenateTrading;
let buySellRatio = 0;
let partyRatio = 0
let partyRatio = 0;
let senateTradingList = [];
let isLoaded = false;
let images = {};
let cloudFrontUrl = import.meta.env.VITE_IMAGE_URL;
function backToTop() {
function backToTop() {
window.scrollTo({
top: 0,
top: 0,
});
}
}
async function handleScroll() {
async function handleScroll() {
const scrollThreshold = document.body.offsetHeight * 0.8; // 80% of the website height
const isBottom = window.innerHeight + window.scrollY >= scrollThreshold;
if (isBottom && senateTradingList?.length !== rawData?.length) {
const nextIndex = senateTradingList?.length;
const filteredNewResults = rawData?.slice(nextIndex, nextIndex + 50);
senateTradingList = [...senateTradingList, ...filteredNewResults];
const nextIndex = senateTradingList?.length;
const filteredNewResults = rawData?.slice(nextIndex, nextIndex + 50);
senateTradingList = [...senateTradingList, ...filteredNewResults];
}
}
onMount(async () => {
rawData.forEach(item => {
const representative = item?.representative || '';
const fullName = representative.replace(/(\s(?:Dr\s)?\w(?:\.|(?=\s)))?\s/g, '_').trim();
item.representative = fullName.replace(/_/g, ' ');
onMount(async () => {
rawData.forEach((item) => {
const representative = item?.representative || "";
const fullName = representative
.replace(/(\s(?:Dr\s)?\w(?:\.|(?=\s)))?\s/g, "_")
.trim();
item.representative = fullName.replace(/_/g, " ");
});
rawData = rawData?.map(item => {
const party = getPartyForPoliticians(item?.representative);
return {
...item,
party: party
};
rawData = rawData?.map((item) => {
const party = getPartyForPoliticians(item?.representative);
return {
...item,
party: party,
};
});
// Count the occurrences of "Republican" and "Democrat"
const partyCounts = rawData.reduce((counts, item) => {
counts[item?.party] = (counts[item?.party] || 0) + 1;
return counts;
counts[item?.party] = (counts[item?.party] || 0) + 1;
return counts;
}, {});
const typeCounts = rawData.reduce((counts, item) => {
counts[item?.type] = (counts[item?.type ] || 0) + 1;
return counts;
counts[item?.type] = (counts[item?.type] || 0) + 1;
return counts;
}, {});
partyRatio = partyCounts['Democratic'] > 0 && partyCounts['Republican'] === undefined ? 1 : partyCounts['Democratic'] === undefined ? 0 : partyCounts["Democratic"] / partyCounts["Republican"];
buySellRatio = typeCounts['Bought'] > 0 && typeCounts['Sold'] === undefined ? 1 : typeCounts['Bought'] === undefined ? 0 : typeCounts["Bought"] / typeCounts["Sold"];
partyRatio =
partyCounts["Democratic"] > 0 && partyCounts["Republican"] === undefined
? 1
: partyCounts["Democratic"] === undefined
? 0
: partyCounts["Democratic"] / partyCounts["Republican"];
buySellRatio =
typeCounts["Bought"] > 0 && typeCounts["Sold"] === undefined
? 1
: typeCounts["Bought"] === undefined
? 0
: typeCounts["Bought"] / typeCounts["Sold"];
senateTradingList = rawData.slice(0, 20) ?? [];
isLoaded = true;
window.addEventListener('scroll', handleScroll);
return () => {
window.removeEventListener('scroll', handleScroll);
};
});
window.addEventListener("scroll", handleScroll);
return () => {
window.removeEventListener("scroll", handleScroll);
};
});
</script>
<svelte:head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>
{$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ''} {$displayCompanyName} ({$stockTicker}) US Congress & Senate Trading · stocknear
{$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ""}
{$displayCompanyName} ({$stockTicker}) US Congress & Senate Trading ·
stocknear
</title>
<meta name="description" content={`Get the latest US congress & senate trading of ${$displayCompanyName} (${$stockTicker}) from democrates and republicans.`} />
<meta
name="description"
content={`Get the latest US congress & senate trading of ${$displayCompanyName} (${$stockTicker}) from democrates and republicans.`}
/>
<!-- Other meta tags -->
<meta property="og:title" content={`${$displayCompanyName} (${$stockTicker}) US Congress & Senate Trading · stocknear`}/>
<meta property="og:description" content={`Get the latest US congress & senate trading of ${$displayCompanyName} (${$stockTicker}) from democrates and republicans.`} />
<meta property="og:type" content="website"/>
<meta
property="og:title"
content={`${$displayCompanyName} (${$stockTicker}) US Congress & Senate Trading · stocknear`}
/>
<meta
property="og:description"
content={`Get the latest US congress & senate trading of ${$displayCompanyName} (${$stockTicker}) from democrates and republicans.`}
/>
<meta property="og:type" content="website" />
<!-- Add more Open Graph meta tags as needed -->
<!-- Twitter specific meta tags -->
<meta name="twitter:card" content="summary_large_image"/>
<meta name="twitter:title" content={`${$displayCompanyName} (${$stockTicker}) US Congress & Senate Trading · stocknear`}/>
<meta name="twitter:description" content={`Get the latest US congress & senate trading of ${$displayCompanyName} (${$stockTicker}) from democrates and republicans.`} />
<meta name="twitter:card" content="summary_large_image" />
<meta
name="twitter:title"
content={`${$displayCompanyName} (${$stockTicker}) US Congress & Senate Trading · stocknear`}
/>
<meta
name="twitter:description"
content={`Get the latest US congress & senate trading of ${$displayCompanyName} (${$stockTicker}) from democrates and republicans.`}
/>
<!-- Add more Twitter meta tags as needed -->
</svelte:head>
<section class="w-full bg-[#09090B] overflow-hidden text-white h-full mb-40 sm:mb-0">
<div class="h-full overflow-hidden">
<div class="relative flex justify-center items-center overflow-hidden">
<div class="sm:p-7 w-full mt-2 sm:mt-0">
<div class="mb-6">
<h1 class="text-2xl sm:text-3xl text-gray-200 font-bold mb-4">
Congress Trading
</h1>
<section class="w-full bg-[#09090B] overflow-hidden text-white h-full">
<div class="h-full overflow-hidden w-full">
<div class="relative flex justify-center items-center overflow-hidden">
<div class="sm:p-7 w-full mt-2 sm:mt-0">
<div class="mb-6">
<h1 class="text-2xl sm:text-3xl text-gray-200 font-bold mb-4">
Congress Trading
</h1>
<div class="text-white p-3 sm:p-5 mb-10 rounded-lg sm:flex sm:flex-row sm:items-center border border-slate-800 text-sm sm:text-[1rem]">
<svg class="w-6 h-6 flex-shrink-0 inline-block sm:mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><path fill="#a474f6" d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"/></svg>
Get detailed insights of Corrupt US Politician 🇺🇸 who bought or sold {$displayCompanyName} and the amounts involved!
</div>
<div
class="text-white p-3 sm:p-5 mb-10 rounded-lg sm:flex sm:flex-row sm:items-center border border-slate-800 text-sm sm:text-[1rem]"
>
<svg
class="w-6 h-6 flex-shrink-0 inline-block sm:mr-2"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 256 256"
><path
fill="#a474f6"
d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
/></svg
>
Get detailed insights of Corrupt US Politician 🇺🇸 who bought or sold
{$displayCompanyName} and the amounts involved!
</div>
</div>
{#if isLoaded}
{#if senateTradingList?.length !== 0}
<h3 class="text-white text-xl font-semibold">
Congress Statistics
</h3>
<!--Start Widget-->
<div
class="w-full mt-5 mb-10 m-auto flex justify-center items-center"
>
<div
class="w-full grid grid-cols-2 sm:grid-cols-3 gap-y-3 lg:gap-y-3 gap-x-3"
>
<!--Start Buy/Sell-->
<div
class="flex flex-row items-center flex-wrap w-full px-3 sm:px-4 bg-[#262626] rounded-lg h-20"
>
<div class="flex flex-col items-start">
<span
class="font-semibold text-gray-200 text-sm sm:text-[1rem]"
>Buy/Sell</span
>
<span
class="text-start text-sm sm:text-[1rem] font-medium text-white"
>
{buySellRatio?.toFixed(3)}
</span>
</div>
<!-- Circular Progress -->
<div class="relative size-14 ml-auto">
<svg
class="size-full w-14 h-14"
viewBox="0 0 36 36"
xmlns="http://www.w3.org/2000/svg"
>
<!-- Background Circle -->
<circle
cx="18"
cy="18"
r="16"
fill="none"
class="stroke-current text-[#3E3E3E]"
stroke-width="3"
></circle>
<!-- Progress Circle inside a group with rotation -->
<g class="origin-center -rotate-90 transform">
<circle
cx="18"
cy="18"
r="16"
fill="none"
class="stroke-current {buySellRatio >= 0.5
? 'text-[#00FC50]'
: 'text-[#EE5365]'} "
stroke-width="3"
stroke-dasharray="100"
stroke-dashoffset={100 - buySellRatio * 100 >= 0
? 100 - (buySellRatio * 100)?.toFixed(2)
: 0}
></circle>
</g>
</svg>
<!-- Percentage Text -->
<div
class="absolute top-1/2 start-1/2 transform -translate-y-1/2 -translate-x-1/2"
>
<span
class="text-center text-white text-sm sm:text-[1rem]"
>{buySellRatio?.toFixed(2)}</span
>
</div>
{#if isLoaded}
{#if senateTradingList?.length !== 0}
<h3 class="text-white text-xl font-semibold ">
Congress Statistics
</h3>
<!--Start Widget-->
<div class="w-full mt-5 mb-10 m-auto flex justify-center items-center ">
<div class="w-full grid grid-cols-2 sm:grid-cols-3 gap-y-3 lg:gap-y-3 gap-x-3 ">
<!--Start Buy/Sell-->
<div class="flex flex-row items-center flex-wrap w-full px-3 sm:px-4 bg-[#262626] rounded-lg h-20">
<div class="flex flex-col items-start">
<span class="font-semibold text-gray-200 text-sm sm:text-[1rem]">Buy/Sell</span>
<span class="text-start text-sm sm:text-[1rem] font-medium text-white">
{buySellRatio?.toFixed(3)}
</span>
</div>
<!-- Circular Progress -->
<div class="relative size-14 ml-auto">
<svg class="size-full w-14 h-14" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg">
<!-- Background Circle -->
<circle cx="18" cy="18" r="16" fill="none" class="stroke-current text-[#3E3E3E]" stroke-width="3"></circle>
<!-- Progress Circle inside a group with rotation -->
<g class="origin-center -rotate-90 transform">
<circle cx="18" cy="18" r="16" fill="none" class="stroke-current {buySellRatio >=0.5 ? 'text-[#00FC50]' : 'text-[#EE5365]'} " stroke-width="3" stroke-dasharray="100" stroke-dashoffset={(100- buySellRatio*100) >= 0 ? 100-(buySellRatio*100)?.toFixed(2) : 0}></circle>
</g>
</svg>
<!-- Percentage Text -->
<div class="absolute top-1/2 start-1/2 transform -translate-y-1/2 -translate-x-1/2">
<span class="text-center text-white text-sm sm:text-[1rem]">{buySellRatio?.toFixed(2)}</span>
</div>
</div>
<!-- End Circular Progress -->
</div>
<!--End Buy/Sell-->
<!--Start Dem/Rep-->
<div class="flex flex-row items-center flex-wrap w-full px-3 sm:px-4 bg-[#262626] rounded-lg h-20">
<div class="flex flex-col items-start">
<span class="font-semibold text-gray-200 text-sm sm:text-[1rem]">Dem/Rep</span>
<span class="text-start text-sm sm:text-[1rem] font-medium text-white">
{partyRatio?.toFixed(3)}
</span>
</div>
<!-- Circular Progress -->
<div class="relative size-14 ml-auto">
<svg class="size-full w-14 h-14" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg">
<!-- Background Circle -->
<circle cx="18" cy="18" r="16" fill="none" class="stroke-current text-[#3E3E3E]" stroke-width="3"></circle>
<!-- Progress Circle inside a group with rotation -->
<g class="origin-center -rotate-90 transform">
<circle cx="18" cy="18" r="16" fill="none" class="stroke-current text-blue-500" stroke-width="3" stroke-dasharray="100" stroke-dashoffset={(100-partyRatio*100) >=0 ? 100-(partyRatio*100)?.toFixed(2) : 0}></circle>
</g>
</svg>
<!-- Percentage Text -->
<div class="absolute top-1/2 start-1/2 transform -translate-y-1/2 -translate-x-1/2">
<span class="text-center text-white text-sm sm:text-[1rem]">{partyRatio?.toFixed(2)}</span>
</div>
</div>
<!-- End Circular Progress -->
</div>
<!--End Put/Call-->
</div>
</div>
<!--End Widget-->
<div class="mt-6 flex justify-start items-center w-full m-auto rounded-none sm:rounded-lg mb-4 overflow-x-scroll">
<table class="table table-sm sm:table-md table-compact rounded-none sm:rounded-md w-full bg-[#09090B] border-bg-[#09090B] m-auto">
<thead>
<tr class="bg-[#09090B] border-b border-[#27272A]">
<th class="shadow-md text-start bg-[#09090B] text-white text-sm font-semibold">
Person
</th>
<th class="shadow-md text-end bg-[#09090B] text-white text-sm font-semibold">
Transaction Date
</th>
<th class="shadow-md text-end bg-[#09090B] text-white text-sm font-semibold">
Amount
</th>
<th class="shadow-md text-white font-semibold text-end text-sm">Type</th>
</tr>
</thead>
<tbody>
{#each senateTradingList as item}
<tr class="odd:bg-[#27272A] sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] bg-[#09090B] border-b-[#09090B]">
<td class="text-white text-sm sm:text-[1rem] whitespace-nowrap pb-3 border-b border-b-[#09090B]">
<div class="flex flex-row items-center">
<div class="flex-shrink-0 rounded-full border border-slate-700 w-10 h-10 sm:w-12 sm:h-12 relative {item?.party === 'Republican' ? 'bg-[#98272B]' : item?.party === 'Democratic' ? 'bg-[#295AC7]' : 'bg-[#4E2153]'} flex items-center justify-center">
<img style="clip-path: circle(50%);" class="avatar rounded-full w-7 sm:w-9" src={`${cloudFrontUrl}/assets/senator/${item?.representative?.replace(/\s+/g, "_")}.png`} loading="lazy"/>
</div>
<div class="flex flex-col ml-3">
<a href={`/politicians/${item?.id}`} class="sm:hover:text-white text-blue-400">{item?.representative?.replace('_',' ')}</a>
<span class="">{item?.party}</span>
</div>
</div>
<!--{item?.firstName} {item?.lastName}-->
</td>
<td class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white border-b border-b-[#09090B]">
{new Date(item?.transactionDate)?.toLocaleString('en-US', { month: 'short', day: 'numeric', year: 'numeric', daySuffix: '2-digit' })}
</td>
<td class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white border-b border-b-[#09090B]">
{item?.amount}
</td>
<td class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white border-b border-b-[#09090B]">
{#if item?.type === 'Bought'}
<span class="text-[#37C97D]">Bought</span>
{:else if item?.type === 'Sold'}
<span class="text-[#FF2F1F]">Sold</span>
{:else if item?.type === 'Exchange'}
<span class="text-[#C6A755]">Exchange</span>
{/if}
</td>
</tr>
{/each}
</tbody>
</table>
</div>
{#if rawData?.length >= 20}
<label on:click={backToTop} class="w-32 py-1.5 mt-10 hover:bg-white hover:bg-opacity-[0.05] cursor-pointer m-auto flex justify-center items-center border border-slate-800 rounded-full">
Back to top
</label>
{/if}
{:else}
<h2 class="pl-4 pr-4 flex justify-center items-center text-md sm:text-lg text-center text-slate-200">
No trading history available for {$displayCompanyName}. Likely no corrupt politican has interest in this stock.
</h2>
{/if}
{:else}
<div class="flex justify-center items-center h-80">
<div class="relative">
<label class="bg-[#09090B] 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">
<span class="loading loading-spinner loading-md text-gray-400"></span>
</label>
</div>
</div>
{/if}
</div>
<!-- End Circular Progress -->
</div>
<!--End Buy/Sell-->
<!--Start Dem/Rep-->
<div
class="flex flex-row items-center flex-wrap w-full px-3 sm:px-4 bg-[#262626] rounded-lg h-20"
>
<div class="flex flex-col items-start">
<span
class="font-semibold text-gray-200 text-sm sm:text-[1rem]"
>Dem/Rep</span
>
<span
class="text-start text-sm sm:text-[1rem] font-medium text-white"
>
{partyRatio?.toFixed(3)}
</span>
</div>
<!-- Circular Progress -->
<div class="relative size-14 ml-auto">
<svg
class="size-full w-14 h-14"
viewBox="0 0 36 36"
xmlns="http://www.w3.org/2000/svg"
>
<!-- Background Circle -->
<circle
cx="18"
cy="18"
r="16"
fill="none"
class="stroke-current text-[#3E3E3E]"
stroke-width="3"
></circle>
<!-- Progress Circle inside a group with rotation -->
<g class="origin-center -rotate-90 transform">
<circle
cx="18"
cy="18"
r="16"
fill="none"
class="stroke-current text-blue-500"
stroke-width="3"
stroke-dasharray="100"
stroke-dashoffset={100 - partyRatio * 100 >= 0
? 100 - (partyRatio * 100)?.toFixed(2)
: 0}
></circle>
</g>
</svg>
<!-- Percentage Text -->
<div
class="absolute top-1/2 start-1/2 transform -translate-y-1/2 -translate-x-1/2"
>
<span
class="text-center text-white text-sm sm:text-[1rem]"
>{partyRatio?.toFixed(2)}</span
>
</div>
</div>
<!-- End Circular Progress -->
</div>
<!--End Put/Call-->
</div>
</div>
</div>
</section>
<!--End Widget-->
<div
class="mt-6 flex justify-start items-center w-full m-auto rounded-none sm:rounded-lg mb-4 overflow-x-scroll"
>
<table
class="table table-sm sm:table-md table-compact rounded-none sm:rounded-md w-full bg-[#09090B] border-bg-[#09090B] m-auto"
>
<thead>
<tr class="bg-[#09090B] border-b border-[#27272A]">
<th
class="shadow-md text-start bg-[#09090B] text-white text-sm font-semibold"
>
Person
</th>
<th
class="shadow-md text-end bg-[#09090B] text-white text-sm font-semibold"
>
Transaction Date
</th>
<th
class="shadow-md text-end bg-[#09090B] text-white text-sm font-semibold"
>
Amount
</th>
<th
class="shadow-md text-white font-semibold text-end text-sm"
>Type</th
>
</tr>
</thead>
<tbody>
{#each senateTradingList as item}
<tr
class="odd:bg-[#27272A] sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] bg-[#09090B] border-b-[#09090B]"
>
<td
class="text-white text-sm sm:text-[1rem] whitespace-nowrap pb-3 border-b border-b-[#09090B]"
>
<div class="flex flex-row items-center">
<div
class="flex-shrink-0 rounded-full border border-slate-700 w-10 h-10 sm:w-12 sm:h-12 relative {item?.party ===
'Republican'
? 'bg-[#98272B]'
: item?.party === 'Democratic'
? 'bg-[#295AC7]'
: 'bg-[#4E2153]'} flex items-center justify-center"
>
<img
style="clip-path: circle(50%);"
class="avatar rounded-full w-7 sm:w-9"
src={`${cloudFrontUrl}/assets/senator/${item?.representative?.replace(/\s+/g, "_")}.png`}
loading="lazy"
/>
</div>
<div class="flex flex-col ml-3">
<a
href={`/politicians/${item?.id}`}
class="sm:hover:text-white text-blue-400"
>{item?.representative?.replace("_", " ")}</a
>
<span class="">{item?.party}</span>
</div>
</div>
<!--{item?.firstName} {item?.lastName}-->
</td>
<td
class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white border-b border-b-[#09090B]"
>
{new Date(item?.transactionDate)?.toLocaleString(
"en-US",
{
month: "short",
day: "numeric",
year: "numeric",
daySuffix: "2-digit",
},
)}
</td>
<td
class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white border-b border-b-[#09090B]"
>
{item?.amount}
</td>
<td
class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white border-b border-b-[#09090B]"
>
{#if item?.type === "Bought"}
<span class="text-[#37C97D]">Bought</span>
{:else if item?.type === "Sold"}
<span class="text-[#FF2F1F]">Sold</span>
{:else if item?.type === "Exchange"}
<span class="text-[#C6A755]">Exchange</span>
{/if}
</td>
</tr>
{/each}
</tbody>
</table>
</div>
{#if rawData?.length >= 20}
<label
on:click={backToTop}
class="w-32 py-1.5 mt-10 hover:bg-white hover:bg-opacity-[0.05] cursor-pointer m-auto flex justify-center items-center border border-slate-800 rounded-full"
>
Back to top
</label>
{/if}
{:else}
<h2
class="pl-4 pr-4 flex justify-center items-center text-md sm:text-lg text-center text-slate-200"
>
No trading history available for {$displayCompanyName}. Likely no
corrupt politican has interest in this stock.
</h2>
{/if}
{:else}
<div class="flex justify-center items-center h-80">
<div class="relative">
<label
class="bg-[#09090B] 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"
>
<span class="loading loading-spinner loading-md text-gray-400"
></span>
</label>
</div>
</div>
{/if}
</div>
</div>
</div>
</section>

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

@ -55,9 +55,7 @@
<!-- Rest of the component remains the same -->
<section
class="w-auto max-w-5xl bg-[#09090B] overflow-hidden text-black h-full mb-40"
>
<section class="w-full bg-[#09090B] overflow-hidden h-full">
<div class="m-auto h-full overflow-hidden">
<main class="w-fit sm:w-full sm:max-w-2xl">
<div class="m-auto">

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

@ -88,9 +88,7 @@
/>
</svelte:head>
<section
class="bg-[#09090B] overflow-hidden text-white h-full mb-40 sm:mb-0 w-full"
>
<section class="bg-[#09090B] overflow-hidden text-white h-full w-full">
<div class="flex justify-center m-auto h-full overflow-hidden w-full">
<div
class="relative flex justify-center items-center overflow-hidden w-full"

80
src/routes/stocks/[tickerID]/metrics/[slug]/+layout.svelte Normal file
View File

@ -0,0 +1,80 @@
<script lang="ts">
import ArrowLogo from "lucide-svelte/icons/move-up-right";
export let data;
</script>
<section class="w-full overflow-hidden min-h-screen">
<div class="w-full overflow-hidden m-auto">
<div class="sm:p-0 flex justify-center w-full m-auto overflow-hidden">
<div
class="relative flex justify-center items-start overflow-hidden w-full"
>
<main class="w-full lg:w-3/4">
<slot />
</main>
<aside class="hidden lg:block relative fixed w-1/4 ml-4">
{#if data?.user?.tier !== "Pro" || data?.user?.freeTrial}
<div
class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer"
>
<a
href="/pricing"
class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"
>
<div class="w-full flex justify-between items-center p-3 mt-3">
<h2 class="text-start text-xl font-semibold text-white ml-3">
Pro Subscription 🔥
</h2>
<ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
</div>
<span class="text-white p-3 ml-3 mr-3">
Upgrade now for unlimited access to all data and tools.
</span>
</a>
</div>
{/if}
<div
class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer"
>
<a
href={"/price-alert"}
class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"
>
<div class="w-full flex justify-between items-center p-3 mt-3">
<h2 class="text-start text-xl font-semibold text-white ml-3">
Price Alert ⏰
</h2>
<ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
</div>
<span class="text-white p-3 ml-3 mr-3">
Customize your alerts to never miss out again
</span>
</a>
</div>
<div
class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer"
>
<a
href={"/stock-screener"}
class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"
>
<div class="w-full flex justify-between items-center p-3 mt-3">
<h2 class="text-start text-xl font-semibold text-white ml-3">
Stock Screener 🔎
</h2>
<ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
</div>
<span class="text-white p-3 ml-3 mr-3">
Build your Stock Screener to find profitable stocks.
</span>
</a>
</div>
</aside>
</div>
</div>
</div>
</section>

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

@ -152,16 +152,14 @@
<meta name="twitter:description" content={`Revenue & Geographic Breakdown`} />
</svelte:head>
<section
class="bg-[#09090B] w-full overflow-hidden text-white h-full pb-40 sm:mb-0"
>
<section class="bg-[#09090B] w-full overflow-hidden text-white h-full">
<div class="w-full flex justify-center w-full sm-auto h-full overflow-hidden">
<div
class="w-full relative flex justify-center items-center overflow-hidden"
>
{#if isLoaded}
<main class="w-full">
<div class="sm:p-7 m-auto mt-2 sm:mt-0">
<div class="sm:p-7 m-auto mt-2 sm:mt-0 w-full">
<div class="mb-3">
<h1 class="text-2xl text-gray-200 font-bold">
{convertToTitleCase(data?.getParams)} Revenue
@ -191,15 +189,20 @@
>
<th
class="text-white font-semibold text-end text-sm sm:text-[1rem]"
>% Change</th
>
Change
</th>
<th
class="text-white font-semibold text-end text-sm sm:text-[1rem]"
>Growth</th
>
</tr>
</thead>
<tbody>
{#each tableList as item}
{#each tableList as item, index}
<!-- row -->
<tr
class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#09090B] shake-ticker cursor-pointer"
class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#09090B] cursor-pointer"
>
<td
class="text-white font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]"
@ -222,6 +225,18 @@
: "-"}
</td>
<td
class="text-white text-sm sm:text-[1rem] text-right whitespace-nowrap border-b-[#09090B]"
>
{#if Number(item?.value - tableList[index + 1]?.value)}
{abbreviateNumber(
item?.value - tableList[index + 1]?.value,
)}
{:else}
-
{/if}
</td>
<td
class="text-white text-sm sm:text-[1rem] whitespace-nowrap font-medium text-end border-b-[#09090B]"
>

85
src/routes/stocks/[tickerID]/options/+layout.svelte
View File

@ -1,11 +1,80 @@
<section
class="w-full max-w-5xl bg-[#09090B] overflow-hidden text-black h-full mb-40"
>
<div class="h-full overflow-hidden">
<main class="w-full">
<div class="sm:ml-8 w-screen mb-2"></div>
</main>
<script lang="ts">
import ArrowLogo from "lucide-svelte/icons/move-up-right";
<slot />
export let data;
</script>
<section class="w-full overflow-hidden min-h-screen">
<div class="w-full overflow-hidden m-auto">
<div class="sm:p-0 flex justify-center w-full m-auto overflow-hidden">
<div
class="relative flex justify-center items-start overflow-hidden w-full"
>
<main class="w-full lg:w-3/4">
<slot />
</main>
<aside class="hidden lg:block relative fixed w-1/4 ml-4">
{#if data?.user?.tier !== "Pro" || data?.user?.freeTrial}
<div
class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer"
>
<a
href="/pricing"
class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"
>
<div class="w-full flex justify-between items-center p-3 mt-3">
<h2 class="text-start text-xl font-semibold text-white ml-3">
Pro Subscription 🔥
</h2>
<ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
</div>
<span class="text-white p-3 ml-3 mr-3">
Upgrade now for unlimited access to all data and tools.
</span>
</a>
</div>
{/if}
<div
class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer"
>
<a
href={"/price-alert"}
class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"
>
<div class="w-full flex justify-between items-center p-3 mt-3">
<h2 class="text-start text-xl font-semibold text-white ml-3">
Price Alert ⏰
</h2>
<ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
</div>
<span class="text-white p-3 ml-3 mr-3">
Customize your alerts to never miss out again
</span>
</a>
</div>
<div
class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer"
>
<a
href={"/stock-screener"}
class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"
>
<div class="w-full flex justify-between items-center p-3 mt-3">
<h2 class="text-start text-xl font-semibold text-white ml-3">
Stock Screener 🔎
</h2>
<ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
</div>
<span class="text-white p-3 ml-3 mr-3">
Build your Stock Screener to find profitable stocks.
</span>
</a>
</div>
</aside>
</div>
</div>
</div>
</section>

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

@ -552,9 +552,7 @@
<!-- Add more Twitter meta tags as needed -->
</svelte:head>
<section
class="w-full bg-[#09090B] overflow-hidden text-white h-full mb-40 sm:mb-0"
>
<section class="w-full bg-[#09090B] overflow-hidden text-white h-full">
<div class="w-full flex h-full overflow-hidden">
<div
class="w-full relative flex justify-center items-center overflow-hidden"

4
src/routes/stocks/[tickerID]/statistics/employees/+layout.svelte
View File

@ -4,13 +4,13 @@
export let data;
</script>
<section class="w-full max-w-screen-2xl overflow-hidden min-h-screen lg:px-3">
<section class="w-full overflow-hidden min-h-screen">
<div class="w-full overflow-hidden m-auto">
<div class="sm:p-0 flex justify-center w-full m-auto overflow-hidden">
<div
class="relative flex justify-center items-start overflow-hidden w-full"
>
<main class="w-full lg:w-3/4 lg:pr-5">
<main class="w-full lg:w-3/4">
<slot />
</main>

8
src/routes/stocks/[tickerID]/statistics/market-cap/+layout.svelte
View File

@ -4,15 +4,13 @@
export let data;
</script>
<section
class="w-full max-w-3xl sm:max-w-screen-2xl overflow-hidden min-h-screen pt-5 pb-40 lg:px-3"
>
<div class="w-full overflow-hidden m-auto mt-5">
<section class="w-full overflow-hidden min-h-screen">
<div class="w-full overflow-hidden m-auto">
<div class="sm:p-0 flex justify-center w-full m-auto overflow-hidden">
<div
class="relative flex justify-center items-start overflow-hidden w-full"
>
<main class="w-full lg:w-3/4 lg:pr-5">
<main class="w-full lg:w-3/4">
<slot />
</main>