From 79fbd73e8f4c344836506d5ed18f4df9b6ef9190 Mon Sep 17 00:00:00 2001
From: jbcarras <jbcarras@buffalo.edu>
Date: Wed, 11 Mar 2026 12:22:55 -0400
Subject: [PATCH 1/2] Fix active visits route and some frontend reorganization

---
 api/queue/routes.py                       |  1 +
 client/src/components/EnrollmentEntry.vue | 46 -------------------
 client/src/components/ManageTable.vue     | 56 +++++++++++++++++++++++
 client/src/components/TableEntry.vue      | 31 +++++++++++++
 client/src/pages/ManageCourse.vue         | 49 ++------------------
 5 files changed, 92 insertions(+), 91 deletions(-)
 delete mode 100644 client/src/components/EnrollmentEntry.vue
 create mode 100644 client/src/components/ManageTable.vue
 create mode 100644 client/src/components/TableEntry.vue

diff --git a/api/queue/routes.py b/api/queue/routes.py
index 0061930..ffb33f2 100644
--- a/api/queue/routes.py
+++ b/api/queue/routes.py
@@ -176,6 +176,7 @@ def get_active_visits():
             "ta_id": visit["ta_id"],
             "ta_name": ta_name
         })
+    return visits
 
 @blueprint.route("/visits/<id>", methods=["GET"])
 @min_level('instructor')
diff --git a/client/src/components/EnrollmentEntry.vue b/client/src/components/EnrollmentEntry.vue
deleted file mode 100644
index 19d64ba..0000000
--- a/client/src/components/EnrollmentEntry.vue
+++ /dev/null
@@ -1,46 +0,0 @@
-<script setup lang="ts">
-
-const props = defineProps(['user_id', 'username', 'pn', 'preferred_name',
-                            'last_name', 'course_role'])
-
-</script>
-
-<template>
-          <tr>
-            <td contenteditable="true" @input="() => { console.log(username) }">{{ username }}</td>
-            <td>{{ pn }}</td>
-            <td>{{ preferred_name }}</td>
-            <td>{{ last_name }}</td>
-            <td>{{ course_role }}</td>
-            <td>{{ user_id }}</td>
-            <td>
-              <div id="actions">
-                <button @click="$emit('remove', )"
-                        :disabled="course_role === 'admin'">Remove</button>
-              </div>
-            </td>
-          </tr>
-</template>
-
-<style scoped>
-  #actions {
-    display: flex;
-    gap: 4px;
-    justify-content: center;
-  }
-
-  tr, th, td {
-    border: 2px solid #D9D9D9;
-    border-collapse: collapse;
-  }
-
-  td {
-    padding: 8px;
-  }
-
-  tr:nth-child(odd) {
-    background-color: #FAFAFA;
-  }
-
-
-</style>
\ No newline at end of file
diff --git a/client/src/components/ManageTable.vue b/client/src/components/ManageTable.vue
new file mode 100644
index 0000000..ebb9c72
--- /dev/null
+++ b/client/src/components/ManageTable.vue
@@ -0,0 +1,56 @@
+<script setup lang="ts">
+
+import TableEntry from "@/components/TableEntry.vue";
+
+const props = defineProps(["headings", "table_data"]);
+
+</script>
+
+<template>
+  <div id="enrollment-container">
+        <table id="enrollment-table">
+          <thead>
+            <tr>
+              <th v-for="heading in headings">{{ heading }}</th>
+            </tr>
+          </thead>
+          <tbody>
+            <TableEntry v-for="data in table_data"
+                              :data="data">
+              <slot></slot>
+            </TableEntry>
+          </tbody>
+        </table>
+      </div>
+</template>
+
+<style scoped>
+
+th {
+  padding: 8px;
+}
+
+#enrollment-container {
+  justify-content: center;
+  overflow-x: scroll;
+}
+
+#enrollment-table, tr, th, td {
+  border: 2px solid #D9D9D9;
+  border-collapse: collapse;
+}
+
+#enrollment-table {
+  width: 100%;
+  font-size: 1rem;
+}
+
+#actions {
+    display: flex;
+    gap: 4px;
+    margin: 4px;
+    justify-content: center;
+}
+
+
+</style>
\ No newline at end of file
diff --git a/client/src/components/TableEntry.vue b/client/src/components/TableEntry.vue
new file mode 100644
index 0000000..647fd07
--- /dev/null
+++ b/client/src/components/TableEntry.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+
+const props = defineProps(['data'])
+
+</script>
+
+<template>
+          <tr>
+            <td v-for="entry in data">{{ entry }}</td>
+            <slot/>
+          </tr>
+</template>
+
+<style scoped>
+
+
+  tr, th, td {
+    border: 2px solid #D9D9D9;
+    border-collapse: collapse;
+  }
+
+  td {
+    padding: 8px;
+  }
+
+  tr:nth-child(odd) {
+    background-color: #FAFAFA;
+  }
+
+
+</style>
\ No newline at end of file
diff --git a/client/src/pages/ManageCourse.vue b/client/src/pages/ManageCourse.vue
index a15bf81..f96589e 100644
--- a/client/src/pages/ManageCourse.vue
+++ b/client/src/pages/ManageCourse.vue
@@ -2,9 +2,10 @@
 
 import {useRouter} from "vue-router";
 import {ref} from "vue";
-import EnrollmentEntry from "@/components/EnrollmentEntry.vue";
+import TableEntry from "@/components/TableEntry.vue";
 import ConfirmationDialog from "@/components/ConfirmationDialog.vue";
 import Alert from "@/components/Alert.vue";
+import ManageTable from "@/components/ManageTable.vue";
 
 const router = useRouter()
 
@@ -181,54 +182,15 @@ const resetAuth = () => {
         <button @click="uploadCSVDialog?.show()">Enroll from CSV</button>
         <button @click="alertBox?.setError('Not implemented')" class="danger">Clear all Enrollments</button>
       </div>
-      <div id="enrollment-container">
-        <table id="enrollment-table">
-          <thead>
-            <tr>
-              <th>Username</th>
-              <th>Person Number</th>
-              <th>Preferred Name</th>
-              <th>Last Name</th>
-              <th>Role</th>
-              <th>User ID</th>
-              <th>Actions</th>
-            </tr>
-          </thead>
-          <tbody>
-            <EnrollmentEntry v-for="user in users"
-                             :user_id="user['user_id']"
-                             :preferred_name="user['preferred_name']"
-                             :last_name="user['last_name']"
-                             :pn="user['person_num']"
-                             :username="user['ubit']"
-                             :course_role="user['course_role']"
-            />
-          </tbody>
-        </table>
-      </div>
-  </div>
-
+      <ManageTable :headings="['Role', 'Preferred Name', 'Person Number', 'Role', 'User ID', 'User ID', 'Actions']" :table_data="users"/>
 
+  </div>
 
 
 </template>
 
 <style scoped>
 
-#enrollment-container {
-  justify-content: center;
-  overflow-x: scroll;
-}
-
-#enrollment-table, tr, th, td {
-  border: 2px solid #D9D9D9;
-  border-collapse: collapse;
-}
-
-#enrollment-table {
-  width: 100%;
-  font-size: 1rem;
-}
 
 #manage-course {
   margin: 32px 8%;
@@ -245,8 +207,5 @@ br {
   margin-bottom: 24px;
 }
 
-th {
-  padding: 8px;
-}
 
 </style>
\ No newline at end of file

From 057e357bee325fc549872c0579d9687d1a42a1c3 Mon Sep 17 00:00:00 2001
From: jbcarras <jbcarras@buffalo.edu>
Date: Wed, 18 Mar 2026 20:23:35 -0400
Subject: [PATCH 2/2] Show active visits in frontend and reorganization

---
 client/src/components/{ => common}/Alert.vue  |  0
 .../{ => common}/ConfirmationDialog.vue       |  0
 .../src/components/{ => common}/EditInfo.vue  |  2 +-
 client/src/components/{ => common}/Header.vue |  0
 .../src/components/instructor/ActiveEntry.vue | 27 +++++++
 .../{ => instructor}/OnSiteEntry.vue          |  2 +-
 .../{ => instructor}/QueueControlEntry.vue    |  0
 .../{ => instructor}/QueueEntry.vue           |  2 +-
 .../src/components/{ => instructor}/Visit.vue |  2 +-
 client/src/layouts/AppLayout.vue              |  2 +-
 client/src/pages/InstructorQueue.vue          | 73 ++++++++++++++++---
 client/src/pages/ManageCourse.vue             |  4 +-
 client/src/pages/StudentQueue.vue             |  6 +-
 client/src/pages/Swipe.vue                    |  2 +-
 14 files changed, 101 insertions(+), 21 deletions(-)
 rename client/src/components/{ => common}/Alert.vue (100%)
 rename client/src/components/{ => common}/ConfirmationDialog.vue (100%)
 rename client/src/components/{ => common}/EditInfo.vue (95%)
 rename client/src/components/{ => common}/Header.vue (100%)
 create mode 100644 client/src/components/instructor/ActiveEntry.vue
 rename client/src/components/{ => instructor}/OnSiteEntry.vue (89%)
 rename client/src/components/{ => instructor}/QueueControlEntry.vue (100%)
 rename client/src/components/{ => instructor}/QueueEntry.vue (90%)
 rename client/src/components/{ => instructor}/Visit.vue (98%)

diff --git a/client/src/components/Alert.vue b/client/src/components/common/Alert.vue
similarity index 100%
rename from client/src/components/Alert.vue
rename to client/src/components/common/Alert.vue
diff --git a/client/src/components/ConfirmationDialog.vue b/client/src/components/common/ConfirmationDialog.vue
similarity index 100%
rename from client/src/components/ConfirmationDialog.vue
rename to client/src/components/common/ConfirmationDialog.vue
diff --git a/client/src/components/EditInfo.vue b/client/src/components/common/EditInfo.vue
similarity index 95%
rename from client/src/components/EditInfo.vue
rename to client/src/components/common/EditInfo.vue
index 316d9f1..dc0c573 100644
--- a/client/src/components/EditInfo.vue
+++ b/client/src/components/common/EditInfo.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 
-import ConfirmationDialog from "@/components/ConfirmationDialog.vue";
+import ConfirmationDialog from "@/components/common/ConfirmationDialog.vue";
 import {nextTick, ref} from "vue";
 
 const props = defineProps(["default_name", "is_instructor"]);
diff --git a/client/src/components/Header.vue b/client/src/components/common/Header.vue
similarity index 100%
rename from client/src/components/Header.vue
rename to client/src/components/common/Header.vue
diff --git a/client/src/components/instructor/ActiveEntry.vue b/client/src/components/instructor/ActiveEntry.vue
new file mode 100644
index 0000000..eab17da
--- /dev/null
+++ b/client/src/components/instructor/ActiveEntry.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+
+import QueueControlEntry from "@/components/instructor/QueueControlEntry.vue";
+
+defineProps(["student_name", "ubit", "ta_name", "visit_id"])
+defineEmits(["end-visit"])
+
+
+</script>
+
+<template>
+
+  <QueueControlEntry>
+    <template #info>{{ student_name }} ({{ ubit }}) is being helped by {{ ta_name }}</template>
+    <template #buttons>
+      <button class="danger" @click="$emit('end-visit', visit_id)">End Visit</button>
+    </template>
+    <template #dropdown-buttons>
+      <button class="danger" @click="$emit('end-visit', visit_id)">End Visit</button>
+    </template>
+  </QueueControlEntry>
+
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/client/src/components/OnSiteEntry.vue b/client/src/components/instructor/OnSiteEntry.vue
similarity index 89%
rename from client/src/components/OnSiteEntry.vue
rename to client/src/components/instructor/OnSiteEntry.vue
index 77ffc14..2acdde4 100644
--- a/client/src/components/OnSiteEntry.vue
+++ b/client/src/components/instructor/OnSiteEntry.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 
-import QueueControlEntry from "@/components/QueueControlEntry.vue";
+import QueueControlEntry from "@/components/instructor/QueueControlEntry.vue";
 
 defineProps(["name", "ubit", "id"])
 defineEmits(["enqueue-student", "remove-student"])
diff --git a/client/src/components/QueueControlEntry.vue b/client/src/components/instructor/QueueControlEntry.vue
similarity index 100%
rename from client/src/components/QueueControlEntry.vue
rename to client/src/components/instructor/QueueControlEntry.vue
diff --git a/client/src/components/QueueEntry.vue b/client/src/components/instructor/QueueEntry.vue
similarity index 90%
rename from client/src/components/QueueEntry.vue
rename to client/src/components/instructor/QueueEntry.vue
index aebc9da..bf6c21f 100644
--- a/client/src/components/QueueEntry.vue
+++ b/client/src/components/instructor/QueueEntry.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 
-import QueueControlEntry from "@/components/QueueControlEntry.vue";
+import QueueControlEntry from "@/components/instructor/QueueControlEntry.vue";
 
 defineProps(["name", "ubit", "id"])
 defineEmits(["call-student", "remove-student", "move-to-end"])
diff --git a/client/src/components/Visit.vue b/client/src/components/instructor/Visit.vue
similarity index 98%
rename from client/src/components/Visit.vue
rename to client/src/components/instructor/Visit.vue
index d6d41ac..3b38b73 100644
--- a/client/src/components/Visit.vue
+++ b/client/src/components/instructor/Visit.vue
@@ -112,6 +112,6 @@ const cancelVisit = () => {
 </template>
 
 <style scoped>
-@import "../assets/css/visit.css";
+@import "../../assets/css/visit.css";
 
 </style>
\ No newline at end of file
diff --git a/client/src/layouts/AppLayout.vue b/client/src/layouts/AppLayout.vue
index 34baea5..b003ed9 100644
--- a/client/src/layouts/AppLayout.vue
+++ b/client/src/layouts/AppLayout.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 
 import githubLogo from "@/assets/github.svg";
-import Header from "@/components/Header.vue";
+import Header from "@/components/common/Header.vue";
 
 </script>
 
diff --git a/client/src/pages/InstructorQueue.vue b/client/src/pages/InstructorQueue.vue
index 5a71b7a..4b8d723 100644
--- a/client/src/pages/InstructorQueue.vue
+++ b/client/src/pages/InstructorQueue.vue
@@ -1,16 +1,18 @@
 <script setup lang="ts">
 
-import QueueEntry from "@/components/QueueEntry.vue";
+import QueueEntry from "@/components/instructor/QueueEntry.vue";
 import {nextTick, ref} from "vue";
-import ConfirmationDialog from "@/components/ConfirmationDialog.vue";
-import Visit from "@/components/Visit.vue";
-import EditInfo from "@/components/EditInfo.vue";
+import ConfirmationDialog from "@/components/common/ConfirmationDialog.vue";
+import Visit from "@/components/instructor/Visit.vue";
+import EditInfo from "@/components/common/EditInfo.vue";
 import {useRouter} from "vue-router";
-import Alert from "@/components/Alert.vue";
-import OnSiteEntry from "@/components/OnSiteEntry.vue";
+import Alert from "@/components/common/Alert.vue";
+import OnSiteEntry from "@/components/instructor/OnSiteEntry.vue";
+import ActiveEntry from "@/components/instructor/ActiveEntry.vue";
 
 const students = ref([])
 const onSite = ref([])
+const inVisit = ref([])
 
 const router = useRouter()
 
@@ -43,12 +45,20 @@ function getQueue() {
     onSite.value = data
   })
 
+  fetch("/api/active-visits").then(res => {
+    return res.json();
+  }).then(data => {
+    inVisit.value = data;
+  })
+
 }
 
+
 let pollTimeout = -1
 
 function poll() {
   getQueue();
+  getInProgressVisit();
   pollTimeout = setTimeout(poll, 2000);
 }
 
@@ -216,11 +226,11 @@ function getInProgressVisit() {
   }).then(data => {
     visitInfo.value = data
     visitDialog.value?.show()
-  }).catch(() => {})
+  }).catch(() => {
+    visitDialog.value?.hide()
+  })
 }
 
-getInProgressVisit()
-
 function signOut() {
   fetch("/api/signout", { method: "POST" }).then(res => {
     if (res.ok) {
@@ -248,13 +258,30 @@ router.beforeEach((to, from, next) => {
   next();
 })
 
+const endVisitDialog = ref<typeof ConfirmationDialog>();
+let endVisitID = 0;
+const endVisitTAName = ref<string>("");
 
+function endOtherTAsVisit(id: number) {
+  fetch("/api/end-visit", {
+    method: "POST",
+    body: JSON.stringify({"id": id, "reason": `[Visit canceled by ${taName}]`}),
+    headers: {"Content-Type": "application/json"}
+  }).then(res => {
+    if (res.ok) {
+      endVisitDialog.value?.hide();
+    } else {
+      error.value?.setError("Failed to end visit");
+      endVisitDialog.value?.hide();
+    }
+  })
+}
 
 </script>
 
 <template>
 
-  <Visit ref="visitDialog" :visit_info="visitInfo" @open="getQueue" @close="() => { getQueue(); getInProgressVisit(); } "/>
+  <Visit ref="visitDialog" :visit_info="visitInfo" @open="getQueue" @close="() => { getQueue(); } "/>
 
   <ConfirmationDialog @open="() => { resetForceEnqueueDialog(); nextTick(() => forceEnqueueMessageBox?.focus())}" @enter="submitForceEnqueue" ref="forceEnqueueDialog">
     <label for="force-enqueue">Student Identifier (UBITName or Person Number)</label><br/>
@@ -299,7 +326,19 @@ router.beforeEach((to, from, next) => {
       <button @click="deactivateStudentDialog?.hide()">Keep this student on-site.</button>
       <button @click="deactivateStudent" class="danger">Deactivate this student.</button>
     </div>
+  </ConfirmationDialog>
 
+  <ConfirmationDialog ref="endVisitDialog">
+    <p>
+      <strong>Are you sure?</strong>
+    </p>
+
+    <p>This is not your visit. You should only do this if {{ endVisitTAName }} cannot.</p>
+
+    <div class="input-modal-container">
+      <button @click="endVisitDialog?.hide()">Cancel</button>
+      <button @click="endOtherTAsVisit(endVisitID)" class="danger">End this visit.</button>
+    </div>
   </ConfirmationDialog>
 
   <EditInfo is_instructor="true" @name-change="(name) => { taName = name }" :default_name="taName" ref="editInfo"/>
@@ -324,6 +363,20 @@ router.beforeEach((to, from, next) => {
       </div>
     </div>
     <br/>
+    <div v-if="inVisit.length > 0">
+      <h2>In Visit</h2>
+      <div class="queue-container queue-section">
+        <ActiveEntry v-for="visit in inVisit"
+                     :student_name="visit['student_name']"
+                     :ubit="visit['student_username']"
+                     :ta_name="visit['ta_name']"
+                     :visit_id="visit['visitID']"
+                     @end-visit="() => { endVisitTAName = visit['ta_name']; endVisitID = visit['visitID']; endVisitDialog?.show(); }"
+        />
+      </div>
+    </div>
+
+
     <div v-if="students.length > 0">
       <h2>Queue</h2>
       <div class="queue-container queue-section">
diff --git a/client/src/pages/ManageCourse.vue b/client/src/pages/ManageCourse.vue
index f96589e..33bb8db 100644
--- a/client/src/pages/ManageCourse.vue
+++ b/client/src/pages/ManageCourse.vue
@@ -3,8 +3,8 @@
 import {useRouter} from "vue-router";
 import {ref} from "vue";
 import TableEntry from "@/components/TableEntry.vue";
-import ConfirmationDialog from "@/components/ConfirmationDialog.vue";
-import Alert from "@/components/Alert.vue";
+import ConfirmationDialog from "@/components/common/ConfirmationDialog.vue";
+import Alert from "@/components/common/Alert.vue";
 import ManageTable from "@/components/ManageTable.vue";
 
 const router = useRouter()
diff --git a/client/src/pages/StudentQueue.vue b/client/src/pages/StudentQueue.vue
index ff3e609..77f40ff 100644
--- a/client/src/pages/StudentQueue.vue
+++ b/client/src/pages/StudentQueue.vue
@@ -2,9 +2,9 @@
 
 import {ref} from "vue";
 import {useRouter} from "vue-router";
-import ConfirmationDialog from "@/components/ConfirmationDialog.vue";
-import EditInfo from "@/components/EditInfo.vue";
-import Alert from "@/components/Alert.vue";
+import ConfirmationDialog from "@/components/common/ConfirmationDialog.vue";
+import EditInfo from "@/components/common/EditInfo.vue";
+import Alert from "@/components/common/Alert.vue";
 
 const router = useRouter()
 
diff --git a/client/src/pages/Swipe.vue b/client/src/pages/Swipe.vue
index ac1e2ad..2505635 100644
--- a/client/src/pages/Swipe.vue
+++ b/client/src/pages/Swipe.vue
@@ -2,7 +2,7 @@
 
 import {ref} from "vue";
 import {useRouter} from "vue-router";
-import Header from "@/components/Header.vue";
+import Header from "@/components/common/Header.vue";
 
 let inputRef = ref<HTMLInputElement>();