add: added projectsHEADmain

1 files changed, 81 insertions, 0 deletions

diff --git a/ping/frontend/src/routes/dashboard/+page.svelte b/ping/frontend/src/routes/dashboard/+page.svelte
new file mode 100644
index 0000000..c38e281
--- /dev/null
+++ b/ping/frontend/src/routes/dashboard/+page.svelte
@@ -0,0 +1,81 @@
+<script lang="ts">
+	import NumberStatList from '$lib/components/NumberStatList.svelte';
+	import type { INumberStatList } from '$lib/components/NumberStatList.svelte';
+	import RiskAnalysis from '$lib/components/dashboard/RiskAnalysis.svelte';
+	import StockGraph from '$lib/components/dashboard/StockGraph.svelte';
+	import TrendingSymbols from '$lib/components/dashboard/TrendingSymbols.svelte';
+	import { onMount } from 'svelte';
+
+	const statsList: INumberStatList[] = [
+		{
+			name: 'Portefeuille',
+			color: 'aqua',
+			value: `${Math.random().toFixed(3) * 1000}€`,
+			icon: '/icons/wallet.svg'
+		},
+		{
+			name: 'Revenus',
+			color: '#1FCB4F',
+			value: `${Math.random().toFixed(3) * 1000}€`,
+			icon: '/icons/money-bills.svg'
+		},
+		{
+			name: 'Depenses',
+			color: 'orange',
+			value: `${Math.random().toFixed(3) * 1000}€`,
+			icon: '/icons/credit-card.svg'
+		},
+		{
+			name: 'Eco score',
+			color: '#1FCB4F',
+			value: `${Math.random().toFixed(3) * 1000}`,
+			icon: '/icons/leaf.svg'
+		}
+	];
+
+	onMount(() => {});
+</script>
+
+<section class="dashboard-home">
+	<NumberStatList {statsList} />
+	<div class="home-grid">
+		<div class="card overviewGraph">
+			<StockGraph />
+		</div>
+		<!-- <div class="card riskAnalysis">
+			<RiskAnalysis />
+		</div> -->
+		<!-- <div class="card activity">c</div> -->
+		<div class="card tendencies">
+			<TrendingSymbols />
+		</div>
+		<!-- <div class="card recentInvestments">e</div> -->
+	</div>
+</section>
+
+<style>
+	.home-grid {
+		display: grid;
+		grid-template-areas:
+			'overviewGraph overviewGraph overviewGraph'
+			'tendencies tendencies tendencies';
+		gap: 16px;
+		width: calc(100% - 32px);
+	}
+
+	.overviewGraph {
+		grid-area: overviewGraph;
+	}
+	/* .riskAnalysis {
+		grid-area: riskAnalysis;
+	}
+	.activity {
+		grid-area: activity;
+	} */
+	.tendencies {
+		grid-area: tendencies;
+	}
+	/* .recentInvestments {
+		grid-area: recentInvestments;
+	} */
+</style>