Style summary section of panel

resources/images/wallet2.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-wallet2" viewBox="0 0 16 16">
+  <path d="M12.136.326A1.5 1.5 0 0 1 14 1.78V3h.5A1.5 1.5 0 0 1 16 4.5v9a1.5 1.5 0 0 1-1.5 1.5h-13A1.5 1.5 0 0 1 0 13.5v-9a1.5 1.5 0 0 1 1.432-1.499L12.136.326zM5.562 3H13V1.78a.5.5 0 0 0-.621-.484L5.562 3zM1.5 4a.5.5 0 0 0-.5.5v9a.5.5 0 0 0 .5.5h13a.5.5 0 0 0 .5-.5v-9a.5.5 0 0 0-.5-.5h-13z"/>
+</svg>

resources/js/main.js

@@ -46,8 +46,8 @@ function login(event) {
 				"Invalid credentials."
 		}
 	})
+	event.preventDefault()
 	event.stopPropogation()
-	return false
 }
 
 //Attempt to resend the verification link
@@ -67,6 +67,7 @@ function resendLink(event) {
 		}
 	})
 	event.stopPropogation();
+	event.preventDefault();
 }
 
 function toggleNav() {
@@ -109,8 +110,8 @@ if (window.location.pathname == '/') {
 } else if (window.location.pathname == '/verify-email') {
 	document.getElementById('resend_verification').addEventListener("click", resendLink)
 } else if (window.location.pathname == '/panel') {
-	const app = createApp(Panel).mount('#panel')
 	if (!token) {getToken(app)}
-	window.onhashchange = ()=>{app.active = location.hash }
+	const app = createApp(Panel).mount('#panel')
+	window.onhashchange = ()=>{app.active = location.hash}
 }
 

resources/js/panel/panel.vue

@@ -1,20 +1,35 @@
 <template>
 <sidebar :active="active"></sidebar>
 <transition name="fade" mode="out-in">
-<div v-if="active === ''" id="main">important info here</div>
-<div v-else-if="active === '#orders'" id="main">order info here</div>
+<div v-if="active === ''" id="main">
+	<section class="welcome-pane"><h3>Welcome, user!</h3></section>
+	<section class="credits-pane"><img src="../../images/wallet2.svg" alt="wallet" class="icon"/><p>Credits: ${{credits}}</p></section>
+	<section class="alerts-pane"><h4>News and Announcements</h4>
+	<p>We've just launched. Thanks for joining us.</p>
+	</section>
+	<section class="recent-pane"><h4>Recent Activity</h4>Recent activity showing last 5 completed orders </section>
+</div>
+<div v-else-if="active === '#orders'" id="main">
+	<div class="actions"><a href="#orders/new">New</a></div>
+	<section class="pending-pane">
+	<h4>Pending Orders</h4>
+	</section>
+</div>
 </transition>
 </template>
 
 <script>
 import Sidebar from './sidebar.vue'
 
+/* let token = RegExp('XSRF-TOKEN=([^;]+)').exec(document.cookie) */
+/* console.log(token) */
+
 export default {
 	components: {
 		Sidebar,
 	},
 	data() {
-	return {active: window.location.hash, }
+	return {active: window.location.hash, credits: 0, }
 	},
 }
 </script>

resources/scss/_vars.scss

@@ -18,7 +18,11 @@ $theme-colors: (
 	"faded-text2": #6c757d,
 	"dark-green": #3bb78f,
 	"light-green": #0bab64,
-	"green": #63b521
+	"green": #63b521,
+	"alt-blue-light": #e2f5ff,
+	"alt-blue-medium": #2b96cc,
+	"alt-red-light": #f3beb8,
+	"alt-red-medium": #f09898,
 );
 
 @function getColor($col) {

resources/scss/main.scss

@@ -720,6 +720,47 @@ main.panel {
 	// opacity: 1;
 	@include vars.hovering3;
 	transition: opacity 0.5s ease;
+	vertical-align: middle;
+	// text-align: center;
+
+	section {
+		padding: 5px;
+		border-radius: 4px;
+		min-height: 3em;
+		margin-bottom: 1em;
+	}
+
+	h4 {
+		margin: 4px;
+		color: vars.getColor("dark-grey");
+	}
+
+	p {
+		margin: 0;
+	}
+
+	.icon {
+		width: 25px;
+		margin: 10px;
+	}
+
+	.welcome-pane {
+		text-align: center;
+	}
+
+	.credits-pane {
+		border: 3px solid vars.getColor("alt-blue-medium");
+		background: vars.getColor("alt-blue-light");
+		> * {
+		display: inline;
+		vertical-align: middle;
+		}
+	}
+
+	.alerts-pane {
+		border: 3px solid vars.getColor("grey");
+		padding: 1em;
+	}
 }
 
 // .fade-enter-active, .fade-leave-active {

routes/web.php

@@ -54,3 +54,7 @@ Route::post('/reset-passowrd', [UserController::class,
 
 Route::post('/login', [UserController::class,
 	'login'])->middleware('guest');
+
+Route::get('/panel/user', function (Request $request) {
+	return $request->user();
+});