did something

src/TableManager.vue

@@ -0,0 +1,133 @@
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+
+import axios from 'axios'
+import Button from 'primevue/button'
+import DataTable from 'primevue/datatable'
+import Column from 'primevue/column'
+import Card from 'primevue/card'
+import SplitButton from 'primevue/splitbutton'
+
+const allTables = ref()
+const activeTables = ref()
+
+onMounted(() => {
+  activeTables.value = [
+    {
+      tableName: 'Table-One',
+      link: 'vtt.cyberpunkrush.co/table-one',
+    },
+  ]
+
+  axios.get('http://localhost/api/tables').then((resp) => (allTables.value = resp.data))
+  axios.get('http://localhost/api/active_tables').then((resp) => (activeTables.value = resp.data))
+})
+
+function startTable(tableId: number) {
+  const activate = axios.get(`http://localhost/api/tables/${tableId}:start`)
+  activate
+    .then((resp) => axios.get('http://localhost/api/tables'))
+    .then((resp) => (allTables.value = resp.data))
+  activate
+    .then((resp) => axios.get('http://localhost/api/active_tables'))
+    .then((resp) => (activeTables.value = resp.data))
+}
+
+function stopTable(tableId: number) {
+  const activate = axios.get(`http://localhost/api/tables/${tableId}:stop`)
+  activate
+    .then((resp) => axios.get('http://localhost/api/tables'))
+    .then((resp) => (allTables.value = resp.data))
+  activate
+    .then((resp) => axios.get('http://localhost/api/active_tables'))
+    .then((resp) => (activeTables.value = resp.data))
+}
+
+const saveButtonSubmenu = [
+  { label: 'Edit' },
+  { label: 'Restart' },
+  { label: 'Force Stop' },
+  { separator: true },
+  { label: 'Delete' },
+]
+</script>
+
+<style>
+.ActiveTables {
+  margin: 20px;
+
+  h2 {
+    padding-left: 15px;
+  }
+
+  .Tables {
+    padding-left: 50px;
+  }
+}
+
+.AllTables {
+  margin: 20px;
+
+  h2 {
+    padding-left: 15px;
+  }
+
+  .Tables {
+    padding-left: 50px;
+  }
+
+  .button-box {
+    padding-top: 25px;
+    padding-bottom: 10px;
+  }
+}
+</style>
+
+<template>
+  <Card class="ActiveTables">
+    <template #title>
+      <h2>Active Tables</h2>
+    </template>
+
+    <template #content>
+      <DataTable class="Tables" :value="activeTables">
+        <Column field="table_name" header="Table Name" />
+        <Column field="table_link" header="Table Link">
+          <template #body="slotProps">
+            <a :href="slotProps.data.table_link">{{ slotProps.data.table_link }}</a>
+          </template>
+        </Column>
+        <Column header="Close">
+          <template #body="slotProps">
+            <Button label="Close" @click="stopTable(slotProps.data.id)" />
+          </template>
+        </Column>
+      </DataTable>
+    </template>
+  </Card>
+
+  <Card class="AllTables">
+    <template #title>
+      <h2>All Tables</h2>
+    </template>
+
+    <template #content>
+      <DataTable class="Tables" :value="allTables">
+        <Column field="table_name" header="Table Name" />
+        <Column field="table_link" header="Table Link" />
+        <Column header="Close">
+          <template #body="slotProps">
+            <SplitButton
+              label="Start"
+              @click="startTable(slotProps.data.id)"
+              :model="saveButtonSubmenu"
+            />
+          </template>
+        </Column>
+      </DataTable>
+      <div class="button-box flex justify-content-end">
+        <Button label="New Table" />
+      </div>
+    </template>
+  </Card>
+</template>