Peer data reset function is don e

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

@@ -37,6 +37,21 @@ export default {
 				}
 				this.$emit("refresh")
 			})
+		},
+		resetPeerData(type){
+			this.saving = true
+			fetchPost(`/api/resetPeerData/${this.$route.params.id}`, {
+				id: this.data.id,
+				type: type
+			}, (res) => {
+				this.saving = false;
+				if (res.status){
+					this.dashboardConfigurationStore.newMessage("Server", "Peer data usage reset successfully.", "success")
+				}else{
+					this.dashboardConfigurationStore.newMessage("Server", res.message, "danger")
+				}
+				this.$emit("refresh")
+			})
 		}
 	},
 	beforeMount() {
@@ -57,15 +72,15 @@ export default {
 		<div class="container d-flex h-100 w-100">
 			<div class="m-auto modal-dialog-centered dashboardModal">
 				<div class="card rounded-3 shadow flex-grow-1">
-					<div class="card-header bg-transparent d-flex align-items-center gap-2 border-0 p-4">
+					<div class="card-header bg-transparent d-flex align-items-center gap-2 border-0 p-4 pb-2">
 						<h4 class="mb-0">Peer Settings</h4>
 						<button type="button" class="btn-close ms-auto" @click="this.$emit('close')"></button>
 					</div>
 					<div class="card-body px-4 pb-4" v-if="this.data">
 						<div class="d-flex flex-column gap-2 mb-4">
-							<div>
+							<div class="d-flex align-items-center">
-								<small class="text-muted">Public Key</small><br>
+								<small class="text-muted">Public Key</small>
-								<small><samp>{{this.data.id}}</samp></small>
+								<small class="ms-auto"><samp>{{this.data.id}}</samp></small>
 							</div>
 							<div>
 								<label for="peer_name_textbox" class="form-label">
@@ -121,8 +136,7 @@ export default {
 								       v-model="this.data.DNS"
 								       id="peer_DNS_textbox">
 							</div>
-							<hr>
+							<div class="accordion mt-3" id="peerSettingsAccordion">
-							<div class="accordion mt-2" id="peerSettingsAccordion">
 								<div class="accordion-item">
 									<h2 class="accordion-header">
 										<button class="accordion-button rounded-3 collapsed" type="button"
@@ -162,12 +176,37 @@ export default {
 									</div>
 								</div>
 							</div>
+							<hr>
+							<div class="d-flex gap-2 align-items-center">
+								<strong>Reset Data Usage</strong>
+								<div class="d-flex gap-2 ms-auto">
+									<button class="btn bg-primary-subtle text-primary-emphasis rounded-3 flex-grow-1 shadow-sm"
+										@click="this.resetPeerData('total')"
+									>
+										<i class="bi bi-arrow-down-up me-2"></i>
+										Total
+									</button>
+									<button class="btn bg-primary-subtle text-primary-emphasis rounded-3 flex-grow-1 shadow-sm"
+									        @click="this.resetPeerData('receive')"
+									>
+										<i class="bi bi-arrow-down me-2"></i>
+										Received
+									</button>
+									<button class="btn bg-primary-subtle text-primary-emphasis rounded-3  flex-grow-1 shadow-sm"
+									        @click="this.resetPeerData('sent')"
+									>
+										<i class="bi bi-arrow-up me-2"></i>
+										Sent
+									</button>
+								</div>
+								
+							</div>
 						</div>
 						<div class="d-flex align-items-center gap-2">
 							<button class="btn btn-secondary rounded-3 shadow"
 							        @click="this.reset()"
 							        :disabled="!this.dataChanged || this.saving">
-								Reset <i class="bi bi-arrow-clockwise ms-2"></i>
+								Revert <i class="bi bi-arrow-clockwise ms-2"></i>
 							</button>
 
 							<button class="ms-auto btn btn-dark btn-brand rounded-3 px-3 py-2 shadow"

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

@@ -93,8 +93,23 @@ export default {
 						set for this peer
 					</small>
 				</li>
-				<li><hr class="dropdown-divider"></li>
+				
 			</template>
+			<template v-else>
+				<li class="d-flex" style="padding-left: var(--bs-dropdown-item-padding-x); padding-right: var(--bs-dropdown-item-padding-x);">
+					<a class="dropdown-item text-center px-0 rounded-3" role="button" @click="this.downloadPeer()">
+						<i class="me-auto bi bi-download"></i>
+					</a>
+					<a class="dropdown-item text-center px-0 rounded-3" role="button"
+					   @click="this.downloadQRCode()">
+						<i class="me-auto bi bi-qr-code"></i>
+					</a>
+					<a class="dropdown-item text-center px-0 rounded-3" role="button" @click="this.$emit('share')">
+						<i class="me-auto bi bi-share"></i>
+					</a>
+				</li>
+			</template>
+			<li><hr class="dropdown-divider"></li>
 			<li>
 				<a class="dropdown-item d-flex" role="button"
 				   @click="this.$emit('setting')"
@@ -109,25 +124,7 @@ export default {
 					<i class="me-auto bi bi-app-indicator"></i> Schedule Jobs
 				</a>
 			</li>
-			<template v-if="this.Peer.private_key">
+			
-				<li>
-					<a class="dropdown-item d-flex" role="button" @click="this.downloadPeer()">
-						<i class="me-auto bi bi-download"></i> Download
-					</a>
-				</li>
-				<li>
-					<a class="dropdown-item d-flex" role="button"
-					   @click="this.downloadQRCode()"
-					>
-						<i class="me-auto bi bi-qr-code"></i> QR Code
-					</a>
-				</li>
-				<li>
-					<a class="dropdown-item d-flex" role="button" @click="this.$emit('share')">
-						<i class="me-auto bi bi-share"></i> Share
-					</a>
-				</li>
-			</template>
 
 			<li><hr class="dropdown-divider"></li>
 			<li>

src/static/css/dashboard.css

@@ -1162,4 +1162,6 @@ pre.index-alert {
     opacity: 0;
 }
 
-
+.messageCentre{
+    z-index: 9999;
+}