From d230a19913fb614112f4ab6c8ca29b49709402ee Mon Sep 17 00:00:00 2001
From: Castro Alhdo <castroalhdo@gmail.com>
Date: Wed, 6 Nov 2024 20:59:46 +0100
Subject: [PATCH] Adding modal filter design

---
 assets/css/rport.css                          |  16 ++
 components/Modale.vue                         | 102 --------
 components/NewDevicesSidebar.vue              |   9 +-
 .../custom/loading-spinner/LoadingSpinner.vue |  38 +++
 components/custom/loading-spinner/index.ts    |   1 +
 .../custom/modal-filter/ModalFilter.vue       | 217 ++++++++++++++++++
 components/custom/modal-filter/index.ts       |   1 +
 components/device/TagsLabelDialog.vue         | 188 ++++++++++++++-
 components/ui/base-modal/BaseModal.vue        |  28 +++
 components/ui/base-modal/index.ts             |   1 +
 middleware/auth.global.ts                     |   2 +-
 pages/dashboard/[id].vue                      |   2 -
 repository/modules/clients.ts                 |  12 +
 13 files changed, 503 insertions(+), 114 deletions(-)
 delete mode 100644 components/Modale.vue
 create mode 100644 components/custom/loading-spinner/LoadingSpinner.vue
 create mode 100644 components/custom/loading-spinner/index.ts
 create mode 100644 components/custom/modal-filter/ModalFilter.vue
 create mode 100644 components/custom/modal-filter/index.ts
 create mode 100644 components/ui/base-modal/BaseModal.vue
 create mode 100644 components/ui/base-modal/index.ts

diff --git a/assets/css/rport.css b/assets/css/rport.css
index 159de73..a809d85 100644
--- a/assets/css/rport.css
+++ b/assets/css/rport.css
@@ -169,6 +169,10 @@ input::placeholder,textarea::placeholder {
     --tw-text-opacity: 1;
     color: #374151;
 }
+.text-theme-inverted-light,.text-theme-inverted-lighter {
+    --tw-text-opacity: 1;
+    color: #4b5563;
+}
 .text-theme-label {
     --tw-text-opacity: 1;
     color: #6b7280;
@@ -178,6 +182,18 @@ input::placeholder,textarea::placeholder {
     --tw-bg-opacity: 1;
     background-color: #fff;
 }
+.bg-theme-light {
+    --tw-bg-opacity: 1;
+    background-color: #f3f4f6;
+}
+.bg-theme-lighter {
+    --tw-bg-opacity: 1;
+    background-color: #f9fafb;
+}
+
+.bg-theme-backdrop\/75 {
+    background-color: #6b7280bf;
+}
 .bg-warning {
     background-color: #ef6c00;
     background-color: rgb(239 108 0/var(--tw-bg-opacity))
diff --git a/components/Modale.vue b/components/Modale.vue
deleted file mode 100644
index 5786b84..0000000
--- a/components/Modale.vue
+++ /dev/null
@@ -1,102 +0,0 @@
-<template>
-	<div
-		class="modal modal-blur "
-		:class="{ 'is-active': isActive }"
-		role="dialog"
-	>
-		<div
-			class="modal-dialog modal-lg modal-dialog-centered mh-100"
-			role="document"
-		>
-			<div class="modal-content ">
-				<div class="modal-header">
-					<h3 class="modal-title">
-						{{ title }}
-					</h3>
-					<button
-						type="button"
-						class="btn-close"
-						data-bs-dismiss="modal"
-						aria-label="Close"
-						@click="closeModal"
-					>
-						X
-					</button>
-				</div>
-				<div class="modal-body modal-height overflow-y-auto">
-					<!-- Modal content goes here -->
-					<slot />
-				</div>
-				<div class="modal-footer">
-					<button
-						type="button"
-						class="btn me-auto"
-						data-bs-dismiss="modal"
-						@click="closeModal"
-					>
-						{{ closeButtonText }}
-					</button>
-					<button
-						type="button"
-						class="btn btn-primary"
-						data-bs-dismiss="modal"
-						@click="submit"
-					>
-						{{ saveButtonText }}
-					</button>
-				</div>
-			</div>
-		</div>
-	</div>
-</template>
-
-<script>
-export default {
-	props: {
-		isActive: {
-			type: Boolean,
-			default: false,
-		},
-		title: {
-			type: String,
-			default: 'Modal Title',
-		},
-		closeButtonText: {
-			type: String,
-			default: 'Close',
-		},
-		saveButtonText: {
-			type: String,
-			default: 'Save changes',
-		},
-	},
-	methods: {
-		closeModal() {
-			this.$emit('close');
-		},
-		submit() {
-			this.$emit('save');
-		},
-	},
-};
-</script>
-
-<style scoped>
-.modal {
-    display: none;
-    align-items: center;
-    justify-content: center;
-    position: fixed;
-
-    background-color: rgba(0, 0, 0, 0.5);
-}
-.modal-height {
-    max-height: calc(100vh - 150px);
-}
-.modal-dialog {
-    width: 100%;
-}
-.modal.is-active {
-    display: flex;
-}
-</style>
diff --git a/components/NewDevicesSidebar.vue b/components/NewDevicesSidebar.vue
index 6ffb5e1..f03701c 100644
--- a/components/NewDevicesSidebar.vue
+++ b/components/NewDevicesSidebar.vue
@@ -13,12 +13,12 @@
 						>
 					</form>
 					<svg
-						data-v-ca945699=""
 						xmlns="http://www.w3.org/2000/svg"
 						width="22px"
 						height="22px"
 						viewBox="0 0 24 24"
 						class="icon text-primary"
+						@click="openFilter"
 					>
 						<path
 							fill="currentColor"
@@ -38,7 +38,6 @@
 							>
 								<span class="flex items-center justify-center">
 									<svg
-										data-v-ca945699=""
 										xmlns="http://www.w3.org/2000/svg"
 										width="20px"
 										height="20px"
@@ -63,7 +62,6 @@
 									style=""
 								>
 									<svg
-										data-v-ca945699=""
 										xmlns="http://www.w3.org/2000/svg"
 										width="20px"
 										height="20px"
@@ -261,6 +259,7 @@
 				</Accordion>
 			</div>
 		</div>
+		<CustomModalFilter v-model="isFilterModalOpen" />
 	</nav>
 </template>
 
@@ -282,7 +281,11 @@ const props = defineProps({
 
 const isClientSettingOpen = ref(false);
 const selectedSettingOpt = useLocalStorage('dashboard_nav_drawer_item_lines', 1);
+const isFilterModalOpen = ref(false);
 
+const openFilter = () => {
+	isFilterModalOpen.value = true;
+};
 const toggleClientSetting = () => {
 	isClientSettingOpen.value = !isClientSettingOpen.value;
 };
diff --git a/components/custom/loading-spinner/LoadingSpinner.vue b/components/custom/loading-spinner/LoadingSpinner.vue
new file mode 100644
index 0000000..0a76d9a
--- /dev/null
+++ b/components/custom/loading-spinner/LoadingSpinner.vue
@@ -0,0 +1,38 @@
+<template>
+	<span
+		class="absolute inset-0 flex items-center justify-center rounded-md bg-gray-300/10 backdrop-blur-sm"
+	><svg
+		xmlns="http://www.w3.org/2000/svg"
+		width="24px"
+		height="24px"
+		viewBox="0 0 24 24"
+		class="icon text-white mr-2 animate-spin"
+	>
+		<path
+			fill="currentColor"
+			d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z"
+			opacity=".25"
+		/>
+		<path
+			fill="currentColor"
+			d="M10.14,1.16a11,11,0,0,0-9,8.92A1.59,1.59,0,0,0,2.46,12,1.52,1.52,0,0,0,4.11,10.7a8,8,0,0,1,6.66-6.61A1.42,1.42,0,0,0,12,2.69h0A1.57,1.57,0,0,0,10.14,1.16Z"
+		>
+			<animateTransform
+				attributeName="transform"
+				dur="0.75s"
+				repeatCount="indefinite"
+				type="rotate"
+				values="0 12 12;360 12 12"
+			/>
+		</path>
+	</svg>
+	</span>
+</template>
+
+<script setup lang="ts">
+
+</script>
+
+<style scoped>
+
+</style>
diff --git a/components/custom/loading-spinner/index.ts b/components/custom/loading-spinner/index.ts
new file mode 100644
index 0000000..1099b63
--- /dev/null
+++ b/components/custom/loading-spinner/index.ts
@@ -0,0 +1 @@
+export { default as LoadingSpinner } from './LoadingSpinner.vue';
diff --git a/components/custom/modal-filter/ModalFilter.vue b/components/custom/modal-filter/ModalFilter.vue
new file mode 100644
index 0000000..37d7f3d
--- /dev/null
+++ b/components/custom/modal-filter/ModalFilter.vue
@@ -0,0 +1,217 @@
+<template>
+	<BaseModal v-model="internalIsOpen">
+		<div
+			class="relative z-20 w-full max-w-screen-xl items-center rounded border border-slate-400 bg-gray-100 px-5 py-10 text-theme-inverted-lighter shadow dark:bg-slate-800"
+		>
+			<form>
+				<div
+					class="relative z-50 flex w-full gap-2"
+				>
+					<div
+						class="flex flex-col toolbar-search w-full md:w-2/3"
+					>
+						<div class="relative mt-1 flex w-full flex-col">
+							<input
+								id="ZmCZSffyDh"
+								class="input-text focus:border-1 peer order-2 block h-10 w-full rounded bg-transparent text-theme-inverted shadow-sm focus:outline-0 focus:ring-0 sm:text-sm"
+								placeholder=" "
+								type="text"
+								autocomplete="off"
+							><label
+								class="bg-theme-light text-theme-inverted-lighter focus:bg-theme-lighter absolute left-1.5 top-1.5 z-10 origin-[0] -translate-y-4 scale-75 transform px-1 text-theme-label duration-300 peer-placeholder-shown:top-1/2 peer-placeholder-shown:-translate-y-1/2 peer-placeholder-shown:scale-100 peer-focus:top-1.5 peer-focus:-translate-y-4 peer-focus:scale-75 peer-focus:px-1 text-sm font-normal"
+								for="ZmCZSffyDh"
+							>Search clients by name, ip4 or ID</label>
+						</div><!----><!---->
+					</div>
+					<div
+						class="flex w-full items-center rounded border border-slate-400 bg-theme-dark px-2 text-primary md:w-1/3"
+					>
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							width="20px"
+							height="20px"
+							viewBox="0 0 24 24"
+							class="icon mr-1 text-current"
+						><path
+							fill="currentColor"
+							d="M4 20q-.825 0-1.413-.588T2 18V6q0-.825.588-1.413T4 4h5.175q.4 0 .763.15t.637.425L12 6h8q.825 0 1.413.588T22 8v10q0 .825-.588 1.413T20 20H4ZM4 6v12h16V8h-8.825l-2-2H4Zm0 0v12V6Z"
+						/></svg>
+						<span>All</span>
+					</div>
+				</div>
+				<div
+					class="mt-0.5 px-0 pt-2.5"
+				>
+					<div
+						class="flex items-center gap-4 py-2 pr-4"
+					>
+						<div>
+							Connection state
+						</div>
+						<div
+							class="flex items-center gap-2"
+						>
+							<input
+								id="connection_state-any"
+								type="radio"
+								name="connection_state"
+								class="h-4 w-4 border-theme-border focus:ring-2 focus:ring-blue-300"
+								value="any"
+							><label
+								for="connection_state-any"
+								class="block text-sm font-medium text-gray-900 dark:text-slate-200"
+							>any</label>
+						</div>
+						<div
+							class="flex items-center gap-2"
+						>
+							<input
+								id="connection_state-connected"
+								type="radio"
+								name="connection_state"
+								class="h-4 w-4 border-theme-border focus:ring-2 focus:ring-blue-300"
+								value="connected"
+							><label
+								for="connection_state-connected"
+								class="block text-sm font-medium text-gray-900 dark:text-slate-200"
+							>connected</label>
+						</div>
+						<div
+							class="flex items-center gap-2"
+						>
+							<input
+								id="connection_state-disconnected"
+								type="radio"
+								name="connection_state"
+								class="h-4 w-4 border-theme-border focus:ring-2 focus:ring-blue-300"
+								value="disconnected"
+							><label
+								for="connection_state-disconnected"
+								class="block text-sm font-medium text-gray-900 dark:text-slate-200"
+							>disconnected</label>
+						</div>
+					</div>
+					<div
+						class="flex items-center gap-4 py-2 pr-4"
+					>
+						<div>
+							Match by
+						</div>
+						<div
+							class="flex items-center gap-2"
+						>
+							<input
+								id="match_by-begins_with"
+								type="radio"
+								name="match_by"
+								class="h-4 w-4 border-theme-border focus:ring-2 focus:ring-blue-300"
+								value="begins_with"
+							>
+							<label
+								for="match_by-begins_with"
+								class="block text-sm font-medium text-gray-900 dark:text-slate-200"
+							>begins with</label>
+						</div>
+						<div
+							class="flex items-center gap-2"
+						>
+							<input
+								id="match_by-ends_with"
+								type="radio"
+								name="match_by"
+								class="h-4 w-4 border-theme-border focus:ring-2 focus:ring-blue-300"
+								value="ends_with"
+							><label
+								for="match_by-ends_with"
+								class="block text-sm font-medium text-gray-900 dark:text-slate-200"
+							>ends with</label>
+						</div>
+						<div
+							class="flex items-center gap-2"
+						>
+							<input
+								id="match_by-exact"
+								type="radio"
+								name="match_by"
+								class="h-4 w-4 border-theme-border focus:ring-2 focus:ring-blue-300"
+								value="exact"
+							><label
+								for="match_by-exact"
+								class="block text-sm font-medium text-gray-900 dark:text-slate-200"
+							>exact</label>
+						</div>
+						<div
+							class="flex items-center gap-2"
+						>
+							<input
+								id="match_by-word_in_word"
+								type="radio"
+								name="match_by"
+								class="h-4 w-4 border-theme-border focus:ring-2 focus:ring-blue-300"
+								value="word_in_word"
+							><label
+								for="match_by-word_in_word"
+								class="block text-sm font-medium text-gray-900 dark:text-slate-200"
+							>word in word</label>
+						</div>
+					</div>
+					<div
+						class="flex items-center justify-end gap-2 pt-3"
+					>
+						<button
+							class="bg-vtd-secondary-600 hover:bg-vtd-secondary-400 focus-visible:outline-vtd-secondary-600 disabled:bg-vtd-secondary-600/40 disabled:hover:bg-vtd-secondary-600/40 disabled:focus-visible:outline-vtd-secondary-600/40 text-white disabled:text-gray-600 cursor-pointer rounded-md px-2.5 py-1.5 text-sm relative font-semibold shadow-sm transition-all duration-300 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2"
+							type="button"
+							@click="close"
+						>
+							<!----><!----><span class="flex items-center justify-center gap-x-2"><!----> Cancel </span>
+						</button>
+						<button
+							class="bg-vtd-primary-500 hover:bg-vtd-primary-700 focus-visible:outline-vtd-primary-600 disabled:bg-gray-400 disabled:hover:bg-gray-400 disabled:focus-visible:outline-gray-400 text-white disabled:text-gray-500 cursor-pointer rounded-md px-2.5 py-1.5 text-sm relative font-semibold shadow-sm transition-all duration-300 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2"
+							type="submit"
+						>
+							<!----><!----><span class="flex items-center justify-center gap-x-2"><!----> Apply </span>
+						</button>
+					</div>
+				</div>
+			</form>
+		</div>
+	</BaseModal>
+</template>
+
+<script setup lang="ts">
+import { BaseModal } from '~/components/ui/base-modal';
+
+const props = defineProps({
+	modelValue: Boolean,
+});
+const emit = defineEmits(['update:modelValue']);
+const internalIsOpen = ref(props.modelValue);
+
+watch(() => props.modelValue, (newValue) => {
+	internalIsOpen.value = newValue;
+});
+
+const save = () => {
+	internalIsOpen.value = false;
+};
+const close = () => {
+	internalIsOpen.value = false;
+};
+</script>
+
+<style scoped>
+.info {
+  max-width: calc(100% - 30px)
+}
+
+.toolbar-search>div {
+  margin-top: 0
+}
+
+.toolbar-search .input-text {
+  --tw-border-opacity: 1;
+  border-color: #94a3b8;
+  border-color: rgb(148 163 184/var(--tw-border-opacity));
+  border-radius: .25rem
+}
+</style>
diff --git a/components/custom/modal-filter/index.ts b/components/custom/modal-filter/index.ts
new file mode 100644
index 0000000..5407f30
--- /dev/null
+++ b/components/custom/modal-filter/index.ts
@@ -0,0 +1 @@
+export { default as ModalFilter } from './ModalFilter.vue';
diff --git a/components/device/TagsLabelDialog.vue b/components/device/TagsLabelDialog.vue
index 7c2b63f..a42a3a7 100644
--- a/components/device/TagsLabelDialog.vue
+++ b/components/device/TagsLabelDialog.vue
@@ -70,6 +70,7 @@
 						<button
 							type="button"
 							class="inline-flex items-center duration-200 focus:outline-none rounded-full p-0"
+							@click="addTag"
 						>
 							<span
 								class="flex items-center justify-center"
@@ -149,6 +150,7 @@
 								<button
 									type="button"
 									class="inline-flex items-center duration-200 focus:outline-none rounded-full p-0"
+									@click="deleteTag(tag)"
 								>
 									<span
 										class="flex items-center justify-center"
@@ -201,6 +203,7 @@
 						<button
 							type="button"
 							class="inline-flex items-center duration-200 focus:outline-none rounded-full p-0"
+							@click="addLabel"
 						>
 							<span
 								class="flex items-center justify-center"
@@ -360,10 +363,31 @@
 			</div>
 			<div class="w-full py-8">
 				<form
-					v-if="isEdittingTag"
+					v-if="mode"
 					class="flex w-full items-start gap-1"
 				>
-					<div class="flex flex-col -mt-1 w-full text-primary">
+					<div
+						v-if="mode === 'label'"
+						class="flex flex-col -mt-1 w-full text-primary md:w-2/5"
+					>
+						<div class="relative mt-1 flex w-full flex-col">
+							<input
+								id="g0lTM66Zw1"
+								v-model="currentLabelKey"
+								class="primary input-text focus:border-1 peer order-2 block h-10 w-full rounded bg-transparent text-theme-inverted shadow-sm focus:outline-0 focus:ring-0 sm:text-sm"
+								placeholder=" "
+								type="text"
+								autocomplete="off"
+							><label
+								class="absolute left-1.5 top-1.5 z-10 origin-[0] -translate-y-4 scale-75 transform px-1 text-theme-label duration-300 peer-placeholder-shown:top-1/2 peer-placeholder-shown:-translate-y-1/2 peer-placeholder-shown:scale-100 peer-focus:top-1.5 peer-focus:-translate-y-4 peer-focus:scale-75 peer-focus:px-1 text-theme-label peer-focus:text-primary bg-theme text-sm font-normal"
+								for="g0lTM66Zw1"
+							>Label Key</label>
+						</div><!----><!---->
+					</div>
+					<div
+						v-if="mode === 'tag'"
+						class="flex flex-col -mt-1 w-full text-primary"
+					>
 						<div class="relative mt-1 flex w-full flex-col">
 							<input
 								id="Vd20DgVXFS"
@@ -378,11 +402,32 @@
 							>Tag Name</label>
 						</div><!----><!---->
 					</div>
+					<div
+						v-if="mode === 'label'"
+						class="flex flex-col md:w-3/5 -mt-1 w-full text-primary"
+					>
+						<div class="relative mt-1 flex w-full flex-col">
+							<input
+								id="91vl4xAzUz"
+								v-model="currentLabelValue"
+								class="primary input-text focus:border-1 peer order-2 block h-10 w-full rounded bg-transparent text-theme-inverted shadow-sm focus:outline-0 focus:ring-0 sm:text-sm"
+								placeholder=" "
+								type="text"
+								autocomplete="off"
+							><label
+								class="absolute left-1.5 top-1.5 z-10 origin-[0] -translate-y-4 scale-75 transform px-1 text-theme-label duration-300 peer-placeholder-shown:top-1/2 peer-placeholder-shown:-translate-y-1/2 peer-placeholder-shown:scale-100 peer-focus:top-1.5 peer-focus:-translate-y-4 peer-focus:scale-75 peer-focus:px-1 text-theme-label peer-focus:text-primary bg-theme text-sm font-normal"
+								for="91vl4xAzUz"
+							>Label Value</label>
+						</div><!----><!---->
+					</div>
 					<button
 						class="bg-vtd-primary-500 hover:bg-vtd-primary-700 focus-visible:outline-vtd-primary-600 disabled:bg-gray-400 disabled:hover:bg-gray-400 disabled:focus-visible:outline-gray-400 text-white disabled:text-gray-500 cursor-pointer rounded-md px-2.5 py-1.5 text-sm relative font-semibold shadow-sm transition-all duration-300 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2"
 						type="submit"
+						:disabled="isLoading"
+						@click="handleSubmit"
 					>
-						<!----><!----><span class="flex items-center justify-center gap-x-2">{{ isEdittingTag ? 'Save' : 'Add' }}</span>
+						<LoadingSpinner v-if="isLoading" />
+						<!----><span class="flex items-center justify-center gap-x-2">{{ modeActionText }}</span>
 					</button>
 				</form>
 			</div>
@@ -392,7 +437,10 @@
 
 <script setup lang="ts">
 import { useClientDetail } from '~/composables/useClientDetail';
+import type { Client } from '~/types';
+import { LoadingSpinner } from '~/components/custom/loading-spinner';
 
+const { $api } = useNuxtApp();
 const props = defineProps({
 	modelValue: Boolean,
 	modelValueClient: Object,
@@ -401,13 +449,141 @@ const emit = defineEmits(['update:modelValue', 'update:modelValueClient', 'save'
 const internalIsOpen = ref(props.modelValue);
 const internalClient = ref(props.modelValueClient);
 const isLoading = ref(false);
+
+const mode = ref<'tag' | 'label' | null>(null);
+const action = ref<'create' | 'edit' | null>(null);
+
 const currentTag = ref('');
-const isUpdatingTag = ref(false);
-const isEdittingTag = ref(false);
+const originalTag = ref('');
+const currentLabelKey = ref('');
+const currentLabelValue = ref('');
+const originalLabelKey = ref('');
+
+const modeActionText = computed(() => (action.value === 'create' ? 'Add' : 'Save'));
 
 const editTag = (tag: string) => {
+	originalTag.value = tag;
 	currentTag.value = tag;
-	isEdittingTag.value = true;
+	mode.value = 'tag';
+	action.value = 'edit';
+};
+
+const addTag = () => {
+	currentTag.value = '';
+	mode.value = 'tag';
+	action.value = 'create';
+};
+
+const deleteTag = async (tag: string) => {
+	const index = internalClient.value?.tags.indexOf(tag);
+	if (index === -1) return;
+
+	isLoading.value = true;
+	try {
+		internalClient.value?.tags.splice(index, 1);
+		await updateClientData();
+	}
+	finally {
+		isLoading.value = false;
+	}
+};
+
+const addLabel = () => {
+	currentLabelKey.value = '';
+	currentLabelValue.value = '';
+	mode.value = 'label';
+	action.value = 'create';
+};
+
+const editLabel = (key: string, value: string) => {
+	originalLabelKey.value = key;
+	currentLabelKey.value = key;
+	currentLabelValue.value = value;
+	mode.value = 'label';
+	action.value = 'edit';
+};
+
+const deleteLabel = async (key: string) => {
+	if (!internalClient.value?.labels[key]) return;
+	isLoading.value = true;
+	try {
+		delete internalClient.value?.labels[key];
+		await updateClientData();
+	}
+	finally {
+		isLoading.value = false;
+	}
+};
+
+const handleSubmit = async () => {
+	if (mode.value === 'tag') {
+		await handleTagAction();
+	}
+	else if (mode.value === 'label') {
+		await handleLabelAction();
+	}
+};
+
+const handleTagAction = async () => {
+	if (!currentTag.value) return;
+	isLoading.value = true;
+	try {
+		if (action.value === 'create') {
+			internalClient.value?.tags.push(currentTag.value);
+		}
+		else if (action.value === 'edit') {
+			const index = internalClient.value?.tags.indexOf(originalTag.value);
+			if (!internalClient.value) return;
+			if (index !== -1) internalClient.value.tags[index] = currentTag.value;
+		}
+		await updateClientData();
+		resetTagForm();
+	}
+	finally {
+		isLoading.value = false;
+	}
+};
+
+const handleLabelAction = async () => {
+	if (!currentLabelKey.value || !currentLabelValue.value) return;
+
+	isLoading.value = true;
+	try {
+		// Check if key has changed
+		if (originalLabelKey.value && currentLabelKey.value !== originalLabelKey.value) {
+			delete internalClient.value?.labels[originalLabelKey.value];
+		}
+		if (!internalClient.value) return;
+		internalClient.value.labels[currentLabelKey.value] = currentLabelValue.value;
+		await updateClientData();
+		resetLabelForm();
+	}
+	finally {
+		isLoading.value = false;
+	}
+};
+
+const resetTagForm = () => {
+	currentTag.value = '';
+	originalTag.value = '';
+	mode.value = null;
+	action.value = null;
+};
+
+const resetLabelForm = () => {
+	currentLabelKey.value = '';
+	currentLabelValue.value = '';
+	originalLabelKey.value = '';
+	mode.value = null;
+	action.value = null;
+};
+const updateClientData = async () => {
+	try {
+		const response = await $api.clients.updateTagsLabel(internalClient.value as Client);
+	}
+	catch (e) {
+		console.log(e);
+	}
 };
 
 watch(() => props.modelValue, (newValue) => {
diff --git a/components/ui/base-modal/BaseModal.vue b/components/ui/base-modal/BaseModal.vue
new file mode 100644
index 0000000..b001efe
--- /dev/null
+++ b/components/ui/base-modal/BaseModal.vue
@@ -0,0 +1,28 @@
+<template>
+	<Teleport to="body">
+		<div
+			v-if="modelValue"
+			class="fixed inset-0 z-[100] bg-gray-500/75 backdrop-blur transition-opacity dark:bg-slate-600/80"
+		/>
+		<div
+			v-if="modelValue"
+			class="fixed inset-0 z-[200] flex items-center justify-center overflow-hidden p-5 transition"
+		>
+			<slot />
+		</div>
+	</Teleport>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+	modelValue: boolean;
+}>();
+
+const emit = defineEmits<{
+	(e: 'update:modelValue', value: boolean): void;
+}>();
+</script>
+
+<style scoped>
+
+</style>
diff --git a/components/ui/base-modal/index.ts b/components/ui/base-modal/index.ts
new file mode 100644
index 0000000..f75f0dd
--- /dev/null
+++ b/components/ui/base-modal/index.ts
@@ -0,0 +1 @@
+export { default as BaseModal } from './BaseModal.vue';
diff --git a/middleware/auth.global.ts b/middleware/auth.global.ts
index cac0908..fbe15a9 100644
--- a/middleware/auth.global.ts
+++ b/middleware/auth.global.ts
@@ -5,7 +5,7 @@ export default defineNuxtRouteMiddleware((to, from) => {
 	// }
 	// return navigateTo("/auth")
 	const { authenticated } = storeToRefs(useTokenStore());
-	const token = useCookie('token');
+	const token = useCookie<string>('token');
 
 	if (token.value) {
 		authenticated.value = true;
diff --git a/pages/dashboard/[id].vue b/pages/dashboard/[id].vue
index 9b3838e..73453d3 100644
--- a/pages/dashboard/[id].vue
+++ b/pages/dashboard/[id].vue
@@ -190,8 +190,6 @@
 										</svg>
 										</span>
 									</button>
-									<!--										<ScrollBar orientation="horizontal" /> -->
-									<!--									</ScrollArea> -->
 								</div>
 							</div>
 							<div class="absolute inset-0 z-0 w-full pt-12 top-20">
diff --git a/repository/modules/clients.ts b/repository/modules/clients.ts
index af43b88..41d9388 100644
--- a/repository/modules/clients.ts
+++ b/repository/modules/clients.ts
@@ -3,6 +3,7 @@ import type {
 	ClientMetricsResponse,
 	ClientResponse,
 	ClientsResponse,
+	Client,
 	StoredTunnel, StoredTunnelResponse,
 	Tunnel, TunnelPayload,
 	TunnelResponse,
@@ -87,6 +88,17 @@ class ClientsModule extends HttpFactory {
 			undefined,
 		);
 	}
+
+	async updateTagsLabel(client: Client): Promise<never> {
+		return await this.call(
+			'PUT',
+			`${this.RESOURCE}/${client.id}/attributes`,
+			{
+				tags: client.tags,
+				labels: client.labels,
+			},
+		);
+	}
 }
 
 export default ClientsModule;