diff --git a/ppr-ui/package-lock.json b/ppr-ui/package-lock.json
index cf4676583..eedc675cd 100644
--- a/ppr-ui/package-lock.json
+++ b/ppr-ui/package-lock.json
@@ -16263,4 +16263,4 @@
"dev": true
}
}
-}
+}
\ No newline at end of file
diff --git a/ppr-ui/src/assets/styles/theme.scss b/ppr-ui/src/assets/styles/theme.scss
index dc8092815..c494a600e 100644
--- a/ppr-ui/src/assets/styles/theme.scss
+++ b/ppr-ui/src/assets/styles/theme.scss
@@ -71,6 +71,7 @@ $greenSelected: #E8F5E9;
// App Colors (used by shared comps)
$app-blue: #1669bb; // same as the Vuetify theme primary
$app-dk-blue: #38598a; // same as the Vuetify theme appDkBlue
+$app-lt-blue-hover: #d2dfea;
$app-lt-blue: #e2e8ee; // same as appLtBlue
$app-red: #d3272c; // same as the Vuetify theme error
$app-green: #1a9031; // same as the Vuetify theme success
diff --git a/ppr-ui/src/components/common/SimpleTable.vue b/ppr-ui/src/components/common/SimpleTable.vue
new file mode 100644
index 000000000..f08420810
--- /dev/null
+++ b/ppr-ui/src/components/common/SimpleTable.vue
@@ -0,0 +1,39 @@
+
+
+
+
+
+ {{ header.name }}
+ |
+
+
+
+
+ {{ item.name }} |
+
+
+
+
+
+
+
diff --git a/ppr-ui/src/components/common/TabbedContainer.vue b/ppr-ui/src/components/common/TabbedContainer.vue
new file mode 100644
index 000000000..490152cbe
--- /dev/null
+++ b/ppr-ui/src/components/common/TabbedContainer.vue
@@ -0,0 +1,97 @@
+
+
+
+
+
+ {{ tabContent.icon }}
+
+ {{ tabContent.label }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/ppr-ui/src/components/common/index.ts b/ppr-ui/src/components/common/index.ts
index 456bdfefd..244257b11 100644
--- a/ppr-ui/src/components/common/index.ts
+++ b/ppr-ui/src/components/common/index.ts
@@ -39,3 +39,5 @@ export { default as LienAlert } from './LienAlert.vue'
export { default as UpdatedBadge } from './UpdatedBadge.vue'
export { default as StaffPayment } from './StaffPayment.vue'
export { default as CollapsibleCard } from './CollapsibleCard.vue'
+export { default as TabbedContainer } from './TabbedContainer.vue'
+export { default as SimpleTable } from './SimpleTable.vue'
diff --git a/ppr-ui/src/resources/mhr-history/index.ts b/ppr-ui/src/resources/mhr-history/index.ts
new file mode 100644
index 000000000..926b0e7c7
--- /dev/null
+++ b/ppr-ui/src/resources/mhr-history/index.ts
@@ -0,0 +1,2 @@
+export * from './mhHistoryTableHeaders'
+export * from './mhHistoryTabConfig'
diff --git a/ppr-ui/src/resources/mhr-history/mhHistoryTabConfig.ts b/ppr-ui/src/resources/mhr-history/mhHistoryTabConfig.ts
new file mode 100644
index 000000000..cb83b4c1f
--- /dev/null
+++ b/ppr-ui/src/resources/mhr-history/mhHistoryTabConfig.ts
@@ -0,0 +1,14 @@
+export const mhHistoryTabConfig = [
+ {
+ label: 'Description of Home',
+ icon: 'mdi-home'
+ },
+ {
+ label: 'Location of Home',
+ icon: 'mdi-map-marker'
+ },
+ {
+ label: 'Home Owners',
+ icon: 'mdi-account'
+ }
+]
diff --git a/ppr-ui/src/resources/mhr-history/mhHistoryTableHeaders.ts b/ppr-ui/src/resources/mhr-history/mhHistoryTableHeaders.ts
new file mode 100644
index 000000000..d9ee43eb8
--- /dev/null
+++ b/ppr-ui/src/resources/mhr-history/mhHistoryTableHeaders.ts
@@ -0,0 +1,88 @@
+export const homeDescriptionHeaders = [
+ {
+ name: '',
+ value: 'action',
+ class: 'column-width-md'
+ },
+ {
+ name: 'Manufacturer\'s Name',
+ value: 'name',
+ class: 'column-xs'
+ },
+ {
+ name: 'Make/Model',
+ value: 'makeModel',
+ class: 'column-xs'
+ },
+ {
+ name: 'Serial Number',
+ value: 'serial',
+ class: 'column-xs'
+ },
+ {
+ name: 'Registration Date',
+ value: 'date',
+ class: 'column-xs'
+ }
+]
+
+export const homeLocationHeaders = [
+ {
+ name: '',
+ value: 'action',
+ class: 'column-width-md'
+ },
+ {
+ name: 'Town/City',
+ value: 'townCity',
+ class: 'column-xs'
+ },
+ {
+ name: 'Street',
+ value: 'street',
+ class: 'column-xs'
+ },
+ {
+ name: 'From',
+ value: 'from',
+ class: 'column-xs'
+ },
+ {
+ name: 'To',
+ value: 'to',
+ class: 'column-xs'
+ }
+]
+
+export const homeOwnerHeaders = [
+ {
+ name: '',
+ value: 'action',
+ class: 'column-width-md'
+ },
+ {
+ name: 'Owner Name',
+ value: 'name',
+ class: 'column-xs'
+ },
+ {
+ name: 'Tenancy Type',
+ value: 'tenancyType',
+ class: 'column-xs'
+ },
+ {
+ name: 'Owner From',
+ value: 'from',
+ class: 'column-xs'
+ },
+ {
+ name: 'Owner Until',
+ value: 'to',
+ class: 'column-xs'
+ },
+ {
+ name: 'Owner Status',
+ value: 'status',
+ class: 'column-xs'
+ }
+]
diff --git a/ppr-ui/src/utils/registration-helper.ts b/ppr-ui/src/utils/registration-helper.ts
index 9b679ac51..b40501538 100644
--- a/ppr-ui/src/utils/registration-helper.ts
+++ b/ppr-ui/src/utils/registration-helper.ts
@@ -80,7 +80,9 @@ export function setAmendmentList (baseList:Array, addList:Array, delet
securitiesActOrders: notice.securitiesActOrders?.filter(order =>
order.action !== ActionTypes.REMOVED).map(order => ({
...removeEmptyProperties(order),
+ ...(order.action === ActionTypes.EDITED && {
amendOrderId: order.orderId,
+ }),
orderDate: convertToISO8601LastMinute(order.orderDate.split('T')[0])
}))
} as AddEditSaNoticeIF
diff --git a/ppr-ui/src/views/mhrInformation/MhrHistory.vue b/ppr-ui/src/views/mhrInformation/MhrHistory.vue
index 7b43948c0..8a823adc4 100644
--- a/ppr-ui/src/views/mhrInformation/MhrHistory.vue
+++ b/ppr-ui/src/views/mhrInformation/MhrHistory.vue
@@ -32,6 +32,31 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
@@ -67,6 +92,13 @@ import { useAuth, useNavigation } from '@/composables'
import { getFeatureFlag } from '@/utils'
import { storeToRefs } from 'pinia'
import { useStore } from '@/store/store'
+import { TabbedContainer, SimpleTable } from '@/components/common'
+import {
+ homeDescriptionHeaders,
+ homeLocationHeaders,
+ homeOwnerHeaders,
+ mhHistoryTabConfig
+} from '@/resources/mhr-history'
/** Composables **/
const { isAuthenticated } = useAuth()
diff --git a/ppr-ui/tests/unit/MhrHistory.spec.ts b/ppr-ui/tests/unit/MhrHistory.spec.ts
index 5ab72275b..173d50a7c 100644
--- a/ppr-ui/tests/unit/MhrHistory.spec.ts
+++ b/ppr-ui/tests/unit/MhrHistory.spec.ts
@@ -1,10 +1,9 @@
import { MhrHistory } from '@/views'
import { nextTick } from 'vue'
import { createComponent, setupMockStaffUser } from './utils'
-import { defaultFlagSet, getMhrHistory, pacificDate } from '@/utils'
+import { defaultFlagSet, pacificDate } from '@/utils'
import { expect, vi } from 'vitest'
import { RouteNames } from '@/enums'
-import { mockedFinancingStatementAll } from './test-data'
describe('HistoricalManufacturedHomeInfo', () => {
let wrapper: any
diff --git a/ppr-ui/tests/unit/SimpleTable.spec.ts b/ppr-ui/tests/unit/SimpleTable.spec.ts
new file mode 100644
index 000000000..2178ed82a
--- /dev/null
+++ b/ppr-ui/tests/unit/SimpleTable.spec.ts
@@ -0,0 +1,47 @@
+import { describe, it, expect, beforeEach } from 'vitest'
+import { SimpleTable } from '@/components/common'
+import { createComponent } from './utils'
+
+const tableHeadersMock = [
+ { name: 'Header 1', class: 'header-class-1' },
+ { name: 'Header 2', class: 'header-class-2' },
+]
+
+const tableDataMock = [
+ { name: 'Row 1' },
+ { name: 'Row 2' },
+]
+
+describe('SimpleTable.vue', () => {
+ let wrapper
+
+ beforeEach(async () => {
+ wrapper = await createComponent(SimpleTable, {
+ tableHeaders: tableHeadersMock,
+ tableData: tableDataMock,
+ })
+ })
+ it('renders correctly', () => {
+ expect(wrapper.exists()).toBe(true)
+ expect(wrapper.find('#simple-table').exists()).toBe(true)
+ expect(wrapper.findAll('thead th').length).toBe(tableHeadersMock.length)
+ expect(wrapper.findAll('tbody tr').length).toBe(tableDataMock.length)
+ })
+
+ it('renders table headers correctly', () => {
+ const headers = wrapper.findAll('thead th')
+ expect(headers.length).toBe(tableHeadersMock.length)
+ headers.forEach((header, index) => {
+ expect(header.text()).toBe(tableHeadersMock[index].name)
+ expect(header.classes()).toContain(tableHeadersMock[index].class)
+ })
+ })
+
+ it('renders table data correctly', () => {
+ const rows = wrapper.findAll('tbody tr')
+ expect(rows.length).toBe(tableDataMock.length)
+ rows.forEach((row, index) => {
+ expect(row.find('td').text()).toBe(tableDataMock[index].name)
+ })
+ })
+})
diff --git a/ppr-ui/tests/unit/TabbedContainer.spec.ts b/ppr-ui/tests/unit/TabbedContainer.spec.ts
new file mode 100644
index 000000000..299577020
--- /dev/null
+++ b/ppr-ui/tests/unit/TabbedContainer.spec.ts
@@ -0,0 +1,33 @@
+import { describe, it, expect, beforeEach } from 'vitest'
+import { TabbedContainer } from '@/components/common'
+import { createComponent } from './utils'
+
+const tabConfigMock = [
+ { label: 'Tab 1', icon: 'mdi-home' },
+ { label: 'Tab 2', icon: 'mdi-settings' },
+]
+
+describe('YourComponent.vue', () => {
+ let wrapper
+ beforeEach(async () => {
+ wrapper = await createComponent(TabbedContainer, {
+ tabConfig: tabConfigMock
+ })
+ })
+ it('renders correctly', async () => {
+ expect(wrapper.exists()).toBe(true)
+ expect(wrapper.find('#tabbed-container').exists()).toBe(true)
+ expect(wrapper.findAll('.tab').length).toBe(tabConfigMock.length)
+ })
+
+ it('switches tabs correctly', async () => {
+ const tabs = wrapper.findAll('.tab')
+ expect(tabs.length).toBe(tabConfigMock.length)
+
+ await tabs[1].trigger('click')
+ expect(wrapper.vm.tab).toBe(1)
+
+ await tabs[0].trigger('click')
+ expect(wrapper.vm.tab).toBe(0)
+ })
+})