From 7aa3905b22689f77c9475df8fce146f21dabce79 Mon Sep 17 00:00:00 2001
From: Max D <max@Maxs-MacBook-Air.local>
Date: Wed, 13 Aug 2025 10:59:38 -0400
Subject: [PATCH 1/2] saving changes

---
 src/views/ExpenseHistory.vue | 30 +++++-------------------------
 1 file changed, 5 insertions(+), 25 deletions(-)

diff --git a/src/views/ExpenseHistory.vue b/src/views/ExpenseHistory.vue
index cfa9a5ac4..ce6749b83 100644
--- a/src/views/ExpenseHistory.vue
+++ b/src/views/ExpenseHistory.vue
@@ -28,11 +28,6 @@
     <div>
       <v-card>
         <v-card-title class="beta_header_style">Expense at {{ date }}</v-card-title>
-        <!-- <v-data-table :headers="headers" :items="displayAudits" :loading="loading.audits" multi-sort>
-          <template #loading>
-            <v-skeleton-loader type="table-row" />
-          </template>
-        </v-data-table> -->
         <v-card-text class="mt-2"
           ><v-row
             ><v-col
@@ -69,11 +64,6 @@ const before = ref(null);
 const after = ref(null);
 const expenseId = ref(null);
 
-/**
- * A row in the data table that represents a notification audit
- * @typedef {Notification & { name: string, date: string }} NotificationRow
- */
-
 // *✫✮❆✦✯✿✧✩❄✬✭❀✫✮❆✦✯✿✧✩❄✬✭❀✫✮❆✦✯✿✧✩❄✬✭❀✫✮❆✦✯✿✧✩❄✬✭❀✫*
 // ❃                                                 ❃
 // ❇                      STATE                      ❇
@@ -84,16 +74,11 @@ const expenseId = ref(null);
 // To load more data, the user must click the search button, which queries the database based on these filters.
 const filters = reactive({
   search: '',
-  auditType: 'Notification',
+  auditType: 'crud',
   startDate: null,
-  endDate: null,
-  notifType: 'None'
+  endDate: null
 });
 
-/**
- * Currently loaded audits
- * @type {import('vue').Ref<NotificationRow[]>}
- */
 const loadedAudits = ref([]);
 
 // *✫✮❆✦✯✿✧✩❄✬✭❀✫✮❆✦✯✿✧✩❄✬✭❀✫✮❆✦✯✿✧✩❄✬✭❀✫✮❆✦✯✿✧✩❄✬✭❀✫*
@@ -102,10 +87,6 @@ const loadedAudits = ref([]);
 // ❉                                                 ❉
 // *✫✮❆✦✯✿✧✩❄✬✭❀✫✮❆✦✯✿✧✩❄✬✭❀✫✮❆✦✯✿✧✩❄✬✭❀✫✮❆✦✯✿✧✩❄✬✭❀✫*
 
-/**
- * Sublist of loaded audits, filtered by the table search filter
- * @type {NotificationRow[]}
- * */
 const displayAudits = ref(loadedAudits.value);
 
 // display skeletons for components when loading
@@ -151,7 +132,6 @@ async function query() {
   loading.audits = true;
 
   // convert string audit type to database compatible type
-  //let realType = AuditType.CRUD;
 
   const res = await api.getCrudAudits({
     startDate: filters.startDate,
@@ -178,7 +158,7 @@ async function query() {
         return {
           ...audit,
           name: `${emp.firstName} ${emp.lastName}`,
-          date: dayjs(audit.createdAt).format('MM/DD/YYYY HH:mm')
+          date: dayjs(audit.createdAt).format('MM/DD/YYYY')
         };
       });
 
@@ -197,7 +177,7 @@ function filterDisplayAudits() {
   displayAudits.value = loadedAudits.value.filter((audit) => {
     let valid = true;
 
-    if (audit.tableItemId !== expenseId.value) {
+    if (audit?.tableItemId !== expenseId.value) {
       valid = false;
     }
 
@@ -228,7 +208,7 @@ function determineStatus(audit) {
 // *✫✮❆✦✯✿✧✩❄✬✭❀✫✮❆✦✯✿✧✩❄✬✭❀✫✮❆✦✯✿✧✩❄✬✭❀✫✮❆✦✯✿✧✩❄✬✭❀✫*
 
 onBeforeMount(async () => {
-  query(); // load table data
+  await query(); // load table data
   loading.graph = false; // TODO: load graph
 });
 

From b348e428292de0b5207c8943bf3f90efc984348c Mon Sep 17 00:00:00 2001
From: Max D <max@Maxs-MacBook-Air.local>
Date: Wed, 3 Sep 2025 10:51:31 -0400
Subject: [PATCH 2/2] saving changes 2

---
 src/views/ExpenseHistory.vue | 129 +++++++++++++++++++++++++----------
 1 file changed, 92 insertions(+), 37 deletions(-)

diff --git a/src/views/ExpenseHistory.vue b/src/views/ExpenseHistory.vue
index ce6749b83..b7318231d 100644
--- a/src/views/ExpenseHistory.vue
+++ b/src/views/ExpenseHistory.vue
@@ -25,20 +25,35 @@
         </v-container>
       </v-card>
     </div>
-    <div>
+    <div v-show="oldImage || newImage">
       <v-card>
-        <v-card-title class="beta_header_style">Expense at {{ date }}</v-card-title>
+        <v-card-title class="beta_header_style">Expense {{ status }} at {{ date }}</v-card-title>
         <v-card-text class="mt-2"
-          ><v-row
+          ><v-row v-if="!oldImage"
             ><v-col
-              ><b>Expense Status</b>
-              <div>{{ status }}</div></v-col
+              ><b>Original Expense Details</b>
+              <div v-for="data in after" :key="data.purchaseDate">{{ data }}</div></v-col
+            ></v-row
+          >
+          <v-row v-else-if="!newImage"
             ><v-col
-              ><b>Before</b>
+              ><b>Final Expense Details</b>
               <div v-for="data in before" :key="data.purchaseDate">{{ data }}</div></v-col
+            ></v-row
+          >
+          <v-row v-else
             ><v-col
-              ><b>After</b>
-              <div v-for="data in after" :key="data.purchaseDate">{{ data }}</div></v-col
+              ><b>Old Expense Details</b>
+              <div v-for="data in before" :key="data.purchaseDate">{{ data }}</div></v-col
+            ><v-col
+              ><b>Expense Detail Changes</b>
+              <div
+                :style="change.includes(data) ? 'background-color: yellow' : ''"
+                v-for="data in after"
+                :key="data.purchaseDate"
+              >
+                {{ data }}
+              </div></v-col
             ></v-row
           ></v-card-text
         >
@@ -50,7 +65,7 @@
 <script setup>
 import { AxiosError } from 'axios';
 import dayjs from 'dayjs';
-import { onBeforeMount, onMounted, reactive, ref, watch } from 'vue';
+import { onBeforeMount, reactive, ref, watch } from 'vue';
 import { useStore } from 'vuex';
 import api from '../shared/api';
 import { updateStoreEmployees } from '../utils/storeUtils';
@@ -61,8 +76,11 @@ const store = useStore();
 const date = ref(null);
 const status = ref(null);
 const before = ref(null);
+const change = ref([]);
 const after = ref(null);
 const expenseId = ref(null);
+const oldImage = ref(null);
+const newImage = ref(null);
 
 // *✫✮❆✦✯✿✧✩❄✬✭❀✫✮❆✦✯✿✧✩❄✬✭❀✫✮❆✦✯✿✧✩❄✬✭❀✫✮❆✦✯✿✧✩❄✬✭❀✫*
 // ❃                                                 ❃
@@ -102,31 +120,79 @@ const loading = reactive({
 // *✫✮❆✦✯✿✧✩❄✬✭❀✫✮❆✦✯✿✧✩❄✬✭❀✫✮❆✦✯✿✧✩❄✬✭❀✫✮❆✦✯✿✧✩❄✬✭❀✫*
 
 /**
+ * Finds the changes from audit to audit and store them
+ */
+function findChanges(beforeAudit, afterAudit) {
+  change.value = [];
+  beforeAudit.forEach((detail, index) => {
+    if (!(detail === afterAudit[index])) {
+      change.value.push(afterAudit[index]);
+    }
+  });
+}
+
+/**
+ * Handles the audit details view based on what kind of audit it is
  *
- *
- * @param data the data at that specific point in the expense
+ * @param audit the audit at that specific point in the expense
  */
 function handleClick(audit) {
   date.value = audit.date;
-  status.value = determineStatus(audit);
-  let oldImage = audit.oldImage;
-  let newImage = audit.newImage;
-  before.value = [
-    oldImage?.cost || '',
-    oldImage?.description || '',
-    oldImage?.purchaseDate || '',
-    oldImage?.showOnFeed || ''
-  ];
-  after.value = [
-    newImage?.cost || '',
-    newImage?.description || '',
-    newImage?.purchaseDate || '',
-    newImage?.showOnFeed || ''
-  ];
+  status.value = determineStatus(audit).toLowerCase();
+  oldImage.value = audit.oldImage;
+  newImage.value = audit.newImage;
+  if (!oldImage.value) {
+    //for created expense audits
+    let employee = getEmployeeByID(newImage.value.employeeId, store.getters.employees);
+    after.value = [
+      'Expense Owner: ' + employee.firstName + ' ' + employee.lastName,
+      'Expense Creator: ' + audit.name,
+      'Category: ' + newImage.value.category,
+      'Cost: $' + newImage.value.cost,
+      'Purchase Date: ' + dayjs(newImage.value.purchaseDate).format('MM/DD/YYYY'),
+      'Description: ' + newImage.value.description,
+      'Show On Feed: ' + newImage.value.showOnFeed
+    ];
+  } else if (!newImage.value) {
+    //for deleted expense audits
+    let employee = getEmployeeByID(oldImage.value.employeeId, store.getters.employees);
+    before.value = [
+      'Expense Owner: ' + employee.firstName + ' ' + employee.lastName,
+      'Expense Deleter: ' + audit.name,
+      'Category: ' + oldImage.value.category,
+      'Cost: $' + oldImage.value.cost,
+      'Purchase Date: ' + dayjs(oldImage.value.purchaseDate).format('MM/DD/YYYY'),
+      'Description: ' + oldImage.value.description,
+      'Show On Feed: ' + oldImage.value.showOnFeed
+    ];
+  } else {
+    //for updated expense audits
+    let employee = getEmployeeByID(oldImage.value.employeeId, store.getters.employees);
+    before.value = [
+      'Expense Owner: ' + employee.firstName + ' ' + employee.lastName,
+      'Expense Updater: ' + audit.name,
+      'Category: ' + oldImage.value.category,
+      'Cost: $' + oldImage.value.cost,
+      'Purchase Date: ' + dayjs(oldImage.value.purchaseDate).format('MM/DD/YYYY'),
+      'Description: ' + oldImage.value.description,
+      'Show On Feed: ' + oldImage.value.showOnFeed
+    ];
+    after.value = [
+      'Expense Owner: ' + employee.firstName + ' ' + employee.lastName,
+      'Expense Updater: ' + audit.name,
+      'Category: ' + newImage.value.category,
+      'Cost: $' + newImage.value.cost,
+      'Purchase Date: ' + dayjs(newImage.value.purchaseDate).format('MM/DD/YYYY'),
+      'Description: ' + newImage.value.description,
+      'Show On Feed: ' + newImage.value.showOnFeed
+    ];
+    findChanges(before.value, after.value);
+  }
 }
 
 /**
  * Queries the database based on the current filters
+ * (TEMP) currently only grabs the most recent expense audit and any audits relating to that expense
  */
 async function query() {
   loading.audits = true;
@@ -212,13 +278,6 @@ onBeforeMount(async () => {
   loading.graph = false; // TODO: load graph
 });
 
-onMounted(() => {
-  date.value = loadedAudits.value[0];
-  status.value = loadedAudits.value[0];
-  before.value = ['Before'];
-  after.value = ['After'];
-});
-
 // *✫✮❆✦✯✿✧✩❄✬✭❀✫✮❆✦✯✿✧✩❄✬✭❀✫✮❆✦✯✿✧✩❄✬✭❀✫✮❆✦✯✿✧✩❄✬✭❀✫*
 // ❃                                                 ❃
 // ❇                    WATCHERS                     ❇
@@ -238,8 +297,6 @@ watch(filters, filterDisplayAudits, { deep: true });
   gap: 16px;
 }
 
-#control-panel,
-#graphs,
 #table {
   width: 100%;
   padding: 0px;
@@ -251,8 +308,6 @@ watch(filters, filterDisplayAudits, { deep: true });
   gap: 8px;
 }
 
-#control-panel > *.v-card-title,
-#graphs > *.v-card-title,
 #table > *.v-card-title {
   width: 100%;
   display: flex;