From c24c9935d92d30ce7cbad70e8276634e71163016 Mon Sep 17 00:00:00 2001
From: Cameron Bowler <cameron.bowler@ca.ey.com>
Date: Wed, 3 Jul 2024 15:28:02 -0700
Subject: [PATCH 1/3] Home Descriptions History

---
 ppr-ui/package-lock.json                      |   6 +-
 ppr-ui/package.json                           |   2 +-
 ppr-ui/src/components/common/SimpleTable.vue  | 127 ++++++++++-
 .../src/components/common/TabbedContainer.vue |   3 -
 .../mhrHistory/MhrHistoryDescription.vue      | 200 ++++++++++++++++++
 ppr-ui/src/components/mhrHistory/index.ts     |   1 +
 .../table-headers-interface.ts                |   5 +-
 .../mhr-api-interfaces/MhrHistoryIF.ts        |  30 +--
 .../mhr-history/mhHistoryTableHeaders.ts      |  24 ++-
 .../src/views/mhrInformation/MhrHistory.vue   |  16 +-
 ppr-ui/tests/unit/SimpleTable.spec.ts         |  62 +++++-
 11 files changed, 424 insertions(+), 52 deletions(-)
 create mode 100644 ppr-ui/src/components/mhrHistory/MhrHistoryDescription.vue
 create mode 100644 ppr-ui/src/components/mhrHistory/index.ts

diff --git a/ppr-ui/package-lock.json b/ppr-ui/package-lock.json
index eedc675cd..83b8e1f57 100644
--- a/ppr-ui/package-lock.json
+++ b/ppr-ui/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "ppr-ui",
-  "version": "3.2.30",
+  "version": "3.2.31",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "ppr-ui",
-      "version": "3.2.30",
+      "version": "3.2.31",
       "dependencies": {
         "@bcrs-shared-components/input-field-date-picker": "^1.0.0",
         "@lemoncode/fonk": "^1.5.1",
@@ -16263,4 +16263,4 @@
       "dev": true
     }
   }
-}
\ No newline at end of file
+}
diff --git a/ppr-ui/package.json b/ppr-ui/package.json
index 69bd79d7f..4570e7885 100644
--- a/ppr-ui/package.json
+++ b/ppr-ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ppr-ui",
-  "version": "3.2.30",
+  "version": "3.2.31",
   "private": true,
   "appName": "Assets UI",
   "sbcName": "SBC Common Components",
diff --git a/ppr-ui/src/components/common/SimpleTable.vue b/ppr-ui/src/components/common/SimpleTable.vue
index f08420810..c45f3d517 100644
--- a/ppr-ui/src/components/common/SimpleTable.vue
+++ b/ppr-ui/src/components/common/SimpleTable.vue
@@ -12,28 +12,139 @@
       </tr>
     </thead>
     <tbody>
-      <tr
-        v-for="(item, index) in tableData"
-        :key="`${item.name}-${index}`"
+      <template
+        v-for="(item, rowIndex) in tableData"
+        :key="`${item.name}-${rowIndex}`"
       >
-        <td>{{ item.name }}</td>
-      </tr>
+        <tr>
+          <td
+            v-for="(header, colIndex) in tableHeaders"
+            :key="`cell-${rowIndex}-${colIndex}`"
+            :class="{ 'font-weight-bold' : colIndex === 1, 'expanded-row-cell' : expandRow[rowIndex] }"
+          >
+            <v-btn
+              v-if="colIndex === 0"
+              class="toggle-expand-row-btn"
+              color="primary"
+              variant="plain"
+              :ripple="false"
+              @click="toggleRowState(rowIndex)"
+            >
+              <v-btn
+                class="icon-medium"
+                color="primary"
+                size="x-small"
+                icon
+                :ripple="false"
+              >
+                <v-icon class="hide-show-chevron">
+                  {{ expandRow[rowIndex] ? 'mdi-chevron-up' : 'mdi-chevron-down' }}
+                </v-icon>
+              </v-btn>
+              <span class="generic-link pl-1">
+                {{ expandRow[rowIndex] ? 'Hide' : 'View' }} {{ rowLabel }}
+              </span>
+            </v-btn>
+            <span v-else>{{ getItemValue(item, header.value) }}</span>
+          </td>
+        </tr>
+        <tr
+          v-if="expandRow[rowIndex]"
+          class="content-slot-row"
+        >
+          <td />
+          <td :colspan="tableHeaders.length">
+            <slot
+              name="content-slot"
+              :content="tableData[rowIndex]"
+            />
+          </td>
+        </tr>
+      </template>
     </tbody>
   </v-table>
 </template>
 
 <script setup lang="ts">
+import { ref } from 'vue'
+import { isObject } from 'lodash'
+import { shortPacificDate } from '@/utils'
+import { BaseHeaderIF } from '@/interfaces'
+
 /** Props **/
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 const props = withDefaults(defineProps<{
-  tableHeaders: Array<any>,
-  tableData: Array<any>
+  tableHeaders?: Array<BaseHeaderIF>,
+  tableData?: Array<any>,
+  rowLabel: string
 }>(), {
   tableHeaders: null,
-  tableData: null
+  tableData: null,
+  rowLabel: ''
 })
 
+const expandRow = ref([])
+
+/** Toggle expanded state of rows **/
+const toggleRowState = (index: number) => {
+  expandRow.value[index] = !expandRow.value[index]
+}
+
+/**
+ * Retrieves nested values from an object based on an array of dot-separated value paths.
+ * Handles array indexing within the paths and formats date values if 'date' is included in the value path.
+ * Allows combining multiple values into a single return value.
+ *
+ * @param {Object} item - The object to retrieve the values from.
+ * @param {Array<string>|string} valuePaths - The array of dot-separated paths specifying the values to retrieve, or a
+ * single path as a string.
+ * @returns {string} - The combined values retrieved from the specified paths, or an empty string if none are found.
+ */
+const getItemValue = (item: object, valuePaths: Array<string> | string): string => {
+
+  const retrieveValue = (path) => {
+    if (!path) return ''
+
+    // Function to retrieve a single value from the item based on a path
+    const result = path.split('.').reduce((result, key) => {
+      if (result && isObject(result)) {
+        // Handle array indexing in the path (e.g., sections[0].serialNumber)
+        if (key.includes('[')) {
+          const [mainKey, index] = key.split(/\[|\]/).filter(Boolean)
+          return result[mainKey]?.[parseInt(index)]
+        }
+        // Otherwise, retrieve the nested value
+        return result[key]
+      }
+      // Return empty string if the path is invalid
+      return ''
+    }, item)
+
+    // Format the value as a date if the path includes 'date'
+    if (path.toLowerCase().includes('date') && result) {
+      return shortPacificDate(result)
+    }
+
+    return result
+  }
+
+  // If valuePaths is an array, retrieve and concatenate values for each path
+  if (Array.isArray(valuePaths)) {
+    return valuePaths.map(retrieveValue).filter(Boolean).join(' ')
+  }
+
+  // Otherwise, retrieve the single value
+  return retrieveValue(valuePaths)
+}
+
 </script>
 <style lang="scss" scoped>
 @import '@/assets/styles/theme';
+.expanded-row-cell {
+  border-bottom: 0!important;
+}
+.hide-show-chevron {
+  margin-top: -1px;
+  margin-right: -1px;
+}
 </style>
diff --git a/ppr-ui/src/components/common/TabbedContainer.vue b/ppr-ui/src/components/common/TabbedContainer.vue
index 490152cbe..7af0be662 100644
--- a/ppr-ui/src/components/common/TabbedContainer.vue
+++ b/ppr-ui/src/components/common/TabbedContainer.vue
@@ -91,7 +91,4 @@ const tab = ref(0)
   max-height: 55px;
   margin: 0 2.5px;
 }
-.v-window {
-  min-height: 400px
-}
 </style>
diff --git a/ppr-ui/src/components/mhrHistory/MhrHistoryDescription.vue b/ppr-ui/src/components/mhrHistory/MhrHistoryDescription.vue
new file mode 100644
index 000000000..7a88608e4
--- /dev/null
+++ b/ppr-ui/src/components/mhrHistory/MhrHistoryDescription.vue
@@ -0,0 +1,200 @@
+<template>
+  <section
+    id="mhr-history-description"
+    class="pr-4"
+  >
+    <v-row class="ma-0">
+      <v-col
+        cols="3"
+        class="pl-0"
+      >
+        <h4>Year of Manufacture</h4>
+      </v-col>
+      <v-col>
+        <p>{{ content?.baseInformation?.year || '(Not Entered)' }}</p>
+      </v-col>
+    </v-row>
+
+    <v-row
+      v-if="content?.csaNumber"
+      noGutters
+      class="py-3"
+    >
+      <v-col cols="3">
+        <h4>CSA Number</h4>
+      </v-col>
+      <v-col
+        cols="6"
+        class="pl-3"
+      >
+        <p>{{ content?.csaNumber || '(Not Entered)' }}</p>
+      </v-col>
+      <v-col cols="3">
+        <h4>CSA Standard</h4>
+      </v-col>
+      <v-col
+        cols="6"
+        class="pl-3"
+      >
+        <p>{{ content?.csaStandard || '(Not Entered)' }}</p>
+      </v-col>
+    </v-row>
+
+    <v-row
+      v-else-if="content?.engineerName"
+      noGutters
+      class="py-3"
+    >
+      <v-col cols="3">
+        <h4>Engineer's Name</h4>
+      </v-col>
+      <v-col
+        cols="6"
+        class="pl-3"
+      >
+        <p>{{ content?.engineerName || '(Not Entered)' }}</p>
+      </v-col>
+      <v-col cols="3">
+        <h4>Date of Engineer's Report</h4>
+      </v-col>
+      <v-col
+        cols="6"
+        class="pl-3"
+      >
+        <p>{{ shortPacificDate(content?.engineerDate) || '(Not Entered)' }}</p>
+      </v-col>
+    </v-row>
+
+    <v-row
+      v-else
+      noGutters
+      class="py-3"
+    >
+      <v-col cols="3">
+        <h4>Home Certification</h4>
+      </v-col>
+      <v-col class="pl-3">
+        <p>{{ 'There is no certification available for this home.' }}</p>
+      </v-col>
+    </v-row>
+
+    <v-row class="ma-0">
+      <v-col
+        cols="12"
+        class="pl-0"
+      >
+        <h4>Home Sections</h4>
+        <HomeSectionsTable
+          class="mt-n3"
+          :homeSections="content?.sections"
+          :isReviewMode="true"
+        />
+      </v-col>
+    </v-row>
+
+    <v-row class="ma-0">
+      <v-col
+        cols="3"
+        class="pl-0"
+      >
+        <h4>Rebuilt Status</h4>
+      </v-col>
+      <v-col>
+        <p>{{ content?.rebuiltRemarks || '(Not Entered)' }}</p>
+      </v-col>
+    </v-row>
+
+    <v-row class="ma-0">
+      <v-col
+        cols="3"
+        class="pl-0"
+      >
+        <h4>Other Information</h4>
+      </v-col>
+      <v-col>
+        <p>{{ content?.otherRemarks || '(Not Entered)' }}</p>
+      </v-col>
+    </v-row>
+
+    <v-row
+      noGutters
+      class="py-6 condensed-row"
+    >
+      <v-col cols="3">
+        <h4>Registration Date</h4>
+      </v-col>
+      <v-col
+        cols="6"
+        class="pl-3"
+      >
+        <p>{{ shortPacificDate(content?.createDateTime) || '(Not Entered)' }}</p>
+      </v-col>
+      <v-col cols="3">
+        <h4>Document Type</h4>
+      </v-col>
+      <v-col
+        cols="6"
+        class="pl-3"
+      >
+        <p>{{ content?.registrationDescription || '(Not Entered)' }}</p>
+      </v-col>
+      <v-col cols="3">
+        <h4>Registration Number</h4>
+      </v-col>
+      <v-col
+        cols="6"
+        class="pl-3"
+      >
+        <p>{{ content?.documentRegistrationNumber || '(Not Entered)' }}</p>
+      </v-col>
+      <v-col cols="3">
+        <h4>Document ID</h4>
+      </v-col>
+      <v-col
+        cols="6"
+        class="pl-3"
+      >
+        <p>{{ content?.documentId || '(Not Entered)' }}</p>
+      </v-col>
+    </v-row>
+  </section>
+</template>
+
+<script setup lang="ts">
+import { HomeSectionsTable } from '@/components/tables/mhr'
+import { DescriptionIF } from '@/interfaces'
+import { shortPacificDate } from '@/utils'
+
+/** Props **/
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const props = withDefaults(defineProps<{
+  content: DescriptionIF
+}>(), {
+  content: null
+})
+
+</script>
+<style lang="scss" scoped>
+@import '@/assets/styles/theme';
+.v-row {
+  min-height: 65px;
+  border-top: 1px solid $gray3;
+}
+p {
+  line-height: 2.25rem;
+}
+.condensed-row {
+  p, h4 {
+    line-height: 1.5rem;
+  }
+}
+:deep(.v-col-3) {
+  flex: 0 0 26.25%;
+  max-width: 26.25%;
+}
+:deep(#mh-home-sections-table) {
+  .column-mdl {
+    width: 26.25%
+  }
+}
+</style>
diff --git a/ppr-ui/src/components/mhrHistory/index.ts b/ppr-ui/src/components/mhrHistory/index.ts
new file mode 100644
index 000000000..3c76de619
--- /dev/null
+++ b/ppr-ui/src/components/mhrHistory/index.ts
@@ -0,0 +1 @@
+export { default as MhrHistoryDescription } from './MhrHistoryDescription.vue'
diff --git a/ppr-ui/src/interfaces/data-table-interfaces/table-headers-interface.ts b/ppr-ui/src/interfaces/data-table-interfaces/table-headers-interface.ts
index 0d507c9ed..6b03f9e9a 100644
--- a/ppr-ui/src/interfaces/data-table-interfaces/table-headers-interface.ts
+++ b/ppr-ui/src/interfaces/data-table-interfaces/table-headers-interface.ts
@@ -1,8 +1,9 @@
 import { APISearchTypes } from '@/enums'
 
 export interface BaseHeaderIF {
-    text: string
-    value: string
+    name?: string
+    text?: string
+    value: string|Array<string>
     class?: string
     sortable?: boolean
     width?: string
diff --git a/ppr-ui/src/interfaces/mhr-api-interfaces/MhrHistoryIF.ts b/ppr-ui/src/interfaces/mhr-api-interfaces/MhrHistoryIF.ts
index 26b38fc6b..6e178fb86 100644
--- a/ppr-ui/src/interfaces/mhr-api-interfaces/MhrHistoryIF.ts
+++ b/ppr-ui/src/interfaces/mhr-api-interfaces/MhrHistoryIF.ts
@@ -1,10 +1,12 @@
-interface Description {
+export interface DescriptionIF {
   baseInformation?: {
     circa?: boolean
     make?: string
     model?: string
     year?: number
   }
+  engineerName?: string
+  engineerDate?: string
   createDateTime?: string
   csaNumber?: string
   csaStandard?: string
@@ -15,11 +17,11 @@ interface Description {
   rebuiltRemarks?: string
   registrationDescription?: string
   sectionCount?: number
-  sections?: Section[]
+  sections?: SectionIF[]
   status?: string
 }
 
-interface Section {
+export interface SectionIF {
   lengthFeet?: number
   lengthInches?: number
   serialNumber?: string
@@ -27,7 +29,7 @@ interface Section {
   widthInches?: number
 }
 
-interface Address {
+export interface AddressIF {
   city?: string
   country?: string
   postalCode?: string
@@ -35,8 +37,8 @@ interface Address {
   street?: string
 }
 
-interface Location {
-  address?: Address
+export interface LocationIF {
+  address?: AddressIF
   additionalDescription?: string
   createDateTime?: string
   documentId?: string
@@ -53,14 +55,14 @@ interface Location {
   taxCertificate?: boolean
 }
 
-interface IndividualName {
+export interface IndividualNameIF {
   first?: string
   last?: string
   middle?: string
 }
 
-interface Owner {
-  address?: Address
+export interface OwnerIF {
+  address?: AddressIF
   createDateTime?: string
   documentId?: string
   documentRegistrationNumber?: string
@@ -70,7 +72,7 @@ interface Owner {
   groupId?: number
   groupOwnerCount?: number
   groupTenancyType?: string
-  individualName?: IndividualName
+  individualName?: IndividualNameIF
   interest?: string
   interestDenominator?: number
   interestNumerator?: number
@@ -82,7 +84,7 @@ interface Owner {
   type?: string
 }
 
-interface Registration {
+export interface RegistrationIF {
   affirmByName?: string
   attentionReference?: string
   consideration?: string
@@ -96,10 +98,10 @@ interface Registration {
 }
 
 export interface MhrHistoryRoIF {
-  descriptions?: Description[]
+  descriptions?: DescriptionIF[]
   locations?: Location[]
   mhrNumber: string
-  owners?: Owner[]
-  registrations?: Registration[]
+  owners?: OwnerIF[]
+  registrations?: RegistrationIF[]
   statusType: string
 }
diff --git a/ppr-ui/src/resources/mhr-history/mhHistoryTableHeaders.ts b/ppr-ui/src/resources/mhr-history/mhHistoryTableHeaders.ts
index d9ee43eb8..01b336b9e 100644
--- a/ppr-ui/src/resources/mhr-history/mhHistoryTableHeaders.ts
+++ b/ppr-ui/src/resources/mhr-history/mhHistoryTableHeaders.ts
@@ -1,32 +1,34 @@
-export const homeDescriptionHeaders = [
+import { BaseHeaderIF } from '@/interfaces'
+
+export const homeDescriptionHeaders: Array<BaseHeaderIF> = [
   {
     name: '',
-    value: 'action',
+    value: '',
     class: 'column-width-md'
   },
   {
     name: 'Manufacturer\'s Name',
-    value: 'name',
-    class: 'column-xs'
+    value: 'manufacturer',
+    class: 'col-22-5'
   },
   {
     name: 'Make/Model',
-    value: 'makeModel',
+    value: ['baseInformation.make', 'baseInformation.model'],
     class: 'column-xs'
   },
   {
     name: 'Serial Number',
-    value: 'serial',
+    value: 'sections[0].serialNumber',
     class: 'column-xs'
   },
   {
     name: 'Registration Date',
-    value: 'date',
+    value: 'createDateTime',
     class: 'column-xs'
   }
 ]
 
-export const homeLocationHeaders = [
+export const homeLocationHeaders: Array<BaseHeaderIF> = [
   {
     name: '',
     value: 'action',
@@ -35,7 +37,7 @@ export const homeLocationHeaders = [
   {
     name: 'Town/City',
     value: 'townCity',
-    class: 'column-xs'
+    class: 'col-22-5'
   },
   {
     name: 'Street',
@@ -54,7 +56,7 @@ export const homeLocationHeaders = [
   }
 ]
 
-export const homeOwnerHeaders = [
+export const homeOwnerHeaders: Array<BaseHeaderIF> = [
   {
     name: '',
     value: 'action',
@@ -63,7 +65,7 @@ export const homeOwnerHeaders = [
   {
     name: 'Owner Name',
     value: 'name',
-    class: 'column-xs'
+    class: 'col-22-5'
   },
   {
     name: 'Tenancy Type',
diff --git a/ppr-ui/src/views/mhrInformation/MhrHistory.vue b/ppr-ui/src/views/mhrInformation/MhrHistory.vue
index 8a823adc4..dbb2b8350 100644
--- a/ppr-ui/src/views/mhrInformation/MhrHistory.vue
+++ b/ppr-ui/src/views/mhrInformation/MhrHistory.vue
@@ -40,20 +40,27 @@
       >
         <template #tab-0>
           <SimpleTable
+            rowLabel="History"
             :tableHeaders="homeDescriptionHeaders"
-            :tableData="[]"
-          />
+            :tableData="mhrHistory.descriptions"
+          >
+            <template #content-slot="{ content }">
+              <MhrHistoryDescription :content="content" />
+            </template>
+          </SimpleTable>
         </template>
         <template #tab-1>
           <SimpleTable
+            rowLabel="History"
             :tableHeaders="homeLocationHeaders"
-            :tableData="[]"
+            :tableData="mhrHistory.descriptions"
           />
         </template>
         <template #tab-2>
           <SimpleTable
+            rowLabel="History"
             :tableHeaders="homeOwnerHeaders"
-            :tableData="[]"
+            :tableData="mhrHistory.descriptions"
           />
         </template>
       </TabbedContainer>
@@ -99,6 +106,7 @@ import {
   homeOwnerHeaders,
   mhHistoryTabConfig
 } from '@/resources/mhr-history'
+import { MhrHistoryDescription } from '@/components/mhrHistory'
 
 /** Composables **/
 const { isAuthenticated } = useAuth()
diff --git a/ppr-ui/tests/unit/SimpleTable.spec.ts b/ppr-ui/tests/unit/SimpleTable.spec.ts
index 2178ed82a..06b839c99 100644
--- a/ppr-ui/tests/unit/SimpleTable.spec.ts
+++ b/ppr-ui/tests/unit/SimpleTable.spec.ts
@@ -1,15 +1,30 @@
 import { describe, it, expect, beforeEach } from 'vitest'
 import { SimpleTable } from '@/components/common'
 import { createComponent } from './utils'
+import { shortPacificDate } from '@/utils'
+import { nextTick } from 'vue'
 
 const tableHeadersMock = [
-  { name: 'Header 1', class: 'header-class-1' },
-  { name: 'Header 2', class: 'header-class-2' },
+  { name: 'Header 1', class: 'header-class-1', value: 'name' },
+  { name: 'Header 2', class: 'header-class-2', value: 'name' },
+  { name: 'Header 3', class: 'header-class-3', value: 'dateField' },
+  { name: 'Header 4', class: 'header-class-4', value: 'sections[0].serialNumber' },
+  { name: 'Header 5', class: 'header-class-5', value: ['baseInformation.make', 'baseInformation.model'] }
 ]
 
 const tableDataMock = [
-  { name: 'Row 1' },
-  { name: 'Row 2' },
+  {
+    name: 'Row 1',
+    dateField: '2024-01-01T00:00:00Z',
+    sections: [{ serialNumber: '12345' }],
+    baseInformation: { make: 'Make1', model: 'Model1' }
+  },
+  {
+    name: 'Row 2',
+    dateField: '2023-12-25T00:00:00Z',
+    sections: [{ serialNumber: '67890' }],
+    baseInformation: { make: 'Make2', model: 'Model2' }
+  }
 ]
 
 describe('SimpleTable.vue', () => {
@@ -21,6 +36,7 @@ describe('SimpleTable.vue', () => {
       tableData: tableDataMock,
     })
   })
+
   it('renders correctly', () => {
     expect(wrapper.exists()).toBe(true)
     expect(wrapper.find('#simple-table').exists()).toBe(true)
@@ -39,9 +55,43 @@ describe('SimpleTable.vue', () => {
 
   it('renders table data correctly', () => {
     const rows = wrapper.findAll('tbody tr')
-    expect(rows.length).toBe(tableDataMock.length)
+    expect(rows.length).toBe(tableDataMock.length) // considering expanded row
     rows.forEach((row, index) => {
-      expect(row.find('td').text()).toBe(tableDataMock[index].name)
+      if (index % 2 === 0) {
+        const dataIndex = index / 2
+        const cells = row.findAll('td')
+        expect(cells.at(1).text()).toBe(tableDataMock[dataIndex].name)
+        expect(cells.at(2).text()).toBe(shortPacificDate(tableDataMock[dataIndex].dateField))
+        expect(cells.at(3).text()).toBe(tableDataMock[dataIndex].sections[0].serialNumber)
+        expect(cells.at(4).text()).toBe(`${tableDataMock[dataIndex].baseInformation.make} ${tableDataMock[dataIndex].baseInformation.model}`)
+      }
     })
   })
+
+  it('toggles row expansion correctly', async () => {
+    const toggleBtn = await wrapper.findAll('.toggle-expand-row-btn')
+    toggleBtn.at(0).trigger('click')
+    await nextTick()
+
+    expect(wrapper.findAll('.content-slot-row').length).toBe(1)
+
+    toggleBtn.at(1).trigger('click')
+    await nextTick()
+
+    expect(wrapper.findAll('.content-slot-row').length).toBe(2)
+
+    toggleBtn.at(1).trigger('click')
+    await nextTick()
+
+    expect(wrapper.findAll('.content-slot-row').length).toBe(1)
+  })
+
+  it('getItemValue function works correctly', () => {
+    const { getItemValue } = wrapper.vm
+
+    expect(getItemValue(tableDataMock[0], 'name')).toBe('Row 1')
+    expect(getItemValue(tableDataMock[0], 'dateField')).toBe(shortPacificDate('2024-01-01T00:00:00Z'))
+    expect(getItemValue(tableDataMock[0], 'sections[0].serialNumber')).toBe('12345')
+    expect(getItemValue(tableDataMock[0], ['baseInformation.make', 'baseInformation.model'])).toBe('Make1 Model1')
+  })
 })

From 8b3e68c5ca44b6525bccc1edf54d6d3b11deda6d Mon Sep 17 00:00:00 2001
From: Cameron Bowler <cameron.bowler@ca.ey.com>
Date: Wed, 3 Jul 2024 15:59:59 -0700
Subject: [PATCH 2/3] Removed placeholders

---
 ppr-ui/src/views/mhrInformation/MhrHistory.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/ppr-ui/src/views/mhrInformation/MhrHistory.vue b/ppr-ui/src/views/mhrInformation/MhrHistory.vue
index dbb2b8350..aa0265f2e 100644
--- a/ppr-ui/src/views/mhrInformation/MhrHistory.vue
+++ b/ppr-ui/src/views/mhrInformation/MhrHistory.vue
@@ -53,14 +53,14 @@
           <SimpleTable
             rowLabel="History"
             :tableHeaders="homeLocationHeaders"
-            :tableData="mhrHistory.descriptions"
+            :tableData="[]"
           />
         </template>
         <template #tab-2>
           <SimpleTable
             rowLabel="History"
             :tableHeaders="homeOwnerHeaders"
-            :tableData="mhrHistory.descriptions"
+            :tableData="[]"
           />
         </template>
       </TabbedContainer>

From f79cc58f84a8b577a1ba3b9bfba3221a354f499e Mon Sep 17 00:00:00 2001
From: Cameron Bowler <cameron.bowler@ca.ey.com>
Date: Thu, 4 Jul 2024 05:58:52 -0700
Subject: [PATCH 3/3] restyle up down chevron

---
 ppr-ui/src/components/common/SimpleTable.vue | 20 ++++++++------------
 1 file changed, 8 insertions(+), 12 deletions(-)

diff --git a/ppr-ui/src/components/common/SimpleTable.vue b/ppr-ui/src/components/common/SimpleTable.vue
index c45f3d517..e83472411 100644
--- a/ppr-ui/src/components/common/SimpleTable.vue
+++ b/ppr-ui/src/components/common/SimpleTable.vue
@@ -30,17 +30,12 @@
               :ripple="false"
               @click="toggleRowState(rowIndex)"
             >
-              <v-btn
-                class="icon-medium"
-                color="primary"
-                size="x-small"
-                icon
-                :ripple="false"
+              <v-icon
+                class="hide-show-chevron"
+                size="small"
               >
-                <v-icon class="hide-show-chevron">
-                  {{ expandRow[rowIndex] ? 'mdi-chevron-up' : 'mdi-chevron-down' }}
-                </v-icon>
-              </v-btn>
+                {{ expandRow[rowIndex] ? 'mdi-chevron-up' : 'mdi-chevron-down' }}
+              </v-icon>
               <span class="generic-link pl-1">
                 {{ expandRow[rowIndex] ? 'Hide' : 'View' }} {{ rowLabel }}
               </span>
@@ -144,7 +139,8 @@ const getItemValue = (item: object, valuePaths: Array<string> | string): string
   border-bottom: 0!important;
 }
 .hide-show-chevron {
-  margin-top: -1px;
-  margin-right: -1px;
+  background-color: $app-blue;
+  border-radius: 50%;
+  color: white;
 }
 </style>