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-12-25 21:52:23 +01:00
parent e204155366
commit 025ed39dc5
5 changed files with 56 additions and 117 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/lib/utils.ts
View File

@ -655,15 +655,16 @@ export function abbreviateNumber(number, addDollarSign = false, color = false) {
let suffix = suffixes[index]; let suffix = suffixes[index];
if (color) { if (color) {
if (suffix === "K") { if (suffix === "K") {
suffix = '<span class=\"font-semibold text-blue-400\">K</span>'; suffix = '<span class="font-semibold text-blue-600">K</span>';
} else if (suffix === "M") { } else if (suffix === "M") {
suffix = '<span class=\"font-semibold text-[#FACD38]\">M</span>'; suffix = '<span class="font-semibold text-[#C8A32D]">M</span>';
} else if (suffix === "B") { } else if (suffix === "B") {
suffix = '<span class=\"font-semibold text-[#38FACD]\">B</span>'; suffix = '<span class="font-semibold text-[#2CB8A6]">B</span>';
}
} }
}
const formattedNumber = abbreviation + suffix; const formattedNumber = abbreviation + suffix;

4
src/routes/+page.svelte
View File

@ -727,7 +727,7 @@
</ul> </ul>
{:else} {:else}
<Infobox <Infobox
text="Currently, there are no upcoming earnings reports available." text="There are no major upcoming earnings to report today but you can check the earnings calendar for a complete list."
/> />
{/if} {/if}
</Card.Content> </Card.Content>
@ -793,7 +793,7 @@
</ul> </ul>
{:else} {:else}
<Infobox <Infobox
text="Currently, there are no recent earnings reports available." text="There are no major recent earnings to report today but you can check the earnings calendar for a complete list."
/> />
{/if} {/if}
</Card.Content> </Card.Content>

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

@ -9,7 +9,7 @@
} from "date-fns"; } from "date-fns";
import { screenWidth, numberOfUnreadNotification } from "$lib/store"; import { screenWidth, numberOfUnreadNotification } from "$lib/store";
import { abbreviateNumber } from "$lib/utils"; import { abbreviateNumber } from "$lib/utils";
import ArrowLogo from "lucide-svelte/icons/move-up-right"; import Infobox from "$lib/components/Infobox.svelte";
import TableHeader from "$lib/components/Table/TableHeader.svelte"; import TableHeader from "$lib/components/Table/TableHeader.svelte";
import HoverStockChart from "$lib/components/HoverStockChart.svelte"; import HoverStockChart from "$lib/components/HoverStockChart.svelte";
@ -348,7 +348,7 @@
<div <div
class="relative flex justify-center items-start overflow-hidden w-full" 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:pr-5">
<div class="mb-6 border-b-[2px]"> <div class="mb-6 border-b-[2px]">
<h1 class="mb-1 text-white text-2xl sm:text-3xl font-bold"> <h1 class="mb-1 text-white text-2xl sm:text-3xl font-bold">
Dividends Calendar Dividends Calendar
@ -478,16 +478,14 @@
{#each day as item} {#each day as item}
<!-- row --> <!-- row -->
<tr <tr
class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-odd border-b-[#09090B]" class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-odd border-b border-gray-800"
>
<td
class="border-b-[#09090B] text-sm sm:text-[1rem]"
> >
<td class=" text-sm sm:text-[1rem]">
<HoverStockChart symbol={item?.symbol} /> <HoverStockChart symbol={item?.symbol} />
</td> </td>
<td <td
class="text-white border-b-[#09090B] whitespace-nowrap text-sm sm:text-[1rem]" class="text-white whitespace-nowrap text-sm sm:text-[1rem]"
> >
{item?.name.length > 20 {item?.name.length > 20
? item?.name.slice(0, 20) + "..." ? item?.name.slice(0, 20) + "..."
@ -495,31 +493,35 @@
</td> </td>
<td <td
class="text-white border-b-[#09090B] text-sm text-end sm:text-[1rem]" class="text-white text-sm text-end sm:text-[1rem]"
> >
{item?.marketCap !== null {@html item?.marketCap !== null
? abbreviateNumber(item?.marketCap) ? abbreviateNumber(
: "-"} item?.marketCap,
false,
true,
)
: "n/a"}
</td> </td>
<td <td
class="text-white border-b-[#09090B] text-sm sm:text-[1rem] text-end" class="text-white text-sm sm:text-[1rem] text-end"
> >
{item?.revenue !== null {item?.revenue !== null
? abbreviateNumber(item?.revenue) ? abbreviateNumber(item?.revenue)
: "-"} : "n/a"}
</td> </td>
<td <td
class="text-white border-b-[#09090B] text-center text-sm sm:text-[1rem] text-end" class="text-white text-center text-sm sm:text-[1rem] text-end"
> >
{item?.adjDividend !== null {item?.adjDividend !== null
? item?.adjDividend?.toFixed(3) ? item?.adjDividend?.toFixed(3)
: "-"} : "n/a"}
</td> </td>
<td <td
class="text-white text-end border-b-[#09090B] text-sm sm:text-[1rem]" class="text-white text-end text-sm sm:text-[1rem]"
> >
{item?.paymentDate !== null {item?.paymentDate !== null
? new Date(item?.paymentDate)?.toLocaleString( ? new Date(item?.paymentDate)?.toLocaleString(
@ -531,7 +533,7 @@
daySuffix: "2-digit", daySuffix: "2-digit",
}, },
) )
: "-"} : "n/a"}
</td> </td>
</tr> </tr>
{/each} {/each}
@ -539,19 +541,8 @@
</table> </table>
</div> </div>
{:else} {:else}
<div <div class="mt-5">
class="text-white p-5 mt-5 w-fit m-auto rounded-md sm:flex sm:flex-row sm:items-center border border-gray-600 text-[1rem]" <Infobox text="No Dividends available for the day." />
>
<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="#fff"
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.
</div> </div>
{/if} {/if}
{/if} {/if}
@ -559,67 +550,6 @@
</div> </div>
</div> </div>
</main> </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 text-white border border-gray-600 rounded-md 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 text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer"
>
<a
href={"/earnings-calendar"}
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">
Earnings Calendar
</h2>
<ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
</div>
<span class="text-white p-3 ml-3 mr-3">
Get the latest Earnings of companies
</span>
</a>
</div>
<div
class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer"
>
<a
href={"/economic-calendar"}
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">
Economic Events
</h2>
<ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
</div>
<span class="text-white p-3 ml-3 mr-3">
Stay updated on upcoming Economic Events worldwide.
</span>
</a>
</div>
</aside>
</div> </div>
</div> </div>
</div> </div>

36
src/routes/earnings-calendar/+page.svelte
View File

@ -478,16 +478,16 @@
{#each day as item, index} {#each day as item, index}
<!-- row --> <!-- row -->
<tr <tr
class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-odd border-b-[#09090B]" class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-odd border-b border-gray-800"
> >
<td <td
class="text-blue-400 border-b-[#09090B] text-start text-sm sm:text-[1rem]" class="text-blue-400 text-start text-sm sm:text-[1rem]"
> >
<HoverStockChart symbol={item?.symbol} /> <HoverStockChart symbol={item?.symbol} />
</td> </td>
<td <td
class="text-white whitespace-nowrap text-sm sm:text-[1rem] border-b-[#09090B]" class="text-white whitespace-nowrap text-sm sm:text-[1rem]"
> >
{item?.name.length > 20 {item?.name.length > 20
? item?.name?.slice(0, 20) + "..." ? item?.name?.slice(0, 20) + "..."
@ -495,23 +495,31 @@
</td> </td>
<td <td
class="text-white border-b-[#09090B] text-end text-sm sm:text-[1rem]" class="text-white text-end text-sm sm:text-[1rem]"
> >
{item?.marketCap !== null {@html item?.marketCap !== null
? abbreviateNumber(item?.marketCap) ? abbreviateNumber(
: "-"} item?.marketCap,
false,
true,
)
: "n/a"}
</td> </td>
<td <td
class="text-white text-end border-b-[#09090B] text-sm sm:text-[1rem]" class="text-white text-end text-sm sm:text-[1rem]"
> >
<div <div
class="flex flex-row items-center justify-end" class="flex flex-row items-center justify-end"
> >
<span> <span>
{item?.revenueEst !== null {@html item?.revenueEst !== null
? abbreviateNumber(item?.revenueEst) ? abbreviateNumber(
: "-"} item?.revenueEst,
false,
true,
)
: "n/a"}
</span> </span>
{#if item?.revenueEst !== null && item?.revenueEst !== null} {#if item?.revenueEst !== null && item?.revenueEst !== null}
{#if item?.revenueEst / item?.revenuePrior - 1 >= 0} {#if item?.revenueEst / item?.revenuePrior - 1 >= 0}
@ -538,7 +546,7 @@
</td> </td>
<td <td
class="text-white text-end border-b-[#09090B] text-sm sm:text-[1rem]" class="text-white text-end text-sm sm:text-[1rem]"
> >
<div <div
class="flex flex-row items-center justify-end" class="flex flex-row items-center justify-end"
@ -546,7 +554,7 @@
<span> <span>
{item?.epsEst !== null {item?.epsEst !== null
? item?.epsEst?.toFixed(2) ? item?.epsEst?.toFixed(2)
: "-"} : "n/a"}
</span> </span>
{#if item?.epsEst !== null && item?.epsPrior !== null && item?.epsPrior !== 0} {#if item?.epsEst !== null && item?.epsPrior !== null && item?.epsPrior !== 0}
{#if item?.epsEst / item?.epsPrior - 1 >= 0} {#if item?.epsEst / item?.epsPrior - 1 >= 0}
@ -569,7 +577,7 @@
</td> </td>
<td <td
class="text-white border-b-[#09090B] text-end text-sm sm:text-[1rem] whitespace-nowrap" class="text-white text-end text-sm sm:text-[1rem] whitespace-nowrap"
> >
{#if item?.release === "amc"} {#if item?.release === "amc"}
<svg <svg

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

@ -276,7 +276,7 @@
{item?.valueGrowth?.toFixed(2)}% {item?.valueGrowth?.toFixed(2)}%
</span> </span>
{:else} {:else}
- n/a
{/if} {/if}
</td> </td>
</tr> </tr>