Still working on schedule..

src/static/app/src/components/configurationComponents/peerJobs.vue

@@ -0,0 +1,60 @@
+<script>
+export default {
+	name: "peerJobs"
+}
+</script>
+
+<template>
+	<div class="container po">
+		<div class="mb-5">
+			<RouterLink to="peers" is="div" class="d-flex align-items-center gap-4 text-decoration-none">
+				<h3 class="mb-0 text-body">
+					<i class="bi bi-chevron-left"></i>
+				</h3>
+				<h3 class="text-body mb-0">Peer Jobs</h3>
+			</RouterLink>
+		</div>
+		<div>
+			<div class="row">
+				<div class="col-sm-4">
+					<small class="text-muted">Peer</small>
+					<p class="mb-0"><samp>ymoO2hZDAxnMXOcMML7rnE5ot8lLoh9Uma8mzt1TwAc=</samp></p>
+				</div>
+				<div class="col-sm-8">
+					<div class="card shadow-sm rounded-3">
+						<div class="card-header bg-transparent text-muted border-0">
+							<small class="d-flex">
+								<strong class="me-auto">Job ID</strong>
+								7e9b5ef2-9417-4399-88a4-79ac378edfae
+							</small>
+						</div>
+						<div class="card-body pt-1">
+							<div class="d-flex gap-3 align-items-center">
+								<samp>
+									if
+								</samp>
+								<div class="dropdown">
+									<button class="btn btn-sm btn-outline-primary rounded-3" type="button" data-bs-toggle="dropdown" aria-expanded="false">
+										<samp>Total Received</samp>
+									</button>
+									<ul class="dropdown-menu rounded-3">
+										<li><a class="dropdown-item" href="#">Total Usage</a></li>
+										<li><a class="dropdown-item" href="#">Total Sent</a></li>
+										<li><a class="dropdown-item" href="#">Total Received</a></li>
+									</ul>
+								</div>
+								<samp>
+									is
+								</samp>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<style scoped>
+
+</style>

src/static/app/src/components/configurationComponents/peerSearch.vue

@@ -75,12 +75,18 @@ export default {
 				class="text-decoration-none btn btn-primary rounded-3 btn-sm">
 				<i class="bi bi-plus-lg me-2"></i>Peers
 			</RouterLink>
-			<button class="btn btn-sm btn-info rounded-3" @click="this.downloadAllPeer()">
+			
+			<RouterLink
+				to="jobs"
+				class="text-decoration-none btn btn-primary rounded-3 btn-sm">
+				<i class="bi bi-app-indicator me-2"></i>Jobs
+			</RouterLink>
+			<button class="btn btn-sm btn-primary rounded-3" @click="this.downloadAllPeer()">
 				<i class="bi bi-download me-2"></i> Download All
 			</button>
 			
 			<div class="dropdown ms-auto">
-				<button class="btn btn-outline-secondary btn-sm dropdown-toggle rounded-3" type="button" data-bs-toggle="dropdown" aria-expanded="false">
+				<button class="btn btn-secondary btn-sm dropdown-toggle rounded-3" type="button" data-bs-toggle="dropdown" aria-expanded="false">
 					<i class="bi bi-filter-circle me-2"></i>
 					Sort
 				</button>
@@ -95,7 +101,7 @@ export default {
 				</ul>
 			</div>
 			<div class="dropdown">
-				<button class="btn btn-outline-secondary btn-sm dropdown-toggle rounded-3" type="button" data-bs-toggle="dropdown" aria-expanded="false">
+				<button class="btn btn-secondary btn-sm dropdown-toggle rounded-3" type="button" data-bs-toggle="dropdown" aria-expanded="false">
 					<i class="bi bi-arrow-repeat me-2"></i>Refresh Interval
 				</button>
 				<ul class="dropdown-menu shadow mt-2 rounded-3">

src/static/app/src/router/index.js

@@ -17,6 +17,7 @@ import PeerCreate from "@/components/configurationComponents/peerCreate.vue";
 import RestrictedPeers from "@/components/configurationComponents/restrictedPeers.vue";
 import Ping from "@/views/ping.vue";
 import Traceroute from "@/views/traceroute.vue";
+import PeerJobs from "@/components/configurationComponents/peerJobs.vue";
 
 const checkAuth = async () => {
   let result = false
@@ -89,6 +90,11 @@ const router = createRouter({
               path: 'create',
               component: PeerCreate
             },
+            {
+              name: "Peer Jobs",
+              path: 'jobs',
+              component: PeerJobs
+            },
           ]
         },