From a6ebec51182aebe60bda75d98b51a89386db24b0 Mon Sep 17 00:00:00 2001
From: cproudlock <cproudlock@localhost>
Date: Mon, 13 Jul 2026 13:49:33 -0400
Subject: [PATCH] Employee profile: cap USB checkout history with a show-more
 toggle

USB Checkout History rendered every record unbounded (long table for heavy
users), inconsistent with the recognitions list right above it. Add the same
limit (10) + "Show N more" / "Show less" toggle recognitions use. Client-side
only; no API change (per-user history is small at current scale).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 .../src/views/employees/EmployeeDetail.vue    | 26 ++++++++++++++++++-
 1 file changed, 25 insertions(+), 1 deletion(-)

diff --git a/frontend/src/views/employees/EmployeeDetail.vue b/frontend/src/views/employees/EmployeeDetail.vue
index ed769bb..76f55da 100644
--- a/frontend/src/views/employees/EmployeeDetail.vue
+++ b/frontend/src/views/employees/EmployeeDetail.vue
@@ -115,7 +115,7 @@
               </tr>
             </thead>
             <tbody>
-              <tr v-for="record in checkoutHistory" :key="record.log_id">
+              <tr v-for="record in displayedHistory" :key="record.log_id">
                 <td>
                   <router-link :to="`/usb/${record.device_id}`">
                     {{ record.device_id }}
@@ -126,6 +126,20 @@
               </tr>
             </tbody>
           </table>
+          <button
+            v-if="checkoutHistory.length > historyLimit && !showAllHistory"
+            class="btn btn-secondary show-more-btn"
+            @click="showAllHistory = true"
+          >
+            Show {{ checkoutHistory.length - historyLimit }} more
+          </button>
+          <button
+            v-if="showAllHistory && checkoutHistory.length > historyLimit"
+            class="btn btn-secondary show-more-btn"
+            @click="showAllHistory = false"
+          >
+            Show less
+          </button>
         </div>
       </div>
     </template>
@@ -163,6 +177,16 @@ const displayedRecognitions = computed(() => {
   return recognitions.value.slice(0, recognitionsLimit)
 })
 
+const historyLimit = 10
+const showAllHistory = ref(false)
+
+const displayedHistory = computed(() => {
+  if (showAllHistory.value) {
+    return checkoutHistory.value
+  }
+  return checkoutHistory.value.slice(0, historyLimit)
+})
+
 const fullName = computed(() => {
   if (!employee.value) return ''
   return `${employee.value.First_Name?.trim() || ''} ${employee.value.Last_Name?.trim() || ''}`.trim()