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

ui fixes

Browse Source
This commit is contained in:
MuslemRahimi 2024-10-24 18:50:56 +02:00
parent ee2e9d9bff
commit f0c3f4c5dd
4 changed files with 1219 additions and 927 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

263
src/lib/components/TickerInfoCard.svelte
View File

@ -1,8 +1,8 @@
<script lang="ts"> <script lang="ts">
import {stockTicker, screenWidth, wsBidPrice, wsAskPrice} from '$lib/store'; import { stockTicker, screenWidth, wsBidPrice, wsAskPrice } from "$lib/store";
import { abbreviateNumber } from '$lib/utils'; import { abbreviateNumber } from "$lib/utils";
import { fade } from 'svelte/transition'; import { fade } from "svelte/transition";
export let stockDeck; export let stockDeck;
export let data; export let data;
@ -11,86 +11,88 @@
let cloudFrontUrl = import.meta.env.VITE_IMAGE_URL; // Set a default API URL let cloudFrontUrl = import.meta.env.VITE_IMAGE_URL; // Set a default API URL
let earningDate = null; let earningDate = null;
let tierList = '-'; let tierList = "-";
let ceoName = '-'; //let ceoName = "-";
let sector = '-'; let sector = "-";
let industry = '-'; let industry = "-";
let exchange = '-'; let exchange = "-";
let employees = '-'; let employees = "-";
let country = '-'; //let country = "-";
let description = ''; let description = "";
let website = '-'; let website = "-";
let snippet; let snippet;
let forwardPE = '-'; let forwardPE = "-";
let beta = '-'; let beta = "-";
let showFullText = false; let showFullText = false;
/*
function getAbbreviatedName(fullName) { function getAbbreviatedName(fullName) {
try { try {
const names = fullName?.split(' '); const names = fullName?.split(" ");
let firstName = names?.at(0); let firstName = names?.at(0);
// Remove any title prefix (e.g. Dr., Mr., Mrs., Ms.) // Remove any title prefix (e.g. Dr., Mr., Mrs., Ms.)
if (names?.length > 1 && /^(Dr|Mr|Mrs|Ms)\.?$/i?.test(names?.at(0))) { if (names?.length > 1 && /^(Dr|Mr|Mrs|Ms)\.?$/i?.test(names?.at(0))) {
firstName = names?.at(1); firstName = names?.at(1);
names?.splice(0, 1); names?.splice(0, 1);
} }
const initials = names?.slice(0, -1)?.map(name => name?.charAt(0))?.join('. '); //const initials = names?.slice(0, -1)?.map(name => name?.charAt(0))?.join('. ');
const lastName = names[names?.length - 1]; const lastName = names[names?.length - 1];
return `${firstName?.charAt(0)}. ${lastName}`; return `${firstName?.charAt(0)}. ${lastName}`;
} catch (e) { } catch (e) {
//console.log(e) //console.log(e)
return '-' return "-";
} }
} }
*/
$: { $: {
if (
$stockTicker &&
typeof window !== "undefined" &&
typeof stockDeck !== "undefined" &&
stockDeck?.length !== 0
) {
info = stockDeck?.at(0);
earningDate =
info?.earning !== undefined
? new Date(info?.earning)?.toLocaleDateString("en-GB", {
day: "numeric",
month: "long",
})
: "";
if ($stockTicker && typeof window !== 'undefined' && typeof stockDeck !== 'undefined' && stockDeck?.length !== 0)
{
info = stockDeck?.at(0)
earningDate = new Date( info?.earning );
earningDate = earningDate?.toLocaleDateString('en-GB', { day: 'numeric', month: 'long' });
tierList = info?.tierList; tierList = info?.tierList;
ceoName = info?.ceoName?.length !== 0 ? getAbbreviatedName(info?.ceoName) : '-'; //ceoName = info?.ceoName?.length !== 0 ? getAbbreviatedName(info?.ceoName) : "-";
sector = info?.sector ?? '-'; sector = info?.sector ?? "-";
industry = info?.industry ?? '-'; industry = info?.industry ?? "-";
exchange = info?.exchange; exchange = info?.exchange;
employees = abbreviateNumber(info?.fullTimeEmployees) ?? '-'; employees = abbreviateNumber(info?.fullTimeEmployees) ?? "-";
country = info?.country ?? '-'; //country = info?.country ?? "-";
description = info?.description ?? 'A detailed description of the company is not yet available.'; description =
info?.description ??
"A detailed description of the company is not yet available.";
website = info?.website; website = info?.website;
snippet = description?.slice(0, 150) + "..."; snippet = description?.slice(0, 150) + "...";
forwardPE = info?.forwardPE; forwardPE = info?.forwardPE;
beta = info?.beta?.toFixed(2); beta = info?.beta !== undefined ? info?.beta?.toFixed(2) : "-";
} }
} }
</script> </script>
<div class="sm:space-y-3"> <div class="sm:space-y-3">
<div class="sm:rounded-lg lg:border lg:border-slate-800 bg-[#000] lg:bg-[#09090B] h-auto w-screen pt-16 sm:w-full md:w-[420px] xl:w-[450px] lg:pt-0"> <div
class="sm:rounded-lg lg:border lg:border-slate-800 bg-[#000] lg:bg-[#09090B] h-auto w-screen pt-16 sm:w-full md:w-[420px] xl:w-[450px] lg:pt-0"
>
<!--Start Header--> <!--Start Header-->
<div class="sm:rounded-t-lg w-full h-[130px] bg-[#000] p-3 flex flex-col bg-cover bg-center bg-no-repeat" style="background-image: url({`${cloudFrontUrl}/stocks/cover/${$stockTicker?.toUpperCase()}.jpg`});"> <div
class="sm:rounded-t-lg w-full h-[130px] bg-[#000] p-3 flex flex-col bg-cover bg-center bg-no-repeat"
style="background-image: url({`${cloudFrontUrl}/stocks/cover/${$stockTicker?.toUpperCase()}.jpg`});"
>
<div class="flex flex-row pt-1 pb-2"> <div class="flex flex-row pt-1 pb-2">
{#if earningDate} {#if earningDate}
<div class="badge bg-[#FBCE3C] gap-2 mt-2 font-semibold text-sm text-black"> <div
class="badge bg-[#FBCE3C] gap-2 mt-2 font-semibold text-sm text-black"
>
Earnings Call - {earningDate} Earnings Call - {earningDate}
</div> </div>
{/if} {/if}
@ -111,7 +113,9 @@ $: {
<!--End Header--> <!--End Header-->
<!--Start Content--> <!--Start Content-->
<div class="w-full flex flex-wrap border-t border-slate-800 px-2"> <div class="w-full flex flex-wrap border-t border-slate-800 px-2">
<h2 class="text-start ml-2 text-2xl font-bold text-white pb-2 mt-3">Company Info</h2> <h2 class="text-start ml-2 text-2xl font-bold text-white pb-2 mt-3">
Company Info
</h2>
<div class="flex justify-center items-center w-full m-auto"> <div class="flex justify-center items-center w-full m-auto">
<table class="table table-sm table-compact"> <table class="table table-sm table-compact">
<tbody> <tbody>
@ -124,22 +128,56 @@ $: {
</tr> </tr>
--> -->
<tr class="text-white border-b border-[#27272A]"> <tr class="text-white border-b border-[#27272A]">
<td class="text-start bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap">Bid</td> <td
<td class="text-center sm:text-end bg-[#000] lg:bg-[#09090B]">{$wsBidPrice !== 0 && $wsBidPrice !== null ? $wsBidPrice : (data?.getStockQuote?.bid ?? '-')}</td> class="text-start bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap"
<td class="text-start sm:text-end bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap">Ask</td> >Bid</td
<td class="text-start sm:text-end bg-[#000] lg:bg-[#09090B]">{$wsAskPrice !== 0 && $wsAskPrice !== null ? $wsAskPrice : (data?.getStockQuote?.ask ?? '-')}</td> >
<td class="text-center sm:text-end bg-[#000] lg:bg-[#09090B]"
>{$wsBidPrice !== 0 && $wsBidPrice !== null
? $wsBidPrice
: (data?.getStockQuote?.bid ?? "-")}</td
>
<td
class="text-start sm:text-end bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap"
>Ask</td
>
<td class="text-start sm:text-end bg-[#000] lg:bg-[#09090B]"
>{$wsAskPrice !== 0 && $wsAskPrice !== null
? $wsAskPrice
: (data?.getStockQuote?.ask ?? "-")}</td
>
</tr> </tr>
<tr class="text-white border-b border-[#27272A]"> <tr class="text-white border-b border-[#27272A]">
<td class="text-start bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap">Mkt Cap</td> <td
<td class="text-center sm:text-end bg-[#000] lg:bg-[#09090B]">{abbreviateNumber(data?.getStockQuote?.marketCap)}</td> class="text-start bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap"
<td class="text-start sm:text-end bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap">Vol</td> >Mkt Cap</td
<td class="text-start sm:text-end bg-[#000] lg:bg-[#09090B]">{abbreviateNumber(data?.getStockQuote?.volume)}</td> >
<td class="text-center sm:text-end bg-[#000] lg:bg-[#09090B]"
>{abbreviateNumber(data?.getStockQuote?.marketCap)}</td
>
<td
class="text-start sm:text-end bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap"
>Vol</td
>
<td class="text-start sm:text-end bg-[#000] lg:bg-[#09090B]"
>{abbreviateNumber(data?.getStockQuote?.volume)}</td
>
</tr> </tr>
<tr class="text-white border-b border-[#27272A]"> <tr class="text-white border-b border-[#27272A]">
<td class="text-start bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap">Beta</td> <td
<td class="text-center sm:text-end bg-[#000] lg:bg-[#09090B]">{beta}</td> class="text-start bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap"
<td class="text-start sm:text-end bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap">Avg. Vol</td> >Beta</td
<td class="text-start sm:text-end bg-[#000] lg:bg-[#09090B]">{abbreviateNumber(data?.getStockQuote?.avgVolume)}</td> >
<td class="text-center sm:text-end bg-[#000] lg:bg-[#09090B]"
>{beta}</td
>
<td
class="text-start sm:text-end bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap"
>Avg. Vol</td
>
<td class="text-start sm:text-end bg-[#000] lg:bg-[#09090B]"
>{abbreviateNumber(data?.getStockQuote?.avgVolume)}</td
>
</tr> </tr>
<!-- <!--
<tr class="text-white "> <tr class="text-white ">
@ -156,10 +194,21 @@ $: {
</tr> </tr>
--> -->
<tr class="text-white border-b border-[#27272A]"> <tr class="text-white border-b border-[#27272A]">
<td class="text-start bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap">Open</td> <td
<td class="text-center sm:text-end bg-[#000] lg:bg-[#09090B]">{data?.getStockQuote?.open?.toFixed(2)}</td> class="text-start bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap"
<td class="text-start sm:text-end bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap ">Prev. Close</td> >Open</td
<td class="text-start sm:text-end bg-[#000] lg:bg-[#09090B] whitespace-nowrap ">{data?.getStockQuote?.previousClose?.toFixed(2) ?? '-'}</td> >
<td class="text-center sm:text-end bg-[#000] lg:bg-[#09090B]"
>{data?.getStockQuote?.open?.toFixed(2)}</td
>
<td
class="text-start sm:text-end bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap"
>Prev. Close</td
>
<td
class="text-start sm:text-end bg-[#000] lg:bg-[#09090B] whitespace-nowrap"
>{data?.getStockQuote?.previousClose?.toFixed(2) ?? "-"}</td
>
</tr> </tr>
<!-- <!--
{#if $screenWidth > 640} {#if $screenWidth > 640}
@ -172,26 +221,50 @@ $: {
{/if} {/if}
--> -->
<tr class="text-white border-b border-[#27272A]"> <tr class="text-white border-b border-[#27272A]">
<td class="text-start bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap">EPS (ttm)</td> <td
<td class="text-center sm:text-end bg-[#000] lg:bg-[#09090B]">{data?.getStockQuote?.eps}</td> class="text-start bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap"
<td class="text-start sm:text-end bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap">PE Ratio (ttm)</td> >EPS (ttm)</td
<td class="text-start sm:text-end bg-[#000] lg:bg-[#09090B]">{data?.getStockQuote?.pe}</td> >
<td class="text-center sm:text-end bg-[#000] lg:bg-[#09090B]"
>{data?.getStockQuote?.eps}</td
>
<td
class="text-start sm:text-end bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap"
>PE Ratio (ttm)</td
>
<td class="text-start sm:text-end bg-[#000] lg:bg-[#09090B]"
>{data?.getStockQuote?.pe}</td
>
</tr> </tr>
<tr class="text-white border-b border-[#27272A]"> <tr class="text-white border-b border-[#27272A]">
<td class="text-start bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap">Shares Out.</td> <td
<td class="text-center sm:text-end bg-[#000] lg:bg-[#09090B]">{abbreviateNumber(data?.getStockQuote?.sharesOutstanding)}</td> class="text-start bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap"
<td class="text-start sm:text-end bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap ">Forward PE</td> >Shares Out.</td
<td class="text-start sm:text-end bg-[#000] lg:bg-[#09090B] whitespace-nowrap ">{(forwardPE === undefined || forwardPE === null)? '-' : forwardPE}</td> >
<td class="text-center sm:text-end bg-[#000] lg:bg-[#09090B]"
>{abbreviateNumber(data?.getStockQuote?.sharesOutstanding)}</td
>
<td
class="text-start sm:text-end bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap"
>Forward PE</td
>
<td
class="text-start sm:text-end bg-[#000] lg:bg-[#09090B] whitespace-nowrap"
>{forwardPE === undefined || forwardPE === null
? "-"
: forwardPE}</td
>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
<h2 class="text-start sm:ml-4 text-xl font-bold text-white pb-2 pt-5 sm:pt-3 p-1 sm:p-0"> <h2
class="text-start sm:ml-4 text-xl font-bold text-white pb-2 pt-5 sm:pt-3 p-1 sm:p-0"
>
Description Description
</h2> </h2>
<p class="text-gray-100 sm:ml-2 text-sm whitespace-normal p-1 sm:p-2"> <p class="text-gray-100 sm:ml-2 text-sm whitespace-normal p-1 sm:p-2">
{#if showFullText} {#if showFullText}
<div transition:fade={{ delay: 0, duration: 80 }} in={showFullText}> <div transition:fade={{ delay: 0, duration: 80 }} in={showFullText}>
@ -205,7 +278,10 @@ $: {
</p> </p>
{#if description.length !== 0} {#if description.length !== 0}
<div class="flex flex-row w-full items-center mt-4 pb-2 mb-2"> <div class="flex flex-row w-full items-center mt-4 pb-2 mb-2">
<label on:click={() => showFullText = !showFullText} class="hidden lg:block ml-3 w-full text-md mt-1 cursor-pointer font-medium text-white sm:hover:text-blue-400 sm:hover:underline"> <label
on:click={() => (showFullText = !showFullText)}
class="hidden lg:block ml-3 w-full text-md mt-1 cursor-pointer font-medium text-white sm:hover:text-blue-400 sm:hover:underline"
>
{#if showFullText} {#if showFullText}
Show less Show less
{:else} {:else}
@ -214,26 +290,27 @@ $: {
</label> </label>
<div class="flex justify-end w-full relative bottom-0 right-0 mr-3"> <div class="flex justify-end w-full relative bottom-0 right-0 mr-3">
<a target ="_blank" href={website} class="inline-flex text-sm font-medium text-white sm:hover:text-blue-400 sm:hover:underline"> <a
target="_blank"
href={website}
class="inline-flex text-sm font-medium text-white sm:hover:text-blue-400 sm:hover:underline"
>
Go to website Go to website
<svg class="w-5 h-5 ml-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M11 3a1 1 0 100 2h2.586l-6.293 6.293a1 1 0 101.414 1.414L15 6.414V9a1 1 0 102 0V4a1 1 0 00-1-1h-5z"></path><path d="M5 5a2 2 0 00-2 2v8a2 2 0 002 2h8a2 2 0 002-2v-3a1 1 0 10-2 0v3H5V7h3a1 1 0 000-2H5z"></path></svg> <svg
class="w-5 h-5 ml-2"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
><path
d="M11 3a1 1 0 100 2h2.586l-6.293 6.293a1 1 0 101.414 1.414L15 6.414V9a1 1 0 102 0V4a1 1 0 00-1-1h-5z"
></path><path
d="M5 5a2 2 0 00-2 2v8a2 2 0 002 2h8a2 2 0 002-2v-3a1 1 0 10-2 0v3H5V7h3a1 1 0 000-2H5z"
></path></svg
>
</a> </a>
</div> </div>
</div> </div>
{/if} {/if}
</div> </div>
</div> </div>
</div> </div>

532
src/routes/dividends-calendar/+page.svelte
View File

@ -1,11 +1,16 @@
<script lang="ts"> <script lang="ts">
import {
import { format, startOfWeek, addDays, addWeeks, subWeeks, differenceInWeeks } from 'date-fns' format,
import { screenWidth, numberOfUnreadNotification } from '$lib/store'; startOfWeek,
import dividendsLogo from '$lib/images/dividends_calendar_logo.png'; addDays,
import { goto } from '$app/navigation'; addWeeks,
import { abbreviateNumber } from '$lib/utils'; subWeeks,
differenceInWeeks,
} from "date-fns";
import { screenWidth, numberOfUnreadNotification } from "$lib/store";
import dividendsLogo from "$lib/images/dividends_calendar_logo.png";
import { goto } from "$app/navigation";
import { abbreviateNumber } from "$lib/utils";
import ArrowLogo from "lucide-svelte/icons/move-up-right"; import ArrowLogo from "lucide-svelte/icons/move-up-right";
export let data; export let data;
@ -23,10 +28,15 @@
let formattedFriday = format(addDays(formattedMonday, 4), "EEE, MMM d"); let formattedFriday = format(addDays(formattedMonday, 4), "EEE, MMM d");
formattedMonday = format(formattedMonday, "EEE, MMM d"); formattedMonday = format(formattedMonday, "EEE, MMM d");
let formattedWeekday = [formattedMonday, formattedTuesday,formattedWednesday, formattedThursday, formattedFriday]; let formattedWeekday = [
formattedMonday,
formattedTuesday,
formattedWednesday,
formattedThursday,
formattedFriday,
];
let weekday = []; let weekday = [];
let startDate = startOfWeek(currentWeek, { weekStartsOn: 1 }); let startDate = startOfWeek(currentWeek, { weekStartsOn: 1 });
let endDate = addDays(startDate, 4); let endDate = addDays(startDate, 4);
let formattedStartDate = format(startDate, "yyyy-MM-dd"); let formattedStartDate = format(startDate, "yyyy-MM-dd");
@ -54,54 +64,52 @@
}, },
]; ];
let currentDate = new Date(); let currentDate = new Date();
let currentWeekday = Math.min((currentDate.getDay() + 6) % 7, 4); let currentWeekday = Math.min((currentDate.getDay() + 6) % 7, 4);
let selectedWeekday = currentWeekday; let selectedWeekday = currentWeekday;
function toggleDate(index) {
function toggleDate(index)
{
if ($screenWidth > 640) { if ($screenWidth > 640) {
selectedWeekday = index selectedWeekday = index;
} }
} }
function clickWeekday(state, index) { function clickWeekday(state, index) {
if (state === "next" && selectedWeekday + 1 <= 4) {
if (state==='next' && selectedWeekday+1 <=4)
{
selectedWeekday = selectedWeekday + 1; selectedWeekday = selectedWeekday + 1;
} } else if (state === "previous" && selectedWeekday - 1 >= 0) {
else if( state === 'previous' && selectedWeekday-1 >=0)
{
selectedWeekday--; selectedWeekday--;
} } else if (
state === "previous" &&
else if (state=== 'previous' && index === 0 && differenceInWeeks(currentWeek, today) > -maxWeeksChange) index === 0 &&
{ differenceInWeeks(currentWeek, today) > -maxWeeksChange
changeWeek(state) ) {
changeWeek(state);
selectedWeekday = 4; selectedWeekday = 4;
} } else if (
else if (state=== 'next' && index === 4 && differenceInWeeks(currentWeek, today) < maxWeeksChange) state === "next" &&
{ index === 4 &&
changeWeek(state) differenceInWeeks(currentWeek, today) < maxWeeksChange
) {
changeWeek(state);
selectedWeekday = 0; selectedWeekday = 0;
} }
} }
async function changeWeek(state) { async function changeWeek(state) {
//Limit the user to go back max 4 weeks and look forward 4 weeks //Limit the user to go back max 4 weeks and look forward 4 weeks
if (state === 'previous' && differenceInWeeks(currentWeek, today) > -maxWeeksChange) { if (
state === "previous" &&
differenceInWeeks(currentWeek, today) > -maxWeeksChange
) {
currentWeek = subWeeks(currentWeek, 1); currentWeek = subWeeks(currentWeek, 1);
} else if (state === 'next' && differenceInWeeks(currentWeek, today) < maxWeeksChange) { } else if (
state === "next" &&
differenceInWeeks(currentWeek, today) < maxWeeksChange
) {
currentWeek = addWeeks(currentWeek, 1); currentWeek = addWeeks(currentWeek, 1);
} }
formattedMonday = startOfWeek(currentWeek, { weekStartsOn: 1 }); formattedMonday = startOfWeek(currentWeek, { weekStartsOn: 1 });
formattedTuesday = format(addDays(formattedMonday, 1), "EEE, MMM d"); formattedTuesday = format(addDays(formattedMonday, 1), "EEE, MMM d");
formattedWednesday = format(addDays(formattedMonday, 2), "EEE, MMM d"); formattedWednesday = format(addDays(formattedMonday, 2), "EEE, MMM d");
@ -109,7 +117,13 @@ async function changeWeek(state) {
formattedFriday = format(addDays(formattedMonday, 4), "EEE, MMM d"); formattedFriday = format(addDays(formattedMonday, 4), "EEE, MMM d");
formattedMonday = format(formattedMonday, "EEE, MMM d"); formattedMonday = format(formattedMonday, "EEE, MMM d");
formattedWeekday = [formattedMonday, formattedTuesday,formattedWednesday, formattedThursday, formattedFriday]; formattedWeekday = [
formattedMonday,
formattedTuesday,
formattedWednesday,
formattedThursday,
formattedFriday,
];
weekday = []; weekday = [];
startDate = startOfWeek(currentWeek, { weekStartsOn: 1 }); startDate = startOfWeek(currentWeek, { weekStartsOn: 1 });
@ -139,42 +153,11 @@ async function changeWeek(state) {
}, },
]; ];
dividendCalendar = daysOfWeek.map((day) => { dividendCalendar = daysOfWeek.map((day) => {
return { return {
name: day.name, name: day.name,
data: data?.getDividendCalendar?.filter( data: data?.getDividendCalendar?.filter(
(item) => item.date === day.date (item) => item.date === day.date,
),
};
});
if (dividendCalendar?.length) {
// Loop through each day of the week
for (let i = 0; i < dividendCalendar.length; i++) {
const dayData = dividendCalendar[i].data;
// Filter out entries with company name "---"
// Sort and map the filtered data
weekday[i] = dayData
.sort((a, b) => b.marketCap - a.marketCap)
}
}
}
$: {
if( dividendCalendar)
{
dividendCalendar = daysOfWeek.map((day) => {
return {
name: day.name,
data: data?.getDividendCalendar?.filter(
(item) => item.date === day.date
), ),
}; };
}); });
@ -187,73 +170,91 @@ $: {
// Filter out entries with company name "---" // Filter out entries with company name "---"
// Sort and map the filtered data // Sort and map the filtered data
weekday[i] = dayData weekday[i] = dayData.sort((a, b) => b.marketCap - a.marketCap);
.sort((a, b) => b.marketCap - a.marketCap)
} }
}
} }
} }
$: { $: {
if (currentWeek) if (dividendCalendar) {
{ dividendCalendar = daysOfWeek.map((day) => {
return {
name: day.name,
data: data?.getDividendCalendar?.filter(
(item) => item.date === day.date,
),
};
});
if (differenceInWeeks(currentWeek, today) > -maxWeeksChange) if (dividendCalendar?.length) {
{ // Loop through each day of the week
for (let i = 0; i < dividendCalendar.length; i++) {
const dayData = dividendCalendar[i].data;
// Filter out entries with company name "---"
// Sort and map the filtered data
weekday[i] = dayData.sort((a, b) => b.marketCap - a.marketCap);
}
}
}
}
$: {
if (currentWeek) {
if (differenceInWeeks(currentWeek, today) > -maxWeeksChange) {
previousMax = false; previousMax = false;
} } else {
else {
previousMax = true; previousMax = true;
} }
} }
} }
$: { $: {
if (currentWeek) if (currentWeek) {
{ if (differenceInWeeks(currentWeek, today) < maxWeeksChange) {
if (differenceInWeeks(currentWeek, today) < maxWeeksChange)
{
nextMax = false; nextMax = false;
} } else {
else {
nextMax = true; nextMax = true;
} }
} }
} }
</script> </script>
<svelte:head> <svelte:head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width" /> <meta name="viewport" content="width=device-width" />
<title> <title>
{$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ''} Dividends Calendar · stocknear {$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ""} Dividends
Calendar · stocknear
</title> </title>
<meta name="description" content={`A list of upcoming dividends on the US stock market, with dates, times and estimated revenue and dividends growth.`} /> <meta
name="description"
content={`A list of upcoming dividends on the US stock market, with dates, times and estimated revenue and dividends growth.`}
/>
<!-- Other meta tags --> <!-- Other meta tags -->
<meta property="og:title" content={`Dividends Calendar · stocknear`} /> <meta property="og:title" content={`Dividends Calendar · stocknear`} />
<meta property="og:description" content={`A list of upcoming dividends on the US stock market, with dates, times and estimated revenue and dividends growth.`} /> <meta
property="og:description"
content={`A list of upcoming dividends on the US stock market, with dates, times and estimated revenue and dividends growth.`}
/>
<meta property="og:type" content="website" /> <meta property="og:type" content="website" />
<!-- Add more Open Graph meta tags as needed --> <!-- Add more Open Graph meta tags as needed -->
<!-- Twitter specific meta tags --> <!-- Twitter specific meta tags -->
<meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content={`Dividends Calendar · stocknear`} /> <meta name="twitter:title" content={`Dividends Calendar · stocknear`} />
<meta name="twitter:description" content={`A list of upcoming dividends on the US stock market, with dates, times and estimated revenue and dividends growth.`} /> <meta
name="twitter:description"
content={`A list of upcoming dividends on the US stock market, with dates, times and estimated revenue and dividends growth.`}
/>
<!-- Add more Twitter meta tags as needed --> <!-- Add more Twitter meta tags as needed -->
</svelte:head> </svelte:head>
<section
class="w-full max-w-3xl sm:max-w-screen-2xl overflow-hidden min-h-screen pt-5 pb-40"
<section class="w-full max-w-3xl sm:max-w-screen-2xl overflow-hidden min-h-screen pt-5 pb-40"> >
<div class="text-sm sm:text-[1rem] breadcrumbs ml-4"> <div class="text-sm sm:text-[1rem] breadcrumbs ml-4">
<ul> <ul>
<li><a href="/" class="text-gray-300">Home</a></li> <li><a href="/" class="text-gray-300">Home</a></li>
@ -261,38 +262,43 @@ $: {
</ul> </ul>
</div> </div>
<div class="w-full overflow-hidden m-auto mt-5"> <div class="w-full overflow-hidden m-auto mt-5">
<div class="sm:p-0 flex justify-center w-full m-auto overflow-hidden"> <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"> <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 lg:pr-5">
<div
<div class="w-full m-auto sm:bg-[#27272A] sm:rounded-xl h-auto pl-10 pr-10 pt-5 sm:pb-10 sm:pt-10 mt-3 mb-8"> class="w-full m-auto sm:bg-[#27272A] sm:rounded-xl h-auto pl-10 pr-10 pt-5 sm:pb-10 sm:pt-10 mt-3 mb-8"
>
<div class="grid grid-cols-1 sm:grid-cols-2 gap-10"> <div class="grid grid-cols-1 sm:grid-cols-2 gap-10">
<!-- Start Column --> <!-- Start Column -->
<div> <div>
<div class="flex flex-row justify-center items-center"> <div class="flex flex-row justify-center items-center">
<h1 class="text-3xl sm:text-4xl text-white text-center font-bold mb-5"> <h1
class="text-3xl sm:text-4xl text-white text-center font-bold mb-5"
>
Dividends Calendar Dividends Calendar
</h1> </h1>
</div> </div>
<span class="hidden sm:block text-white text-md font-medium text-center flex justify-center items-center "> <span
class="hidden sm:block text-white text-md font-medium text-center flex justify-center items-center"
>
Stay updated on upcoming Dividends in the stock market. Stay updated on upcoming Dividends in the stock market.
</span> </span>
</div> </div>
<!-- End Column --> <!-- End Column -->
<!-- Start Column --> <!-- Start Column -->
<div class="hidden sm:block relative m-auto mb-5 mt-5 sm:mb-0 sm:mt-0"> <div
<svg class="w-36 -my-5" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"> class="hidden sm:block relative m-auto mb-5 mt-5 sm:mb-0 sm:mt-0"
>
<svg
class="w-36 -my-5"
viewBox="0 0 200 200"
xmlns="http://www.w3.org/2000/svg"
>
<defs> <defs>
<filter id="glow"> <filter id="glow">
<feGaussianBlur stdDeviation="5" result="glow" /> <feGaussianBlur stdDeviation="5" result="glow" />
@ -302,137 +308,286 @@ $: {
</feMerge> </feMerge>
</filter> </filter>
</defs> </defs>
<path fill="#1E40AF" d="M57.6,-58.7C72.7,-42.6,81.5,-21.3,82,0.5C82.5,22.3,74.7,44.6,59.7,60.1C44.6,75.6,22.3,84.3,0,84.3C-22.3,84.2,-44.6,75.5,-61.1,60.1C-77.6,44.6,-88.3,22.3,-87.6,0.7C-86.9,-20.8,-74.7,-41.6,-58.2,-57.7C-41.6,-73.8,-20.8,-85.2,0.2,-85.4C21.3,-85.6,42.6,-74.7,57.6,-58.7Z" transform="translate(100 100)" filter="url(#glow)" /> <path
fill="#1E40AF"
d="M57.6,-58.7C72.7,-42.6,81.5,-21.3,82,0.5C82.5,22.3,74.7,44.6,59.7,60.1C44.6,75.6,22.3,84.3,0,84.3C-22.3,84.2,-44.6,75.5,-61.1,60.1C-77.6,44.6,-88.3,22.3,-87.6,0.7C-86.9,-20.8,-74.7,-41.6,-58.2,-57.7C-41.6,-73.8,-20.8,-85.2,0.2,-85.4C21.3,-85.6,42.6,-74.7,57.6,-58.7Z"
transform="translate(100 100)"
filter="url(#glow)"
/>
</svg> </svg>
<div class="z-1 absolute top-2 right-7"> <div class="z-1 absolute top-2 right-7">
<img class="w-24" src={dividendsLogo} alt="logo" loading="lazy"> <img
class="w-24"
src={dividendsLogo}
alt="logo"
loading="lazy"
/>
</div> </div>
</div> </div>
<!-- End Column --> <!-- End Column -->
</div> </div>
</div> </div>
<!-- Page wrapper --> <!-- Page wrapper -->
<div class="flex justify-center w-full m-auto h-full overflow-hidden"> <div class="flex justify-center w-full m-auto h-full overflow-hidden">
<!-- Content area --> <!-- Content area -->
<div class="w-full overflow-x-scroll"> <div class="w-full overflow-x-scroll">
<!-- Cards --> <!-- Cards -->
<div class=" w-full flex flex-row justify-center m-auto items-center pl-2 pr-2 sm:pl-0 sm:pr-0"> <div
class=" w-full flex flex-row justify-center m-auto items-center pl-2 pr-2 sm:pl-0 sm:pr-0"
>
<!-- Start Columns --> <!-- Start Columns -->
<label on:click={() => changeWeek('previous')} class="{previousMax ? 'opacity-80' : ''} hidden sm:flex h-16 w-48 cursor-pointer border m-auto flex bg-[#27272A] border border-gray-600 mb-3"> <label
<svg class="w-6 h-6 m-auto rotate-180 " xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M8.025 22L6.25 20.225L14.475 12L6.25 3.775L8.025 2l10 10l-10 10Z"/></svg> on:click={() => changeWeek("previous")}
class="{previousMax
? 'opacity-80'
: ''} hidden sm:flex h-16 w-48 cursor-pointer border m-auto flex bg-[#27272A] border border-gray-600 mb-3"
>
<svg
class="w-6 h-6 m-auto rotate-180"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
><path
fill="white"
d="M8.025 22L6.25 20.225L14.475 12L6.25 3.775L8.025 2l10 10l-10 10Z"
/></svg
>
</label> </label>
{#each weekday as day, index} {#each weekday as day, index}
<div
<div class="w-full {index === selectedWeekday ? '' : 'hidden sm:block'}"> class="w-full {index === selectedWeekday
<label on:click={() => toggleDate(index)} class="w-11/12 m-auto sm:w-full cursor-pointer h-16 {index === selectedWeekday ? 'bg-purple-600 sm:hover:bg-purple-700' : ''} rounded-lg sm:rounded-none flex bg-[#09090B] sm:hover:bg-purple-600 transition duration-50 border border-gray-600 mb-3"> ? ''
<div class=" flex flex-row justify-center items-center w-full "> : 'hidden sm:block'}"
<label on:click={() => clickWeekday('previous', index) } class="{previousMax === true && index === 0? 'opacity-20' : ''} sm:hidden ml-auto"> >
<svg class="w-8 h-8 inline-block rotate-180 " xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M8.025 22L6.25 20.225L14.475 12L6.25 3.775L8.025 2l10 10l-10 10Z"/></svg> <label
on:click={() => toggleDate(index)}
class="w-11/12 m-auto sm:w-full cursor-pointer h-16 {index ===
selectedWeekday
? 'bg-purple-600 sm:hover:bg-purple-700'
: ''} rounded-lg sm:rounded-none flex bg-[#09090B] sm:hover:bg-purple-600 transition duration-50 border border-gray-600 mb-3"
>
<div
class=" flex flex-row justify-center items-center w-full"
>
<label
on:click={() => clickWeekday("previous", index)}
class="{previousMax === true && index === 0
? 'opacity-20'
: ''} sm:hidden ml-auto"
>
<svg
class="w-8 h-8 inline-block rotate-180"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
><path
fill="white"
d="M8.025 22L6.25 20.225L14.475 12L6.25 3.775L8.025 2l10 10l-10 10Z"
/></svg
>
</label> </label>
<div class="flex flex-col items-center text-white truncate m-auto p-1"> <div
<span class="font-medium text-[1rem]">{formattedWeekday[index]}</span> class="flex flex-col items-center text-white truncate m-auto p-1"
<span class="text-[1rem] sm:text-sm m-auto pt-1 pb-1"> {day?.length} Earnings</span> >
<span class="font-medium text-[1rem]"
>{formattedWeekday[index]}</span
>
<span class="text-[1rem] sm:text-sm m-auto pt-1 pb-1">
{day?.length} Earnings</span
>
</div> </div>
<label on:click={() => clickWeekday('next', index) } class="{nextMax === true && index === 4? 'opacity-20' : ''} sm:hidden mr-auto"> <label
<svg class="w-8 h-8 inline-block" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M8.025 22L6.25 20.225L14.475 12L6.25 3.775L8.025 2l10 10l-10 10Z"/></svg> on:click={() => clickWeekday("next", index)}
class="{nextMax === true && index === 4
? 'opacity-20'
: ''} sm:hidden mr-auto"
>
<svg
class="w-8 h-8 inline-block"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
><path
fill="white"
d="M8.025 22L6.25 20.225L14.475 12L6.25 3.775L8.025 2l10 10l-10 10Z"
/></svg
>
</label> </label>
</div> </div>
</label> </label>
</div> </div>
{/each} {/each}
<label on:click={() => changeWeek('next')} class="{nextMax ? 'opacity-80' : ''} hidden sm:flex h-16 w-48 cursor-pointer border m-auto flex bg-[#27272A] border border-gray-600 mb-3"> <label
<svg class="w-6 h-6 m-auto" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M8.025 22L6.25 20.225L14.475 12L6.25 3.775L8.025 2l10 10l-10 10Z"/></svg> on:click={() => changeWeek("next")}
class="{nextMax
? 'opacity-80'
: ''} hidden sm:flex h-16 w-48 cursor-pointer border m-auto flex bg-[#27272A] border border-gray-600 mb-3"
>
<svg
class="w-6 h-6 m-auto"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
><path
fill="white"
d="M8.025 22L6.25 20.225L14.475 12L6.25 3.775L8.025 2l10 10l-10 10Z"
/></svg
>
</label> </label>
</div> </div>
{#each weekday as day, index} {#each weekday as day, index}
{#if index === selectedWeekday} {#if index === selectedWeekday}
{#if day?.length !== 0} {#if day?.length !== 0}
<div class="w-full overflow-x-scroll no-scrollbar"> <div class="w-full overflow-x-scroll no-scrollbar">
<table class="table table-sm table-compact rounded-none sm:rounded-md w-full border-[#09090B] m-auto mt-4 "> <table
class="table table-sm table-compact rounded-none sm:rounded-md w-full border-[#09090B] m-auto mt-4"
>
<thead> <thead>
<tr class="whitespace-nowrap border-b border-[#27272A]"> <tr
<th class="text-white font-semibold text-sm">Symbol</th> class="whitespace-nowrap border-b border-[#27272A]"
<th class="text-white font-semibold text-sm">Company Name</th> >
<th class="text-white font-semibold text-sm">Market Cap</th> <th class="text-white font-semibold text-sm"
<th class="text-white font-semibold text-sm">Revenue</th> >Symbol</th
<th class="text-white font-semibold text-sm">Ex. Dividend Date</th> >
<th class="text-white font-semibold text-sm">Cash Amount</th> <th class="text-white font-semibold text-sm"
<th class="text-white font-semibold text-sm text-end">Payment Date</th> >Company Name</th
>
<th
class="text-white font-semibold text-sm text-end"
>Market Cap</th
>
<th
class="text-white font-semibold text-sm text-end"
>Revenue</th
>
<th
class="text-white font-semibold text-sm text-end"
>Ex. Dividend Date</th
>
<th
class="text-white font-semibold text-sm text-end"
>Cash Amount</th
>
<th
class="text-white font-semibold text-sm text-end"
>Payment Date</th
>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
{#each day as item, index} {#each day as item, index}
<!-- row --> <!-- row -->
<tr on:click={() => goto("/stocks/"+item?.symbol)} class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#09090B] cursor-pointer"> <tr
class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#09090B]"
<td class="text-blue-400 border-b-[#09090B] text-sm sm:text-[1rem]"> >
{item?.symbol} <td
class="border-b-[#09090B] text-sm sm:text-[1rem]"
>
<a
href={"/stocks/" + item?.symbol}
class="text-blue-400 sm:hover:text-white"
>{item?.symbol}
</a>
</td> </td>
<td class="text-white border-b-[#09090B] whitespace-nowrap text-sm sm:text-[1rem]"> <td
{item?.name.length > 20 ? item?.name.slice(0,20) + "..." : item?.name} class="text-white border-b-[#09090B] whitespace-nowrap text-sm sm:text-[1rem]"
>
{item?.name.length > 20
? item?.name.slice(0, 20) + "..."
: item?.name}
</td> </td>
<td
<td class="text-white border-b-[#09090B] text-sm sm:text-[1rem]"> class="text-white border-b-[#09090B] text-sm text-end sm:text-[1rem]"
{item?.marketCap !== null ? abbreviateNumber(item?.marketCap,true) : '-'} >
{item?.marketCap !== null
? abbreviateNumber(item?.marketCap)
: "-"}
</td> </td>
<td class="text-white border-b-[#09090B] text-sm sm:text-[1rem]"> <td
{item?.revenue !== null ? abbreviateNumber(item?.revenue,true) : '-'} class="text-white border-b-[#09090B] text-sm sm:text-[1rem] text-end"
>
{item?.revenue !== null
? abbreviateNumber(item?.revenue)
: "-"}
</td> </td>
<td class="text-center text-white border-b-[#09090B] whitespace-nowrap text-sm sm:text-[1rem]"> <td
{item?.date !== null ? new Date(item?.date)?.toLocaleString('en-US', { month: 'short', day: 'numeric', year: 'numeric', daySuffix: '2-digit' }) : '-'} class="text-center text-white border-b-[#09090B] whitespace-nowrap text-sm sm:text-[1rem] text-end"
>
{item?.date !== null
? new Date(item?.date)?.toLocaleString(
"en-US",
{
month: "short",
day: "numeric",
year: "numeric",
daySuffix: "2-digit",
},
)
: "-"}
</td> </td>
<td class="text-white border-b-[#09090B] text-center text-sm sm:text-[1rem]"> <td
{item?.adjDividend !== null ? '$'+item?.adjDividend?.toFixed(2) : 'n/a'} class="text-white border-b-[#09090B] text-center text-sm sm:text-[1rem] text-end"
>
{item?.adjDividend !== null
? item?.adjDividend?.toFixed(2)
: "-"}
</td> </td>
<td class="text-white text-end border-b-[#09090B] text-sm sm:text-[1rem]"> <td
{item?.paymentDate !== null ? new Date(item?.paymentDate)?.toLocaleString('en-US', { month: 'short', day: 'numeric', year: 'numeric', daySuffix: '2-digit' }) : '-'} class="text-white text-end border-b-[#09090B] text-sm sm:text-[1rem]"
>
{item?.paymentDate !== null
? new Date(item?.paymentDate)?.toLocaleString(
"en-US",
{
month: "short",
day: "numeric",
year: "numeric",
daySuffix: "2-digit",
},
)
: "-"}
</td> </td>
</tr> </tr>
{/each} {/each}
</tbody> </tbody>
</table> </table>
</div> </div>
{:else} {:else}
<div class="text-white p-5 mt-5 w-fit m-auto rounded-lg sm:flex sm:flex-row sm:items-center border border-slate-800 text-[1rem]"> <div
<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> class="text-white p-5 mt-5 w-fit m-auto rounded-lg sm:flex sm:flex-row sm:items-center border border-slate-800 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
>
No Dividends available for the day. No Dividends available for the day.
</div> </div>
{/if} {/if}
{/if} {/if}
{/each} {/each}
</div>
</div>
</main> </main>
<aside class="hidden lg:block relative fixed w-1/4 ml-4"> <aside class="hidden lg:block relative fixed w-1/4 ml-4">
{#if data?.user?.tier !== "Pro" || data?.user?.freeTrial}
{#if data?.user?.tier !== 'Pro' || data?.user?.freeTrial} <div
<div on:click={() => goto('/pricing')} 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"> on:click={() => goto("/pricing")}
<div class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"> 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"
>
<div
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"> <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"> <h2 class="text-start text-xl font-semibold text-white ml-3">
Pro Subscription Pro Subscription
@ -446,7 +601,10 @@ $: {
</div> </div>
{/if} {/if}
<div on:click={() => goto('/earnings-calendar')} 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"> <div
on:click={() => goto("/earnings-calendar")}
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"
>
<div class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"> <div 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"> <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"> <h2 class="text-start text-xl font-semibold text-white ml-3">
@ -460,7 +618,10 @@ $: {
</div> </div>
</div> </div>
<div on:click={() => goto('/economic-calendar')} 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"> <div
on:click={() => goto("/economic-calendar")}
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"
>
<div class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"> <div 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"> <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"> <h2 class="text-start text-xl font-semibold text-white ml-3">
@ -473,15 +634,8 @@ $: {
</span> </span>
</div> </div>
</div> </div>
</aside> </aside>
</div> </div>
</div> </div>
</div> </div>
</section> </section>

211
src/routes/ipos/+layout.svelte
View File

@ -1,122 +1,138 @@
<script lang='ts'> <script lang="ts">
import { page } from '$app/stores'; import { page } from "$app/stores";
import { numberOfUnreadNotification, screenWidth } from '$lib/store'; import { numberOfUnreadNotification, screenWidth } from "$lib/store";
import ArrowLogo from "lucide-svelte/icons/move-up-right"; import ArrowLogo from "lucide-svelte/icons/move-up-right";
import { goto } from "$app/navigation";
export let data; export let data;
let navigation = []; let navigation = [];
let displaySection = '2024' let displaySection = "2024";
let cloudFrontUrl = import.meta.env.VITE_IMAGE_URL; let cloudFrontUrl = import.meta.env.VITE_IMAGE_URL;
for (let year = 2024; year >= 2019; year--) { for (let year = 2024; year >= 2019; year--) {
navigation.push({ title: year, link: `/ipos/${year}` }); navigation.push({ title: year, link: `/ipos/${year}` });
} }
function scrollToItem(itemId) { function scrollToItem(itemId) {
const item = document.getElementById(itemId); const item = document.getElementById(itemId);
if (item) { if (item) {
item.scrollIntoView({ behavior: "smooth" });
item.scrollIntoView({ behavior: 'smooth' }); window.scrollTo(0, 0);
window.scrollTo(0,0)
} }
} }
function changeSection(state, item) { function changeSection(state, item) {
scrollToItem(item); scrollToItem(item);
displaySection = state; displaySection = state;
} }
$: { $: {
if($page.url.pathname) if ($page.url.pathname) {
{ const parts = $page?.url?.pathname?.split("/");
const parts = $page?.url?.pathname?.split('/');
const sectionMap = { const sectionMap = {
'2024': '2024', "2024": "2024",
'2023': '2023', "2023": "2023",
'2022': '2022', "2022": "2022",
'2021': '2021', "2021": "2021",
'2020': '2020', "2020": "2020",
'2019': '2019' "2019": "2019",
}; };
displaySection = sectionMap[parts?.find(part => Object?.keys(sectionMap)?.includes(part))] || 'overview'; displaySection =
sectionMap[
parts?.find((part) => Object?.keys(sectionMap)?.includes(part))
] || "overview";
} }
} }
</script> </script>
<!-- HEADER FOR BETTER SEO --> <!-- HEADER FOR BETTER SEO -->
<svelte:head> <svelte:head>
<title> {$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ''} IPOs Calendar · stocknear</title> <title>
{$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ""} IPOs
Calendar · stocknear</title
>
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width" /> <meta name="viewport" content="width=device-width" />
<meta name="description" content="A list of upcoming ipos on the US stock market."> <meta
name="description"
content="A list of upcoming ipos on the US stock market."
/>
<!-- Other meta tags --> <!-- Other meta tags -->
<meta property="og:title" content="IPOs Calendar · stocknear" /> <meta property="og:title" content="IPOs Calendar · stocknear" />
<meta property="og:description" content="A list of upcoming ipos on the US stock market."> <meta
<meta property="og:image" content="https://stocknear-pocketbase.s3.amazonaws.com/logo/meta_logo.jpg"/> property="og:description"
content="A list of upcoming ipos on the US stock market."
/>
<meta
property="og:image"
content="https://stocknear-pocketbase.s3.amazonaws.com/logo/meta_logo.jpg"
/>
<meta property="og:type" content="website" /> <meta property="og:type" content="website" />
<!-- Add more Open Graph meta tags as needed --> <!-- Add more Open Graph meta tags as needed -->
<!-- Twitter specific meta tags --> <!-- Twitter specific meta tags -->
<meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="IPOs Calendar · stocknear" /> <meta name="twitter:title" content="IPOs Calendar · stocknear" />
<meta name="twitter:description" content="A list of upcoming ipos on the US stock market."> <meta
<meta name="twitter:image" content="https://stocknear-pocketbase.s3.amazonaws.com/logo/meta_logo.jpg"/> name="twitter:description"
content="A list of upcoming ipos on the US stock market."
/>
<meta
name="twitter:image"
content="https://stocknear-pocketbase.s3.amazonaws.com/logo/meta_logo.jpg"
/>
<!-- Add more Twitter meta tags as needed --> <!-- Add more Twitter meta tags as needed -->
</svelte:head> </svelte:head>
<section
class="w-full max-w-3xl sm:max-w-screen-2xl overflow-hidden min-h-screen pt-5 pb-40"
<section class="w-full max-w-3xl sm:max-w-screen-2xl overflow-hidden min-h-screen pt-5 pb-40"> >
<!-- <div class="text-sm breadcrumbs ml-4 sm:ml-2">
<div class="text-sm breadcrumbs ml-4">
<ul> <ul>
<li><a href="/" class="text-gray-300">Home</a></li> <li><a href="/" class="text-gray-300">Home</a></li>
<li class="text-gray-300">Analysts</li> <li class="text-gray-300">IPO Calendar</li>
</ul> </ul>
</div> </div>
-->
<div class="w-full overflow-hidden m-auto mt-5"> <div class="w-full overflow-hidden m-auto mt-5">
<div class="sm:p-0 flex justify-center w-full m-auto overflow-hidden"> <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"> <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 lg:pr-5">
<div
class="w-full m-auto sm:bg-[#27272A] sm:rounded-lg h-auto pl-10 pr-10 pt-5 sm:pb-10 sm:pt-10 mt-3 mb-12"
<div class="w-full m-auto sm:bg-[#27272A] sm:rounded-lg h-auto pl-10 pr-10 pt-5 sm:pb-10 sm:pt-10 mt-3 mb-12"> >
<div class="grid grid-cols-1 sm:grid-cols-2 gap-10"> <div class="grid grid-cols-1 sm:grid-cols-2 gap-10">
<!-- Start Column --> <!-- Start Column -->
<div> <div>
<div class="flex flex-row justify-center items-center"> <div class="flex flex-row justify-center items-center">
<h1 class="text-3xl sm:text-4xl text-white text-center font-bold mb-5"> <h1
class="text-3xl sm:text-4xl text-white text-center font-bold mb-5"
>
IPO Calendar IPO Calendar
</h1> </h1>
</div> </div>
<span class="text-white text-md font-medium text-center flex justify-center items-center "> <span
class="text-white text-md font-medium text-center flex justify-center items-center"
>
Stay updated on upcoming IPOs in the stock market. Stay updated on upcoming IPOs in the stock market.
</span> </span>
</div> </div>
<!-- End Column --> <!-- End Column -->
<!-- Start Column --> <!-- Start Column -->
<div class="hidden sm:block relative m-auto mb-5 mt-5 sm:mb-0 sm:mt-0"> <div
<svg class="w-40 -my-5" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"> class="hidden sm:block relative m-auto mb-5 mt-5 sm:mb-0 sm:mt-0"
>
<svg
class="w-40 -my-5"
viewBox="0 0 200 200"
xmlns="http://www.w3.org/2000/svg"
>
<defs> <defs>
<filter id="glow"> <filter id="glow">
<feGaussianBlur stdDeviation="5" result="glow" /> <feGaussianBlur stdDeviation="5" result="glow" />
@ -126,51 +142,66 @@ $: {
</feMerge> </feMerge>
</filter> </filter>
</defs> </defs>
<path fill="#1E40AF" d="M57.6,-58.7C72.7,-42.6,81.5,-21.3,82,0.5C82.5,22.3,74.7,44.6,59.7,60.1C44.6,75.6,22.3,84.3,0,84.3C-22.3,84.2,-44.6,75.5,-61.1,60.1C-77.6,44.6,-88.3,22.3,-87.6,0.7C-86.9,-20.8,-74.7,-41.6,-58.2,-57.7C-41.6,-73.8,-20.8,-85.2,0.2,-85.4C21.3,-85.6,42.6,-74.7,57.6,-58.7Z" transform="translate(100 100)" filter="url(#glow)" /> <path
fill="#1E40AF"
d="M57.6,-58.7C72.7,-42.6,81.5,-21.3,82,0.5C82.5,22.3,74.7,44.6,59.7,60.1C44.6,75.6,22.3,84.3,0,84.3C-22.3,84.2,-44.6,75.5,-61.1,60.1C-77.6,44.6,-88.3,22.3,-87.6,0.7C-86.9,-20.8,-74.7,-41.6,-58.2,-57.7C-41.6,-73.8,-20.8,-85.2,0.2,-85.4C21.3,-85.6,42.6,-74.7,57.6,-58.7Z"
transform="translate(100 100)"
filter="url(#glow)"
/>
</svg> </svg>
<div class="z-1 absolute top-0 left-7"> <div class="z-1 absolute top-0 left-7">
<img class="w-[90px] h-fit" src={cloudFrontUrl+"/assets/ipo_logo.png"} alt="logo" loading="lazy"> <img
class="w-[90px] h-fit"
src={cloudFrontUrl + "/assets/ipo_logo.png"}
alt="logo"
loading="lazy"
/>
</div> </div>
</div> </div>
<!-- End Column --> <!-- End Column -->
</div> </div>
</div> </div>
<div class="sm:ml-4 w-screen sm:w-full {$page?.url?.pathname === '/ipos' ? 'hidden' : ''} {$screenWidth < 640 ? 'overflow-auto scrollbar' : ''} mb-2" > <div
<ul class="pr-4 sm:pr-0 w-screen font-medium flex flex-row items-center bg-[#09090B] overflow-x-scroll no-scrollbar space-x-3 rtl:space-x-reverse py-2"> class="sm:ml-4 w-screen sm:w-full {$page?.url?.pathname === '/ipos'
{#each ['2024','2023','2022','2021','2020','2019'] as item, index} ? 'hidden'
: ''} {$screenWidth < 640 ? 'overflow-auto scrollbar' : ''} mb-2"
>
<ul
class="px-3 pr-4 sm:pr-0 w-screen font-medium flex flex-row items-center bg-[#09090B] overflow-x-scroll no-scrollbar space-x-3 rtl:space-x-reverse py-2"
>
{#each ["2024", "2023", "2022", "2021", "2020", "2019"] as item}
<li class="cursor-pointer flex flex-col items-center"> <li class="cursor-pointer flex flex-col items-center">
<a href={`/ipos/${item}`} id="item1" on:click={() => (changeSection(item,'item1'))} class="px-3 text-lg font-medium text-gray-400 sm:hover:text-white {displaySection === item ? 'text-white ' : 'bg-[#09090B]'}" > <a
href={`/ipos/${item}`}
id="item1"
on:click={() => changeSection(item, "item1")}
class="px-3 text-lg rounded {displaySection === item
? 'text-black bg-[#75d377] font-semibold '
: 'bg-[#09090B] text-gray-300'}"
>
{item} {item}
</a> </a>
<div class="{displaySection === item ? 'bg-[#75D377]' : 'bg-[#09090B]'} mt-1 h-[3px] rounded-full w-[2.5rem]" />
</li> </li>
{/each} {/each}
</ul> </ul>
</div> </div>
<div class="border-b mt-4 border-slate-700" /> <div class="border-b mt-4 border-slate-700" />
<slot /> <slot />
</main> </main>
<aside class="hidden lg:block relative fixed w-1/4 ml-4"> <aside class="hidden lg:block relative fixed w-1/4 ml-4">
{#if data?.user?.tier !== "Pro" || data?.user?.freeTrial}
{#if data?.user?.tier !== 'Pro' || data?.user?.freeTrial} <div
<div on:click={() => goto('/pricing')} 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"> on:click={() => goto("/pricing")}
<div class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"> 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"
>
<div
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"> <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"> <h2 class="text-start text-xl font-semibold text-white ml-3">
Pro Subscription Pro Subscription
@ -184,7 +215,10 @@ $: {
</div> </div>
{/if} {/if}
<div on:click={() => goto('/analysts')} 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"> <div
on:click={() => goto("/analysts")}
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"
>
<div class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"> <div 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"> <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"> <h2 class="text-start text-xl font-semibold text-white ml-3">
@ -198,7 +232,10 @@ $: {
</div> </div>
</div> </div>
<div on:click={() => goto('/politicians')} 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"> <div
on:click={() => goto("/politicians")}
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"
>
<div class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"> <div 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"> <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"> <h2 class="text-start text-xl font-semibold text-white ml-3">
@ -211,25 +248,13 @@ $: {
</span> </span>
</div> </div>
</div> </div>
</aside> </aside>
</div> </div>
</div> </div>
</div> </div>
</section> </section>
<style lang="scss">
<style lang='scss'>
.scrollbar { .scrollbar {
display: grid; display: grid;
grid-gap: 17px; grid-gap: 17px;
@ -250,5 +275,11 @@ $: {
background: transparent; /* Make the thumb transparent */ background: transparent; /* Make the thumb transparent */
} }
.navmenu {
display: flex;
width: 100%;
flex-direction: row;
overflow-x: auto;
white-space: nowrap;
}
</style> </style>

230
src/routes/ipos/[slug]/+page.svelte
View File

@ -1,26 +1,23 @@
<script lang='ts'> <script lang="ts">
import { goto } from '$app/navigation'; import { goto } from "$app/navigation";
import {formatString, abbreviateNumber} from '$lib/utils'; import { formatString, abbreviateNumber } from "$lib/utils";
import { screenWidth } from '$lib/store'; import { screenWidth } from "$lib/store";
import InfiniteLoading from '$lib/components/InfiniteLoading.svelte'; import InfiniteLoading from "$lib/components/InfiniteLoading.svelte";
export let data; export let data;
let rawData;; let rawData;
let totalIPOs = 0; let totalIPOs = 0;
let ipoList; let ipoList;
let year; let year;
let isLoaded = false; let isLoaded = false;
let displayMonth = 'all' let displayMonth = "all";
async function infiniteHandler({ detail: { loaded, complete } })
{
async function infiniteHandler({ detail: { loaded, complete } }) {
if (ipoList?.length === rawData?.length) { if (ipoList?.length === rawData?.length) {
complete(); complete();
} } else {
else {
const nextIndex = ipoList?.length; const nextIndex = ipoList?.length;
const newHoldings = rawData?.slice(nextIndex, nextIndex + 50); const newHoldings = rawData?.slice(nextIndex, nextIndex + 50);
ipoList = [...ipoList, ...newHoldings]; ipoList = [...ipoList, ...newHoldings];
@ -28,7 +25,6 @@ async function infiniteHandler({ detail: { loaded, complete } })
} }
} }
const monthMap = { const monthMap = {
jan: "01", jan: "01",
feb: "02", feb: "02",
@ -41,83 +37,76 @@ const monthMap = {
sept: "09", sept: "09",
oct: "10", oct: "10",
nov: "11", nov: "11",
dec: "12" dec: "12",
}; };
async function changeTimePeriod(event) async function changeTimePeriod(event) {
{
isLoaded = false; isLoaded = false;
displayMonth = event.target.value; displayMonth = event.target.value;
const monthValue = monthMap[displayMonth]; const monthValue = monthMap[displayMonth];
if (displayMonth !== 'all') { if (displayMonth !== "all") {
rawData = data?.getIPOCalendar?.filter(item => item?.date?.includes(`-${monthValue}-`)); rawData = data?.getIPOCalendar?.filter((item) =>
} item?.date?.includes(`-${monthValue}-`),
else { );
} else {
rawData = data?.getIPOCalendar; rawData = data?.getIPOCalendar;
} }
ipoList = rawData?.slice(0, 50); ipoList = rawData?.slice(0, 50);
isLoaded = true; isLoaded = true;
} }
$: { $: {
if(typeof window !== 'undefined') { if (typeof window !== "undefined") {
const monthValue = monthMap[displayMonth]; const monthValue = monthMap[displayMonth];
if (displayMonth !== 'all') { if (displayMonth !== "all") {
rawData = data?.getIPOCalendar?.filter(item => item?.date?.includes(`-${monthValue}-`)); rawData = data?.getIPOCalendar?.filter((item) =>
} item?.date?.includes(`-${monthValue}-`),
else { );
} else {
rawData = data?.getIPOCalendar; rawData = data?.getIPOCalendar;
} }
totalIPOs = data?.getIPOCalendar?.length; totalIPOs = data?.getIPOCalendar?.length;
ipoList = rawData?.slice(0, 50); ipoList = rawData?.slice(0, 50);
year = data?.getYear; year = data?.getYear;
isLoaded = true isLoaded = true;
} }
} }
let charNumber = 40; $: charNumber = $screenWidth < 640 ? 20 : 40;
$: {
if ($screenWidth < 640)
{
charNumber = 20;
}
else {
charNumber = 40;
}
}
</script> </script>
<section class="w-full overflow-hidden m-auto"> <section class="w-full overflow-hidden m-auto">
{#if isLoaded} {#if isLoaded}
<div class="flex flex-col justify-center items-center"> <div class="flex flex-col justify-center items-center">
<div
class="mt-0 sm:mt-5 mb-2 w-full sm:flex sm:flex-row sm:items-center m-auto text-gray-100 font-medium border border-gray-800 sm:rounded-lg h-auto p-5"
<div class="mt-0 sm:mt-5 mb-2 w-full sm:flex sm:flex-row sm:items-center m-auto text-gray-100 font-medium border border-gray-800 sm:rounded-lg h-auto p-5"> >
<svg class="w-5 h-5 inline-block sm:mr-2 flex-shrink-0" 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> <svg
class="w-5 h-5 inline-block sm:mr-2 flex-shrink-0"
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
>
There have been {totalIPOs} IPOs on the US stock market in {year}. There have been {totalIPOs} IPOs on the US stock market in {year}.
</div> </div>
<div class="mr-auto flex flex-col jusitfy-start items-start ml-2 mb-5 mt-5"> <div
class="mr-auto flex flex-col jusitfy-start items-start ml-2 mb-5 mt-5"
>
<div class="text-white text-sm sm:text-[1rem] font-medium mr-2"> <div class="text-white text-sm sm:text-[1rem] font-medium mr-2">
Select Time period Select Time period
</div> </div>
<div class="relative mt-4"> <div class="relative mt-4">
<select class="select text-white select-bordered select-sm w-36 p-0 pl-5 overflow-y-auto bg-[#2A303C]" on:change={changeTimePeriod}> <select
class="select text-white select-bordered select-sm w-36 p-0 pl-5 overflow-y-auto bg-[#2A303C]"
on:change={changeTimePeriod}
>
<option disabled>Select time period</option> <option disabled>Select time period</option>
<option value="all" selected>All</option> <option value="all" selected>All</option>
<option value="jan">January</option> <option value="jan">January</option>
@ -136,95 +125,136 @@ $: {
</div> </div>
</div> </div>
{#if rawData?.length !== 0} {#if rawData?.length !== 0}
<div class="w-full overflow-x-scroll"> <div class="w-full overflow-x-scroll">
<table class="mt-5 table table-sm table-compact rounded-none sm:rounded-md w-full bg-[#09090B] border-bg-[#09090B] m-auto overflow-hidden"> <table
class="mt-5 table table-sm table-compact rounded-none sm:rounded-md w-full bg-[#09090B] border-bg-[#09090B] m-auto overflow-hidden"
>
<thead> <thead>
<tr class="border-b border-[#27272A]"> <tr class="border-b border-[#27272A]">
<th class="text-white font-medium text-[1rem] text-start">IPO Date</th> <th class="text-white font-semibold text-sm text-start"
<th class="text-white font-medium text-[1rem] text-start">Symbol</th> >IPO Date</th
<th class="text-white font-medium text-[1rem]">Name</th> >
<th class="text-white font-medium text-end text-[1rem]">IPO Price</th> <th class="text-white font-semibold text-sm text-start"
<th class="text-white font-medium text-end text-[1rem]">Current Price</th> >Symbol</th
<th class="text-white font-medium text-end text-[1rem]">Return Since</th> >
<th class="text-white font-semibold text-sm">Name</th>
<th class="text-white font-semibold text-end text-sm"
>IPO Price</th
>
<th class="text-white font-semibold text-end text-sm"
>Current Price</th
>
<th class="text-white font-semibold text-end text-sm"
>Return Since</th
>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
{#each ipoList as item,index} {#each ipoList as item}
<tr on:click={() => goto("/stocks/"+item?.symbol)} class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#09090B] shake-ticker cursor-pointer"> <tr
class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#09090B]"
>
<td class="text-white text-sm sm:text-[1rem] whitespace-nowrap text-start border-b-[#09090B] whitespace-nowrap"> <td
{new Date(item?.date)?.toLocaleString('en-US', { month: 'short', day: 'numeric', year: 'numeric', daySuffix: '2-digit' })} class="text-white text-sm sm:text-[1rem] whitespace-nowrap text-start border-b-[#09090B] whitespace-nowrap"
>
{new Date(item?.date)?.toLocaleString("en-US", {
month: "short",
day: "numeric",
year: "numeric",
daySuffix: "2-digit",
})}
</td> </td>
<td
<td class="text-blue-400 text-sm sm:text-[1rem] whitespace-nowrap text-start border-b-[#09090B] whitespace-nowrap"> class="text-sm sm:text-[1rem] whitespace-nowrap text-start border-b-[#09090B] whitespace-nowrap"
>
<a
href={"/stocks/" + item?.symbol}
class="sm:hover:text-white text-blue-400"
>
{item?.symbol} {item?.symbol}
</a>
</td> </td>
<td class="text-gray-200 border-b-[#09090B] whitespace-nowrap"> <td
<span class="text-white">{item?.name?.length > charNumber ? formatString(item?.name?.slice(0,charNumber)) + "..." : formatString(item?.name)}</span> class="text-gray-200 border-b-[#09090B] whitespace-nowrap text-sm sm:text-[1rem]"
>
<span class="text-white"
>{item?.name?.length > charNumber
? formatString(item?.name?.slice(0, charNumber)) + "..."
: formatString(item?.name)}</span
>
</td> </td>
<td
<td class="text-white text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B] text-end"> class="text-white text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B] text-end"
{item?.ipoPrice !== null ? '$'+item?.ipoPrice : '-'} >
{item?.ipoPrice !== null ? item?.ipoPrice : "-"}
</td> </td>
<td class="text-white border-b-[#09090B] text-end"> <td
{item?.currentPrice !== null ? '$'+item?.currentPrice : '-'} class="text-white border-b-[#09090B] text-sm sm:text-[1rem] text-end"
>
{item?.currentPrice !== null ? item?.currentPrice : "-"}
</td> </td>
<td
class="text-white border-b-[#09090B] text-end flex flex-row items-center justify-end"
<td class="text-white border-b-[#09090B] text-end flex flex-row items-center justify-end font-semibold"> >
{#if item?.return >= 0 && item?.return !== null} {#if item?.return >= 0 && item?.return !== null}
<span class="inline-block text-[#37C97D] text-sm sm:text-[1rem] whitespace-nowrap">{abbreviateNumber(item?.return)}%</span> <span
class="inline-block text-[#37C97D] text-sm sm:text-[1rem] whitespace-nowrap"
>+{abbreviateNumber(item?.return)}%</span
>
{:else if item?.return < 0 && item?.return !== null} {:else if item?.return < 0 && item?.return !== null}
<span class="inline-block text-[#FF2F1F] text-sm sm:text-[1rem] whitespace-nowrap">{abbreviateNumber(item?.return)}% </span> <span
class="inline-block text-[#FF2F1F] text-sm sm:text-[1rem] whitespace-nowrap"
>{abbreviateNumber(item?.return)}%
</span>
{:else} {:else}
<span class="inline-block text-white text-sm sm:text-[1rem] whitespace-nowrap"> <span
class="inline-block text-white text-sm sm:text-[1rem] whitespace-nowrap"
>
- -
</span> </span>
{/if} {/if}
</td> </td>
</tr> </tr>
{/each} {/each}
<InfiniteLoading on:infinite={infiniteHandler} /> <InfiniteLoading on:infinite={infiniteHandler} />
</tbody> </tbody>
</table> </table>
</div> </div>
{:else} {:else}
<div class="flex justify-center items-center m-auto mt-10 mb-6"> <div class="flex justify-center items-center m-auto mt-10 mb-6">
<div class="text-gray-100 text-center text-sm sm:text-[1rem] rounded-lg h-auto border border-slate-800 p-4"> <div
<svg class="w-5 h-5 inline-block sm:mr-2 flex-shrink-0" 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> class="text-gray-100 text-center text-sm sm:text-[1rem] rounded-lg h-auto border border-slate-800 p-4"
No IPOs found. Please adjust your search timeframe for the latest {year} IPOs. >
<svg
class="w-5 h-5 inline-block sm:mr-2 flex-shrink-0"
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
>
No IPOs found. Please adjust your search timeframe for the latest {year}
IPOs.
</div> </div>
</div> </div>
{/if} {/if}
</div> </div>
{: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 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"> <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> <span class="loading loading-spinner loading-md text-gray-400"></span>
</label> </label>
</div> </div>
</div> </div>
{/if} {/if}
</section> </section>