use link to include donation centers page + some staff pages styling

src/views/DonorAppoint.vue

@@ -1,12 +1,17 @@
 <script setup lang="ts">
+import { RouterLink } from 'vue-router';
+
+async function appoint() {
+	return 0
+}
 </script>
 
 <template>
 	<header>
 		<h1>Appoint for blood donation</h1>
 	</header>
 
-	<form action="" method="post">
+	<form @submit.prevent="appoint">
 		<label for="full_name">Full name</label>
 		<input type="text" name="full_name" id="full_name" required>
 		<label for="email">Email address</label>
@@ -15,7 +20,11 @@
 		<input type="tel" name="phone_nmbr" id="phone">
 		<label for="citizen">Citizen ID</label>
 		<input type="text" name="citizen_id" id="citizen">
-		<label for="location">Donation Center</label>
+		<label for="location">
+			<RouterLink to="/donor/centers" target="_blank" rel="noreferrer noopener">
+				Donation Center
+			</RouterLink>
+		</label>
 		<select name="gender" id="location">
 		</select>
 		<label for="gender">Gender</label>

src/views/StaffDashboard.vue

@@ -1,13 +1,20 @@
 <script setup lang="ts">
-const today: number = 30
+import { RouterLink } from 'vue-router';
 </script>
 
 <template>
-	<h1>Dashboard</h1>
-
-	<p>Incoming today:</p>
-	<p>{{ today }}</p>
-
-	<p><a href="">Lấy máu</a></p>
-	<p><a href="">Xét nghiệm</a></p>
+	<header>
+		<h1>Dashboard</h1>
+	</header>
+	<section>
+		<h2>Under Conception</h2>
+		<p><RouterLink to="/staff/login">Login</RouterLink></p>
+	</section>
 </template>
+
+<style scoped>
+section {
+	max-width: 800px;
+	margin: auto;
+}
+</style>

src/views/StaffLogin.vue

@@ -33,19 +33,23 @@ async function handleLogin() {
 
 		<input required type="email" placeholder="email" v-model="email">
 
-		<button type="submit" :value="loading ? 'Loading' : 'Send magic link'" :disabled="loading" />
+		<button type="submit" :value="loading ? 'Loading' : 'Send magic link'" :disabled="loading">
+			Send magic link
+		</button>
 	</form>
 </template>
 
 <style scoped>
-section {
+form {
+	max-width: 600px;
+	margin: auto;
 	padding-block: 2rem;
 	display: flex;
 	flex-direction: column;
 	gap: 1rem;
 }
 
-section * {
+form * {
 	margin: auto;
 	display: block;
 }