From 60d3c83c22e8dac8e1ace1e14ddd5a15ff0c7799 Mon Sep 17 00:00:00 2001
From: Luke Ogburn <21106956+logburn@users.noreply.github.com>
Date: Thu, 5 Mar 2026 15:51:22 -0500
Subject: [PATCH 1/4] saving

---
 .../employee-beta/notes/EmployeeNotes.vue     |  6 ++
 .../notes/pages/TrainingNotes.vue             | 76 +++++++++++++++++++
 2 files changed, 82 insertions(+)
 create mode 100644 src/components/employee-beta/notes/pages/TrainingNotes.vue

diff --git a/src/components/employee-beta/notes/EmployeeNotes.vue b/src/components/employee-beta/notes/EmployeeNotes.vue
index 098dca043..697b4d671 100644
--- a/src/components/employee-beta/notes/EmployeeNotes.vue
+++ b/src/components/employee-beta/notes/EmployeeNotes.vue
@@ -149,6 +149,7 @@ const emitter = inject('emitter');
 
 // import note pages
 import GeneralNotes from './pages/GeneralNotes.vue';
+import TrainingNotes from './pages/TrainingNotes.vue';
 import PersonalNotes from './pages/PersonalNotes.vue';
 import CareerNotes from './pages/CareerNotes.vue';
 import KudoNotes from './pages/KudoNotes.vue';
@@ -196,6 +197,11 @@ const menuItems = ref([
     key: 'general',
     component: shallowRef(GeneralNotes)
   },
+  {
+    name: 'Training',
+    key: 'training',
+    component: shallowRef(TrainingNotes)
+  },
   {
     name: 'Career',
     key: 'career',
diff --git a/src/components/employee-beta/notes/pages/TrainingNotes.vue b/src/components/employee-beta/notes/pages/TrainingNotes.vue
new file mode 100644
index 000000000..bf169261a
--- /dev/null
+++ b/src/components/employee-beta/notes/pages/TrainingNotes.vue
@@ -0,0 +1,76 @@
+<template>
+  <v-col>
+    <v-progress-linear v-if="!trainings" indeterminate />
+    <p v-else-if="trainings.length === 0">No trainings found for employee.</p>
+    <div v-else>
+      <v-row>
+        <v-col cols="3" class="font-weight-bold">Purchase Date</v-col>
+        <v-col cols="3" class="font-weight-bold">Category</v-col>
+        <v-col cols="6" class="font-weight-bold">Description</v-col>
+      </v-row>
+      <v-row v-for="training in trainings" :key="training.id" class="clickable-row" @click="gotoExpense(training.id)">
+        <v-col cols="3">{{ format(training.purchaseDate, null, 'MMM DD, YYYY') }}</v-col>
+        <v-col cols="3">{{ training.category ?? 'None' }}</v-col>
+        <v-col cols="6">{{ training.description }}</v-col>
+      </v-row>
+    </div>
+  </v-col>
+</template>
+
+<script setup>
+/**
+ * TODO:
+ *  - [ ] make for employee, not user (oops)
+ *  - [ ] button to goto expense in MyExpenses?
+ */
+
+ /*
+
+ {
+ "id": "aa22c281-f87f-4e93-ab62-83274f38b08a",
+ "employeeId": "21769931-4379-4902-ac13-b1f52069cf43",
+ "createdAt": "2025-11-14",
+ "expenseTypeId": "00670837-e7b9-4198-8ed1-f6146d821bfc",
+ "description": "bjnk",
+ "purchaseDate": "2025-11-05T05:00:00.000Z",
+ "showOnFeed": true,
+ "state": "CREATED",
+ "cost": 9,
+ "category": "Certifications,",
+ "receipt": [ "Portal_Report_(Ragnarok_Technologies).xlsx" ] }
+
+ */
+
+import { ref, onMounted } from 'vue';
+import { useStore } from 'vuex';
+import { updateStoreUser } from '@/utils/storeUtils';
+import { format, difference } from '@/shared/dateUtils';
+import api from '@/shared/api';
+
+const props = defineProps(['modelValue', 'user']);
+const notes = ref(props.modelValue);
+const trainings = ref(null);
+const store = useStore();
+
+onMounted(async () => {
+  // fetch all data
+  let { id } = props.user;
+  let [expenses, expenseTypes] = await Promise.all([api.getAllEmployeeExpenses(id), api.getEmployeeExpenseTypes(id)]);
+  // get all training expense type IDs
+  let trainingIds = new Set();
+  for (let et of expenseTypes)
+    if (et.budgetName.toLowerCase().includes('training'))
+      trainingIds.add(et.id);
+  // get all expenses with a training ET ID
+  trainings.value = expenses.filter((e) => trainingIds.has(e.expenseTypeId));
+  trainings.value = trainings.value.sort((a, b) => difference(b.purchaseDate, a.purchaseDate, 'day'));
+});
+</script>
+
+<style scoped>
+.clickable-row:hover {
+  cursor: pointer;
+  background-color: #f0f0f0;
+  border-radius: 0.7em;
+}
+</style>

From f094486fa5af41932ac931edbaaf95548c1d510b Mon Sep 17 00:00:00 2001
From: Luke Ogburn <21106956+logburn@users.noreply.github.com>
Date: Tue, 10 Mar 2026 11:06:30 -0400
Subject: [PATCH 2/4] saving

---
 .../notes/pages/TrainingNotes.vue             | 66 +++++++++++++------
 1 file changed, 47 insertions(+), 19 deletions(-)

diff --git a/src/components/employee-beta/notes/pages/TrainingNotes.vue b/src/components/employee-beta/notes/pages/TrainingNotes.vue
index bf169261a..3f896e095 100644
--- a/src/components/employee-beta/notes/pages/TrainingNotes.vue
+++ b/src/components/employee-beta/notes/pages/TrainingNotes.vue
@@ -1,14 +1,20 @@
 <template>
   <v-col>
-    <v-progress-linear v-if="!trainings" indeterminate />
-    <p v-else-if="trainings.length === 0">No trainings found for employee.</p>
+    <v-progress-linear v-if="!filteredTrainings" indeterminate />
+    <p v-else-if="filteredTrainings.length === 0">No trainings found for employee.</p>
     <div v-else>
+      <v-autocomplete
+        :items="categories"
+        v-model="filters.categories"
+        multiple
+        chips
+      />
       <v-row>
         <v-col cols="3" class="font-weight-bold">Purchase Date</v-col>
         <v-col cols="3" class="font-weight-bold">Category</v-col>
         <v-col cols="6" class="font-weight-bold">Description</v-col>
       </v-row>
-      <v-row v-for="training in trainings" :key="training.id" class="clickable-row" @click="gotoExpense(training.id)">
+      <v-row v-for="training in filteredTrainings" :key="training.id" @click="gotoExpense(training.id)">
         <v-col cols="3">{{ format(training.purchaseDate, null, 'MMM DD, YYYY') }}</v-col>
         <v-col cols="3">{{ training.category ?? 'None' }}</v-col>
         <v-col cols="6">{{ training.description }}</v-col>
@@ -20,8 +26,11 @@
 <script setup>
 /**
  * TODO:
- *  - [ ] make for employee, not user (oops)
- *  - [ ] button to goto expense in MyExpenses?
+ *  - [x] make for employee, not user (oops)
+ *  - [ ] category filter with auto to what they likely want
+ *  - [ ] show training hour conversions
+ *  - [ ] summary of training hours conversions
+ *  - [ ] notes sectiond defauling to desc but editable (do not edit expense, just notes)
  */
 
  /*
@@ -41,7 +50,7 @@
 
  */
 
-import { ref, onMounted } from 'vue';
+import { ref, computed, onMounted } from 'vue';
 import { useStore } from 'vuex';
 import { updateStoreUser } from '@/utils/storeUtils';
 import { format, difference } from '@/shared/dateUtils';
@@ -49,8 +58,10 @@ import api from '@/shared/api';
 
 const props = defineProps(['modelValue', 'user']);
 const notes = ref(props.modelValue);
-const trainings = ref(null);
+const categories = ref([]);
+const filters = ref({ categories: null })
 const store = useStore();
+let trainings = null;
 
 onMounted(async () => {
   // fetch all data
@@ -58,19 +69,36 @@ onMounted(async () => {
   let [expenses, expenseTypes] = await Promise.all([api.getAllEmployeeExpenses(id), api.getEmployeeExpenseTypes(id)]);
   // get all training expense type IDs
   let trainingIds = new Set();
-  for (let et of expenseTypes)
-    if (et.budgetName.toLowerCase().includes('training'))
+  let allCategory = new Set();
+  for (let et of expenseTypes) {
+    if (et.budgetName.toLowerCase().includes('training')) {
       trainingIds.add(et.id);
+      for (let c of et.categories || []) allCategory.add(c.name);
+    }
+  }
+  // get categories
+  categories.value = Array.from(allCategory);
   // get all expenses with a training ET ID
-  trainings.value = expenses.filter((e) => trainingIds.has(e.expenseTypeId));
-  trainings.value = trainings.value.sort((a, b) => difference(b.purchaseDate, a.purchaseDate, 'day'));
+  trainings = expenses.filter((e) => trainingIds.has(e.expenseTypeId));
+  trainings = trainings.sort((a, b) => difference(b.purchaseDate, a.purchaseDate, 'day'));
 });
-</script>
 
-<style scoped>
-.clickable-row:hover {
-  cursor: pointer;
-  background-color: #f0f0f0;
-  border-radius: 0.7em;
-}
-</style>
+const filteredTrainings = computed(() => {
+  if (!trainings) return null;
+
+  let filtered = [];
+  let add = (item) => filtered.push(item);
+  for (let t of trainings) {
+    // categories filter
+    if (!filters.value.categories?.length) add(t);
+    for (let c of filters.value.categories || []) {
+      if (t.category === c) {
+        add(t);
+        continue;
+      }
+    }
+  }
+
+  return filtered;
+});
+</script>

From 61a964cf9aba2a45a85af9526f28f9f96022d797 Mon Sep 17 00:00:00 2001
From: Luke Ogburn <21106956+logburn@users.noreply.github.com>
Date: Fri, 13 Mar 2026 11:00:41 -0400
Subject: [PATCH 3/4] saving

---
 .../notes/pages/TrainingNotes.vue             | 71 +++++++++++++------
 1 file changed, 48 insertions(+), 23 deletions(-)

diff --git a/src/components/employee-beta/notes/pages/TrainingNotes.vue b/src/components/employee-beta/notes/pages/TrainingNotes.vue
index 3f896e095..bf556750e 100644
--- a/src/components/employee-beta/notes/pages/TrainingNotes.vue
+++ b/src/components/employee-beta/notes/pages/TrainingNotes.vue
@@ -1,24 +1,32 @@
 <template>
   <v-col>
     <v-progress-linear v-if="!filteredTrainings" indeterminate />
-    <p v-else-if="filteredTrainings.length === 0">No trainings found for employee.</p>
     <div v-else>
+      <div class="mb-4">
+        <strong>Training Hour Conversions:</strong> ${{ trainingHours.pending.toFixed(2) }} pending, ${{ trainingHours.reimbursed.toFixed(2) }} reimbursed
+      </div>
       <v-autocomplete
         :items="categories"
         v-model="filters.categories"
+        variant="outlined"
+        density="compact"
         multiple
         chips
+        closable-chips
       />
-      <v-row>
-        <v-col cols="3" class="font-weight-bold">Purchase Date</v-col>
-        <v-col cols="3" class="font-weight-bold">Category</v-col>
-        <v-col cols="6" class="font-weight-bold">Description</v-col>
-      </v-row>
-      <v-row v-for="training in filteredTrainings" :key="training.id" @click="gotoExpense(training.id)">
-        <v-col cols="3">{{ format(training.purchaseDate, null, 'MMM DD, YYYY') }}</v-col>
-        <v-col cols="3">{{ training.category ?? 'None' }}</v-col>
-        <v-col cols="6">{{ training.description }}</v-col>
-      </v-row>
+      <div>
+        <v-row>
+          <v-col cols="3" class="font-weight-bold">Purchase Date</v-col>
+          <v-col cols="3" class="font-weight-bold">Category</v-col>
+          <v-col cols="6" class="font-weight-bold">Description</v-col>
+        </v-row>
+        <p v-if="filteredTrainings.length === 0" class="mt-4">No trainings found.</p>
+        <v-row v-else v-for="training in filteredTrainings" :key="training.id" @click="gotoExpense(training.id)">
+          <v-col cols="3">{{ format(training.purchaseDate, null, 'MMM DD, YYYY') }}</v-col>
+          <v-col cols="3">{{ training.category ?? 'None' }}</v-col>
+          <v-col cols="6">{{ training.description }}</v-col>
+        </v-row>
+      </div>
     </div>
   </v-col>
 </template>
@@ -27,10 +35,10 @@
 /**
  * TODO:
  *  - [x] make for employee, not user (oops)
- *  - [ ] category filter with auto to what they likely want
- *  - [ ] show training hour conversions
- *  - [ ] summary of training hours conversions
- *  - [ ] notes sectiond defauling to desc but editable (do not edit expense, just notes)
+ *  - [x] category filter with auto to what they likely want
+ *  - [x] show training hour conversions
+ *  - [x] summary of training hours conversions
+ *  - [ ] notes section defauling to desc but editable (do not edit expense, just notes)
  */
 
  /*
@@ -46,7 +54,8 @@
  "state": "CREATED",
  "cost": 9,
  "category": "Certifications,",
- "receipt": [ "Portal_Report_(Ragnarok_Technologies).xlsx" ] }
+ "receipt": [ "Portal_Report_(Ragnarok_Technologies).xlsx" ]
+ }
 
  */
 
@@ -55,13 +64,17 @@ import { useStore } from 'vuex';
 import { updateStoreUser } from '@/utils/storeUtils';
 import { format, difference } from '@/shared/dateUtils';
 import api from '@/shared/api';
+import { EXPENSE_STATES } from '@/shared/expenseUtils';
 
 const props = defineProps(['modelValue', 'user']);
 const notes = ref(props.modelValue);
 const categories = ref([]);
-const filters = ref({ categories: null })
+const filters = ref({
+  categories: ['Certifications', 'Training', 'Exchange for Training Hours', 'Conferences']
+})
 const store = useStore();
-let trainings = null;
+let trainings = ref(null);
+const trainingHours = ref({ pending: 0, reimbursed: 0 })
 
 onMounted(async () => {
   // fetch all data
@@ -73,22 +86,34 @@ onMounted(async () => {
   for (let et of expenseTypes) {
     if (et.budgetName.toLowerCase().includes('training')) {
       trainingIds.add(et.id);
-      for (let c of et.categories || []) allCategory.add(c.name);
+      for (let c of et.categories || []) {
+        // add to category list
+        allCategory.add(c.name);
+      }
     }
   }
+
+  // get exchanges for training hours
+  for (let e of expenses) {
+    if (e.category?.toLowerCase() === 'exchange for training hours') {
+      if (e.state === EXPENSE_STATES.REIMBURSED) trainingHours.value.reimbursed += e.cost;
+      else trainingHours.value.pending += e.cost
+    }
+  }
+
   // get categories
   categories.value = Array.from(allCategory);
   // get all expenses with a training ET ID
-  trainings = expenses.filter((e) => trainingIds.has(e.expenseTypeId));
-  trainings = trainings.sort((a, b) => difference(b.purchaseDate, a.purchaseDate, 'day'));
+  trainings.value = expenses.filter((e) => trainingIds.has(e.expenseTypeId));
+  trainings.value = trainings.value.sort((a, b) => difference(b.purchaseDate, a.purchaseDate, 'day'));
 });
 
 const filteredTrainings = computed(() => {
-  if (!trainings) return null;
+  if (!trainings.value) return null;
 
   let filtered = [];
   let add = (item) => filtered.push(item);
-  for (let t of trainings) {
+  for (let t of trainings.value) {
     // categories filter
     if (!filters.value.categories?.length) add(t);
     for (let c of filters.value.categories || []) {

From 27ae8194cf8b3c8b794aeac87b28ecef7934d5d9 Mon Sep 17 00:00:00 2001
From: Luke Ogburn <21106956+logburn@users.noreply.github.com>
Date: Fri, 13 Mar 2026 15:05:28 -0400
Subject: [PATCH 4/4] done

---
 .../employee-beta/notes/EmployeeNotes.vue     |  3 +
 .../notes/pages/TrainingNotes.vue             | 57 +++++++++++++++++--
 2 files changed, 56 insertions(+), 4 deletions(-)

diff --git a/src/components/employee-beta/notes/EmployeeNotes.vue b/src/components/employee-beta/notes/EmployeeNotes.vue
index 697b4d671..6a464e420 100644
--- a/src/components/employee-beta/notes/EmployeeNotes.vue
+++ b/src/components/employee-beta/notes/EmployeeNotes.vue
@@ -182,6 +182,9 @@ const notesTemplate = {
     },
     kudos: {
       custom: []
+    },
+    training: {
+      expenses: {}
     }
   }
 };
diff --git a/src/components/employee-beta/notes/pages/TrainingNotes.vue b/src/components/employee-beta/notes/pages/TrainingNotes.vue
index bf556750e..11d981fae 100644
--- a/src/components/employee-beta/notes/pages/TrainingNotes.vue
+++ b/src/components/employee-beta/notes/pages/TrainingNotes.vue
@@ -8,6 +8,7 @@
       <v-autocomplete
         :items="categories"
         v-model="filters.categories"
+        label="Filter by category"
         variant="outlined"
         density="compact"
         multiple
@@ -21,10 +22,28 @@
           <v-col cols="6" class="font-weight-bold">Description</v-col>
         </v-row>
         <p v-if="filteredTrainings.length === 0" class="mt-4">No trainings found.</p>
-        <v-row v-else v-for="training in filteredTrainings" :key="training.id" @click="gotoExpense(training.id)">
+        <v-row v-else v-for="training in filteredTrainings" :key="training.id">
           <v-col cols="3">{{ format(training.purchaseDate, null, 'MMM DD, YYYY') }}</v-col>
           <v-col cols="3">{{ training.category ?? 'None' }}</v-col>
-          <v-col cols="6">{{ training.description }}</v-col>
+          <v-col cols="6"  v-if="editing[training.id]" class="py-1">
+            <v-textarea
+              v-model="notes.expenses[training.id]"
+              variant="outlined"
+              density="compact"
+              class="pa-0"
+              rows="1"
+              append-inner-icon="mdi-content-save"
+              @click:append-inner="editing[training.id] = false"
+              @blur="editing[training.id] = false"
+              @keydown.enter="editing[training.id] = false"
+              hide-details
+              auto-grow
+              autofocus
+            />
+          </v-col>
+          <v-col cols="6" v-else @click="editDesc(training)" :class="(getDesc(training)?.modified ? 'font-italic' : '') + ' editable-desc'">
+            {{ getDesc(training)?.text }}
+          </v-col>
         </v-row>
       </div>
     </div>
@@ -38,7 +57,7 @@
  *  - [x] category filter with auto to what they likely want
  *  - [x] show training hour conversions
  *  - [x] summary of training hours conversions
- *  - [ ] notes section defauling to desc but editable (do not edit expense, just notes)
+ *  - [ ] notes section defaulting to desc but editable (do not edit expense, just notes)
  */
 
  /*
@@ -70,11 +89,12 @@ const props = defineProps(['modelValue', 'user']);
 const notes = ref(props.modelValue);
 const categories = ref([]);
 const filters = ref({
-  categories: ['Certifications', 'Training', 'Exchange for Training Hours', 'Conferences']
+  categories: ['Certifications', 'Certifications,', 'Training', 'Exchange for Training Hours', 'Conferences']
 })
 const store = useStore();
 let trainings = ref(null);
 const trainingHours = ref({ pending: 0, reimbursed: 0 })
+const editing = ref({});
 
 onMounted(async () => {
   // fetch all data
@@ -93,6 +113,11 @@ onMounted(async () => {
     }
   }
 
+  // Remove non-existant categories from auto-filled categories
+  for (let i = 0; i < filters.value.categories.length; i++)
+    if (!allCategory.has(filters.value.categories[i]))
+      filters.value.categories.splice(i--, 1);
+
   // get exchanges for training hours
   for (let e of expenses) {
     if (e.category?.toLowerCase() === 'exchange for training hours') {
@@ -108,6 +133,18 @@ onMounted(async () => {
   trainings.value = trainings.value.sort((a, b) => difference(b.purchaseDate, a.purchaseDate, 'day'));
 });
 
+function editDesc(training) {
+  notes.value.expenses[training.id] ??= training.description;
+  editing.value[training.id] = true;
+}
+
+function getDesc(training) {
+  let note = notes.value.expenses[training.id];
+  if (note && note !== '') return { text: note, modified: true }; 
+  if (!training.description || training.description === '') return { text: 'No description', modified: true };
+  return { text: training.description, modifed: false };
+}
+
 const filteredTrainings = computed(() => {
   if (!trainings.value) return null;
 
@@ -127,3 +164,15 @@ const filteredTrainings = computed(() => {
   return filtered;
 });
 </script>
+
+<style scoped>
+.editable-desc:hover {
+  cursor: pointer;
+  background-color: #eee;
+  border-radius: 0.7em;
+}
+input[type="text"].v-field__input {
+  color: red !important;
+  padding-left: 0;
+}
+</style>