Still needs styling work & maybe some better error checking.

@@ -0,0 +27,4 @@
+</template>
+
+<style scoped>
+@import "@/assets/base.css";

@@ -0,0 +51,4 @@
+      selectedTag: null,
+      newTagName: "",
+      workers: useWorkers(),
+      activeRowIndex: -1,

@@ -0,0 +60,4 @@
+
+    const vueComponent = this;
+    const api = new WorkerMgtApi(getAPIClient());
+    window.api = api;

@@ -0,0 +72,4 @@
+        const isActive = data.id === vueComponent.activeTagID;
+        const classList = row.getElement().classList;
+        classList.toggle("active-row", isActive);
+        classList.toggle("deletion-requested", !!data.delete_requested_at);

@@ -0,0 +88,4 @@
+  },
+
+  methods: {
+    sortData() {

@@ -0,0 +92,4 @@
+      const tab = this.tabulator;
+      tab.setSort(tab.getSorters()); // This triggers re-sorting.
+    },
+    _onTableBuilt() {

@@ -0,0 +117,4 @@
+      api
+        .createWorkerTag(newTag)
+        .then(() => {
+          this.fetchTags(); // Refresh table data

@@ -0,0 +134,4 @@
+      api
+        .deleteWorkerTag(this.selectedTag.id)
+        .then(() => {
+          const index = this.tags.findIndex(

@@ -0,0 +155,4 @@
+      this.onTagClick(tag, row.getIndex());
+    },
+
+    onTagClick(tag, rowIndex) {

@@ -0,0 +158,4 @@
+    onTagClick(tag, rowIndex) {
+      console.log("Clicked Tag:", tag);
+      console.log("Selected Tag:", this.selectedTag);
+      this.selectedTag = this.selectedTag === tag ? null : tag;

@@ -0,0 +165,4 @@
+
+  computed: {
+    isSelected() {
+      return (tag) => tag === this.selectedTag;

@@ -0,0 +5,4 @@
+    <div class="action-buttons btn-bar-group">
+      <div class="btn-bar">
+        <button @click="fetchTags">Refresh</button>
+        <button @click="deleteTag" :disabled="!selectedTag">Delete Tag</button>