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-22 22:51:04 +01:00
parent 8d6a0fbe41
commit e9a9b8fc11
8 changed files with 72 additions and 107 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
src/routes/analysts/top-stocks/+page.svelte
View File

@ -2,7 +2,7 @@
import { numberOfUnreadNotification } from "$lib/store";
import Table from "$lib/components/Table/Table.svelte";
import UpgradeToPro from "$lib/components/UpgradeToPro.svelte";
import ArrowLogo from "lucide-svelte/icons/move-up-right";
import Infobox from "$lib/components/Infobox.svelte";
export let data;
@ -76,31 +76,13 @@
>
<main class="w-full lg:pr-5">
<div class="mb-6 border-b-[2px]">
<h1 class="mb-1 text-white text-2xl sm:text-3xl font-bold">
<h1 class="mb-3 text-white text-2xl sm:text-3xl font-bold">
Top Strong Buy Stocks
</h1>
<p class="mb-3 px-1 text-base font-semibold text-muted sm:px-0">
The "Strong Buy" stocks according to the best performing Wall
Street analysts.
</p>
</div>
<div
class="w-full sm:flex sm:flex-row sm:items-center m-auto text-gray-100 bg-[#09090B] border border-gray-800 sm:rounded-md 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="#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
>
Strong Buy stocks by top-rated analysts with a star rating of 4 or above,
known for their exceptional accuracy and returns. Stocks are ranked based
on the volume of analyst ratings.
</div>
<Infobox text={"Strong Buy stocks by top-rated analysts with a star rating of 4 or above, known for their exceptional accuracy and returns. Stocks are ranked based on the volume of analyst ratings."}/>
<div class="w-full m-auto mt-10">
<Table

24
src/routes/cramer-tracker/+page.svelte
View File

@ -5,7 +5,7 @@
import TableHeader from "$lib/components/Table/TableHeader.svelte";
import RatingsChart from "$lib/components/RatingsChart.svelte";
import UpgradeToPro from "$lib/components/UpgradeToPro.svelte";
import Infobox from "$lib/components/Infobox.svelte";
export let data;
let rawData = processTickerData(data?.getCramerTracker);
@ -224,22 +224,9 @@
</p>
</div>
<div
class=" w-full text-start sm:flex sm:flex-row sm:items-center m-auto text-gray-100 border border-gray-800 sm:rounded-md 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="#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>
We update our data in realtime to provide you with the latest stock picks
of Jim Cramer.
</div>
<Infobox text={"We update our data in realtime to provide you with the latest stock picks of Jim Cramer."} />
<div class="w-full m-auto mt-10">
<div
@ -385,8 +372,9 @@
{/each}
</tbody>
</table>
<UpgradeToPro {data} />
</div>
<UpgradeToPro {data} />
</div>
</main>
</div>

2
src/routes/etf/etf-providers/+layout.svelte
View File

@ -59,7 +59,7 @@
</svelte:head>
<section
class="w-full max-w-screen-2xl overflow-hidden min-h-screen pt-5 px-4 lg:px-3"
class="w-full max-w-screen-2xl overflow-hidden min-h-screen pb-20 pt-5 px-4 lg:px-3"
>
<div class="text-sm sm:text-[1rem] breadcrumbs">
<ul>

6
src/routes/etf/etf-providers/+page.server.ts
View File

@ -1,6 +1,6 @@
export const load = async ({ locals }) => {
const getAllETFProviders = async () => {
const { apiKey, apiURL } = locals;
const { apiKey, apiURL, user } = locals;
const response = await fetch(apiURL + "/all-etf-providers", {
method: "GET",
headers: {
@ -9,8 +9,8 @@ export const load = async ({ locals }) => {
},
});
const output = await response.json();
let output = await response?.json();
output = user?.tier !== "Pro" ? output?.slice(0, 6) : output;
return output;
};

35
src/routes/etf/etf-providers/+page.svelte
View File

@ -1,8 +1,10 @@
<script lang="ts">
import { abbreviateNumber, formatETFName } from "$lib/utils";
import { numberOfUnreadNotification } from "$lib/store";
import TableHeader from "$lib/components/Table/TableHeader.svelte";
import UpgradeToPro from "$lib/components/UpgradeToPro.svelte";
import TableHeader from "$lib/components/Table/TableHeader.svelte";
import Infobox from "$lib/components/Infobox.svelte";
export let data;
let etfProviderList = data?.getAllETFProviders;
@ -118,27 +120,14 @@
<!-- Add more Twitter meta tags as needed -->
</svelte:head>
<section class="w-full overflow-hidden m-auto">
<div
class="w-full sm:flex sm:flex-row sm:items-center m-auto text-gray-100 border border-gray-800 sm:rounded-md h-auto p-5 mb-4"
>
<svg
class="w-5 h-5 inline-block flex-shrink-0 mr-0.5 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
>
<section class="w-full overflow-hidden m-auto">
Every Exchange-Traded Fund (ETF) is managed by a specific company. Below is
a list of companies offering actively traded ETFs on the U.S. stock market.
</div>
<Infobox text={"Every Exchange-Traded Fund (ETF) is managed by a specific company. Below is a list of companies offering actively traded ETFs on the U.S. stock market."} />
<!-- Page wrapper -->
<div class="flex justify-center w-full m-auto h-full overflow-hidden">
<!-- Content area -->
<div class="w-full">
<div class="w-full overflow-x-scroll">
<table
class="table rounded-none sm:rounded-md w-full border-bg-[#09090B] m-auto mt-4"
@ -147,10 +136,15 @@
<TableHeader {columns} {sortOrders} {sortData} />
</thead>
<tbody>
{#each etfProviderList as item, index}
{#each etfProviderList as item,index}
<!-- row -->
<tr
class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-secondary border-b-[#09090B]"
class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-secondary border-b-[#09090B] {index +
1 ===
etfProviderList?.length &&
data?.user?.tier !== 'Pro'
? 'opacity-[0.1]'
: ''}"
>
<td
class="text-sm sm:text-[1rem] whitespace-nowrap font-medium border-b-[#09090B]"
@ -191,5 +185,8 @@
</tbody>
</table>
</div>
<UpgradeToPro {data} />
</div>
</div>
</section>

6
src/routes/etf/etf-providers/[slug]/+page.server.ts
View File

@ -4,7 +4,7 @@ export const load = async ({ params, locals }) => {
};
const getETFProviderData = async () => {
const { apiKey, apiURL } = locals;
const { apiKey, apiURL, user } = locals;
const postData = { etfProvider: params.slug };
const response = await fetch(apiURL + "/etf-provider", {
@ -16,8 +16,8 @@ export const load = async ({ params, locals }) => {
body: JSON.stringify(postData),
});
const output = await response.json();
let output = await response?.json();
output = user?.tier !== "Pro" ? output?.slice(0, 6) : output;
return output;
};

60
src/routes/etf/etf-providers/[slug]/+page.svelte
View File

@ -2,8 +2,10 @@
import { abbreviateNumber, formatETFName } from "$lib/utils";
import { screenWidth, numberOfUnreadNotification } from "$lib/store";
import { onMount } from "svelte";
import Infobox from "$lib/components/Infobox.svelte";
import TableHeader from "$lib/components/Table/TableHeader.svelte";
import HoverStockChart from "$lib/components/HoverStockChart.svelte";
import UpgradeToPro from "$lib/components/UpgradeToPro.svelte";
export let data;
let rawData = data?.getETFProviderData;
@ -116,6 +118,21 @@
// Sort using the generic comparison function
etfProviderData = [...originalData].sort(compareValues)?.slice(0, 50);
};
function generateStatementInfoHTML() {
return `
${etfProviderName} has ${rawData?.length} ETFs listed with a total of ${abbreviateNumber(
totalAssets
)}
in assets under management. The funds have an average expense ratio of ${avgExpenseRatio?.toFixed(
2,
)}%.
`;
}
let htmlOutput = generateStatementInfoHTML();
</script>
<svelte:head>
@ -149,27 +166,9 @@
<section class="w-full overflow-hidden m-auto">
{#if rawData?.length !== 0}
<div
class="w-full sm:flex sm:flex-row sm:items-center m-auto text-gray-100 border border-gray-600 sm:rounded-md h-auto p-5 mb-4"
>
<svg
class="w-5 h-5 inline-block flex-shrink-0 mr-0.5 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
>
{etfProviderName} has {rawData?.length} ETFs listed with a total of {abbreviateNumber(
totalAssets,
true,
)}
in assets under management. The funds have an average expense ratio of {avgExpenseRatio?.toFixed(
2,
)}%.
</div>
<div class="mb-5">
<Infobox text={htmlOutput} />
</div>
{/if}
<div
@ -177,7 +176,7 @@
>
<div class="px-4 py-3 sm:px-2 sm:py-5 md:px-3 lg:p-6">
<div class="flex items-center justify-between sm:block">
<div class="text-sm font-normal text-white">Listed Funds</div>
<div class="text-[1rem] font-normal text-white">Listed Funds</div>
<div
class="mt-1 break-words font-semibold leading-8 text-white tiny:text-lg xs:text-xl sm:text-2xl"
>
@ -187,7 +186,7 @@
</div>
<div class="px-4 py-3 sm:px-2 sm:py-5 md:px-3 lg:p-6">
<div class="flex items-center justify-between sm:block">
<div class="text-sm font-normal text-white">Total Assets</div>
<div class="text-[1rem] font-normal text-white">Total Assets</div>
<div
class="mt-1 break-words font-semibold leading-8 text-white tiny:text-lg xs:text-xl sm:text-2xl"
>
@ -197,7 +196,7 @@
</div>
<div class="px-4 py-3 sm:px-2 sm:py-5 md:px-3 lg:p-6">
<div class="flex items-center justify-between sm:block">
<div class="text-sm font-normal text-white">Average Cost</div>
<div class="text-[1rem] font-normal text-white">Average Cost</div>
<div
class="mt-1 break-words font-semibold leading-8 text-white tiny:text-lg xs:text-xl sm:text-2xl"
>
@ -211,6 +210,7 @@
<!-- Page wrapper -->
<div class="flex justify-center w-full m-auto h-full overflow-hidden">
<!-- Content area -->
<div class="w-full">
<div class="w-full overflow-x-auto mt-5">
<table
class="table table-sm table-compact rounded-none sm:rounded-md w-full bg-[#09090B] border-bg-[#09090B]"
@ -219,10 +219,15 @@
<TableHeader {columns} {sortOrders} {sortData} />
</thead>
<tbody>
{#each etfProviderData as item}
{#each etfProviderData as item, index}
<!-- row -->
<tr
class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-secondary border-b-[#09090B]"
class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-secondary border-b-[#09090B] {index +
1 ===
etfProviderData?.length &&
data?.user?.tier !== 'Pro'
? 'opacity-[0.1]'
: ''}"
>
<td
class="font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]"
@ -286,6 +291,9 @@
</tbody>
</table>
</div>
<UpgradeToPro {data} />
</div>
</div>
{:else}
<div

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

@ -1,7 +1,7 @@
<script lang="ts">
import { goto } from "$app/navigation";
import { formatString, abbreviateNumber } from "$lib/utils";
import { screenWidth } from "$lib/store";
import Infobox from "$lib/components/Infobox.svelte";
import InfiniteLoading from "$lib/components/InfiniteLoading.svelte";
@ -80,21 +80,11 @@
<section class="w-full overflow-hidden m-auto">
{#if isLoaded}
<div class="mt-3 mb-3">
<Infobox text={`There have been ${totalIPOs} IPOs on the US stock market in ${year}.`} />
</div>
<div class="flex flex-col justify-center items-center">
<div
class="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 rounded-md 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="#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
>
There have been {totalIPOs} IPOs on the US stock market in {year}.
</div>
<div class="mr-auto flex flex-col jusitfy-start items-start mb-5 mt-5">
<div class="text-white text-sm sm:text-[1rem] font-medium mr-2">