Implemented shutdown through UI and implemented router check

frontend/views/dashboard/ts/menuBar.ts

@@ -44,6 +44,20 @@ export class MenuBar {
 							this.restartInstallation();
 						},
 					},
+					{
+						type: 'icon',
+						text: 'Shutdown',
+						materialIcon: 'power_settings_new',
+						uniqueIdentifier: 'shutdown_installation',
+
+						click: async () => {
+							const mobileMenu: HTMLDivElement =
+								document.querySelector('.mux_mobilemenu');
+							mobileMenu?.click();
+
+							this.shutdownInstallation();
+						},
+					},
 				],
 				right: [
 					{
@@ -70,6 +84,20 @@ export class MenuBar {
 						this.restartInstallation();
 					},
 				},
+				{
+					type: 'normal',
+					text: 'Shutdown',
+					materialIcon: 'power_settings_new',
+					uniqueIdentifier: 'shutdown_installation',
+
+					click: async () => {
+						const mobileMenu: HTMLDivElement =
+							document.querySelector('.mux_mobilemenu');
+						mobileMenu?.click();
+
+						this.shutdownInstallation();
+					},
+				},
 				{
 					type: 'normal',
 					text: 'Dashboard',
@@ -187,6 +215,35 @@ export class MenuBar {
 		);
 	}
 
+	async shutdownInstallation() {
+		const confirmed = await MorphFeature.Confirm({
+			title: 'Shutdown Installation',
+			message: 'Are you sure you want to shutdown the installation?',
+		});
+		if (!confirmed) return;
+
+		MorphFeature.Loader({
+			active: true,
+			message: 'Shutting down installation...',
+		});
+
+		const shutdownContainer: HTMLDivElement =
+			document.querySelector('.ntsh_shutdown');
+		this._Main.socket.emit(
+			'shutdownInstallation',
+			(response: { succeed: boolean; message?: string }) => {
+				MorphFeature.Loader({ active: false });
+				if (!response.succeed)
+					return MorphFeature.Alert({
+						title: 'Error',
+						message: response.message,
+					});
+
+				shutdownContainer.style.display = 'flex';
+			}
+		);
+	}
+
 	async toggleServiceMode(
 		mode?: boolean,
 		skipPin?: boolean