Staff Transfer Review Components

ppr-ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ppr-ui",
-  "version": "5.0.24",
+  "version": "5.0.25",
   "private": true,
   "appName": "Assets UI",
   "connectLayerName": "Core UI",

ppr-ui/src/components/common/AccountInfo.vue

@@ -3,7 +3,22 @@
     id="account-info"
     role="region"
   >
-    <h2 class="header mb-5">
+    <div
+      v-if="isQueueTransfer"
+      :class="'font-bold text-gray-900 bg-bcGovColor-gray2 px-[1.4rem] py-[12px] rounded-t'"
+    >
+      <div class="flex justify-between">
+        <div class="flex">
+          <UIcon name="i-mdi-text-box" class="w-6 h-6 text-blue-350" />
+          <div class="ml-2">Submitting Party</div>
+        </div>
+      </div>
+    </div>
+
+    <h2
+      v-else
+      class="header mb-5"
+    >
       {{ title }}
       <v-tooltip
         v-if="tooltipContent"
@@ -63,7 +78,9 @@
                   {{ accountInfo.isBusinessAccount ? 'mdi-domain' : 'mdi-account' }}
                 </v-icon>
                 <span class="pt-1 font-weight-bold">
-                  {{ accountInfo.name }}
+                  {{ accountInfo.name ||
+                  accountInfo.accountAdmin?.firstName + ' ' + accountInfo.accountAdmin?.lastName
+                  }}
                 </span>
               </td>
               <td class="py-6">
@@ -74,12 +91,12 @@
                 />
               </td>
               <td class="py-6">
-                {{ accountInfo.accountAdmin.email }}
+                {{ accountInfo.accountAdmin?.email }}
               </td>
               <td class="py-6">
-                {{ toDisplayPhone(accountInfo.accountAdmin.phone) }}
-                <span v-if="accountInfo.accountAdmin.phoneExtension">
-                  Ext {{ accountInfo.accountAdmin.phoneExtension }}
+                {{ toDisplayPhone(accountInfo.accountAdmin?.phone) }}
+                <span v-if="accountInfo.accountAdmin?.phoneExtension">
+                  Ext {{ accountInfo.accountAdmin?.phoneExtension }}
                 </span>
               </td>
             </tr>
@@ -116,6 +133,10 @@ export default defineComponent({
     desc: {
       type: String,
       default: null
+    },
+    isQueueTransfer: {
+      type: Boolean,
+      default: false
     }
   },
   setup () {

ppr-ui/src/components/common/AttentionReview.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+/** Props for the uploaded documents list **/
+defineProps({
+  attentionReview: {
+    type: () => {},
+    default: () => {},
+    required: false
+  }
+})
+</script>
+<template>
+  <div>
+    <div :class="'font-bold text-gray-900 bg-bcGovColor-gray2 px-[1.4rem] py-[12px] rounded-t'">
+      <div class="flex justify-between">
+        <div class="flex">
+          <UIcon name="i-mdi-information-outline" class="w-6 h-6 text-blue-350" />
+          <div class="ml-2">Attention</div>
+        </div>
+      </div>
+    </div>
+
+    <!-- List of Uploaded Documents -->
+    <div class="w-full border-t bg-white p-6">
+      <div class="flex items-center">
+        <span class="w-3/12 text-[16px] font-bold ml-1">Name</span>
+        <span class="w-9/12 ml-2 text-[16px]">{{ attentionReview?.name || 'Not entered' }}</span>
+      </div>
+      <div class="flex items-center">
+        <span class="w-3/12 text-[16px] font-bold ml-1">Folio Number</span>
+        <span class="w-9/12 ml-2 text-[16px]">{{ attentionReview?.folio || 'Not entered' }}</span>
+      </div>
+    </div>
+  </div>
+</template>

ppr-ui/src/components/common/Breadcrumb.vue

@@ -179,6 +179,10 @@ export default defineComponent({
           const mhrInfoBreadcrumb = [...tombstoneBreadcrumbMhrInformation]
           mhrInfoBreadcrumb[2].text = `MHR Number ${getMhrInformation.value.mhrNumber}`
           return mhrInfoBreadcrumb
+        } else if ([RouteNames.MHR_QUEUE_TRANSFER].includes(name as RouteNames)) {
+          const mhrInfoBreadcrumb = [...tombstoneBreadcrumbMhrInformation]
+          mhrInfoBreadcrumb[2].text = `MHR Number ${getMhrInformation.value.mhrNumber} - Transfer Review`
+          return mhrInfoBreadcrumb
         } else if (isMhrCorrection.value) {
           const mhrCorrectionBreadcrumb = [...tombstoneBreadcrumbMhrCorrection]
           mhrCorrectionBreadcrumb[2].text = `MHR Number ${getMhrInformation.value.mhrNumber}`

ppr-ui/src/components/common/SupportingDocuments/index.vue → ppr-ui/src/components/common/UploadedDocuments/index.vue

@@ -1,26 +1,31 @@
 <script setup lang="ts">
 import { ConfirmationDialog } from '@/components/dialogs'
 import { confirmCancelDialog } from '@/resources/dialogOptions/confirmationDialogs'
+import type { DocumentSummary } from '@/interfaces'
 
-defineProps({
-  documentId: {
-    type: String,
-    required: true,
+/** Props for the uploaded documents list **/
+const props = defineProps({
+  documentList: {
+    type: Array<DocumentSummary>,
+    default: () => [],
+    required: false,
   }
 })
 
-// Future State: Pull in uploaded documents from API or passed via props depending on context
-// https://test.api.connect.gov.bc.ca/doc-dev/api/v1/searches/MHR?consumerDocumentId=xxxxxx
-// https://test.api.connect.gov.bc.ca/doc-dev/api/v1/searches/MHR?documentServiceId=xxxxx
-
+/** Controls visibility of the add documents section **/
 const showAddDocuments = ref(false)
+/** Controls visibility of the confirmation cancel dialog **/
 const showConfirmCancelDialog = ref(false)
+
+ /** Handles confirmation dialog actions **/
 const dialogHandler = (action: string) => {
   if (action) {
     showAddDocuments.value = false
   }
   showConfirmCancelDialog.value = false
 }
+
+/** Toggles file upload section and handles cancel confirmation **/
 const fileUploadToggle = (action: string) => {
   if (showAddDocuments.value) {
     showConfirmCancelDialog.value = true
@@ -30,6 +35,12 @@ const fileUploadToggle = (action: string) => {
     showAddDocuments.value = !showAddDocuments.value
   }
 }
+
+/** Opens a PDF document in a new browser tab **/
+const downloadPdf = (url: string) => {
+  if (!url) return
+  window.open(url, '_blank')
+}
 </script>
 <template>
   <div>
@@ -44,7 +55,7 @@ const fileUploadToggle = (action: string) => {
     >
       <div class="flex justify-between">
         <div class="flex">
-          <UIcon name="i-mdi-text-box" class="w-6 h-6" />
+          <UIcon name="i-mdi-text-box" class="w-6 h-6 text-blue-350" />
           <div class="ml-2">Supporting Documents</div>
         </div>
         <div>
@@ -68,21 +79,20 @@ const fileUploadToggle = (action: string) => {
       <FileUpload />
     </div>
 
-    <!-- List of Uploaded Documents: Static placeholders - to be dynamic loop of all pulled or provided docs -->
-    <div class="w-full border-t bg-white pa-6">
-      <div class="flex items-center">
-        <UIcon name="i-mdi-file-pdf-outline" class="text-primary size-[20px]" />
-        <span class="ml-2 text-[16px] italic text-primary">FileName_One.pdf</span>
-      </div>
-      <span class="ml-7 text-gray-700 fs-14">123 mb</span>
-    </div>
-
-    <div class="w-full border-t bg-white pa-6">
-      <div class="flex items-center">
+    <!-- List of Uploaded Documents -->
+    <div
+      v-for="document in props.documentList"
+      :key="document.consumerFilename"
+      class="w-full border-t bg-white pa-6"
+    >
+      <div
+        class="flex items-center cursor-pointer"
+        @click="downloadPdf(document.documentURL)"
+      >
         <UIcon name="i-mdi-file-pdf-outline" class="text-primary size-[20px]" />
-        <span class="ml-2 text-[16px] italic text-primary">FileName_Two.pdf</span>
+        <span class="ml-2 text-[16px] italic text-primary">{{document.consumerFilename}}</span>
       </div>
-      <span class="ml-7 text-gray-700 fs-14">123 mb</span>
+      <span class="ml-7 text-gray-700 fs-14">{{document?.fileSize || '' }}</span>
     </div>
   </div>
 </template>

ppr-ui/src/components/common/index.ts

@@ -1,3 +1,4 @@
+export { default as AttentionReview } from './AttentionReview.vue'
 export { default as BaseSnackbar } from './BaseSnackbar.vue'
 export { default as Breadcrumb } from './Breadcrumb.vue'
 export { default as ButtonFooter } from './ButtonFooter.vue'

ppr-ui/src/components/tables/mhr/HomeSectionsTable.vue

@@ -112,8 +112,7 @@
                 </v-btn>
                 <!-- Actions drop down menu -->
                 <v-menu
-                  v-if="item.action !== ActionTypes.REMOVED"
-                  location="bottom right"
+                  v-if="item.action !== ActionTypes.REMOVED && isMhrCorrection"
                 >
                   <template #activator="{ props }">
                     <v-divider

ppr-ui/src/components/tombstones/TombstoneDynamic.vue

@@ -293,7 +293,7 @@ export default defineComponent({
 
         return isFrozenMhr.value || regStatus === MhApiStatusTypes.DRAFT
           ? MhUIStatusTypes.ACTIVE
-          : regStatus[0] + regStatus.toLowerCase().slice(1)
+          : regStatus[0] + regStatus.toLowerCase().slice(1).replace(/_/g, ' ')
       }),
       header: computed((): string => {
         const numberType = getRegistrationNumber.value ? 'Base' : 'Manufactured Home'

ppr-ui/src/interfaces/document-interfaces/document-summary-interface.ts

@@ -0,0 +1,21 @@
+/**
+ * Represents a single document summary item returned by the service.
+ * Note: createDateTime is an ISO 8601 string.
+ */
+export interface DocumentSummary {
+  author: string;
+  consumerDocumentId: string;
+  consumerFilename: string;
+  consumerIdentifier: string;
+  consumerReferenceId: string;
+  createDateTime: string; // ISO 8601, e.g., 2025-09-23T22:21:44+00:00
+  documentClass: string; // e.g., "MHR"
+  documentServiceId: string;
+  documentType: string; // e.g., "WILL"
+  documentTypeDescription: string;
+  documentURL: string; // signed URL
+  fileSize?: string
+}
+
+/** Convenience type for the list response */
+export type DocumentSummaryList = DocumentSummary[];

ppr-ui/src/interfaces/document-interfaces/index.ts

@@ -0,0 +1 @@
+export * from './document-summary-interface'

ppr-ui/src/interfaces/index.ts

@@ -7,6 +7,7 @@ export * from './error-interface'
 export * from './data-table-interfaces'
 export * from './date-picker-interfaces'
 export * from './dialog-inerfaces'
+export * from './document-interfaces'
 export * from './mhr-registration-interfaces'
 export * from './party-interfaces'
 export * from './pay-api-interfaces'

ppr-ui/src/pages/Dashboard.vue

@@ -260,7 +260,7 @@
           />
         </v-col>
       </v-row>
-      <v-row v-if="isAnalystQueueEnabled">
+      <v-row v-if="isAnalystQueueEnabled" class="mt-8">
         <v-col>
           <QueueWrapper />
         </v-col>

ppr-ui/src/pages/mhrInformation/MhrQueueTransfer/index.vue

@@ -1,20 +1,45 @@
 <script setup lang="ts">
 import { HomeOwners } from '@/pages'
-import { getFeatureFlag } from '@/utils'
+import { getFeatureFlag, parseSubmittingPartyToAccountInfo } from '@/utils'
 import AccountInfo from '@/components/common/AccountInfo.vue'
+import { getQueuedTransfer } from '@/utils/mhr-api-helper'
+import type { MhrTransferApiIF } from '@/interfaces'
+import AttentionReview from '@/components/common/AttentionReview.vue'
+
 const { goToDash } = useNavigation()
+const { initDraftMhrInformation } = useMhrInformation()
+const {
+  getMhrInformation, isRoleStaffReg, getMhrTransferCurrentHomeOwnerGroups, getMhrAccountSubmittingParty
+} = storeToRefs(useStore())
+
+const isLoading = ref(false)
+const queueTransfer = ref(null)
 
-// On Mounted: route to dashboard if the feature flag is false
-onMounted(() => {
-  if (!getFeatureFlag('enable-analyst-queue')) {
+onMounted(async () => {
+  isLoading.value = true
+  // On Mounted: route to dashboard if the feature flag is false, no reviewId, or not staff
+  if (!getFeatureFlag('enable-analyst-queue') || !getMhrInformation.value?.reviewId || !isRoleStaffReg.value) {
    goToDash()
   }
+
+  // Fetch the queued transfer details and initialize the draft
+  queueTransfer.value = await getQueuedTransfer(getMhrInformation.value?.reviewId)
+  await initDraftMhrInformation(queueTransfer.value as MhrTransferApiIF)
+  isLoading.value = false
+
 })
 </script>
 <template>
-  <div class="mx-auto py-6">
+  <div class="mx-auto pb-4">
+    <template v-if="isLoading">
+      <div class="fixed left-0 top-0 h-full w-full z-50 bg-gray-300 opacity-45" />
+      <UIcon
+        name="i-mdi-loading"
+        class="animate-spin text-[50px] text-blue-500 absolute top-40 left-[50%]"
+      />
+    </template>
 
-    <div class="grid grid-cols-1 lg:grid-cols-12">
+    <div v-else class="grid grid-cols-1 lg:grid-cols-12">
       <!-- Main column -->
       <main class="lg:col-span-9 pr-2">
         <!-- Review Header -->
@@ -37,7 +62,7 @@ onMounted(() => {
           <HomeOwners
             is-mhr-transfer
             is-readonly-table
-            :current-home-owners="null"
+            :current-home-owners="getMhrTransferCurrentHomeOwnerGroups"
           />
         </section>
 
@@ -47,27 +72,29 @@ onMounted(() => {
 
         <section
           id="transfer-submitting-party"
-          class="submitting-party mt-6"
+          class="submitting-party mt-9"
         >
           <AccountInfo
             title="Submitting Party for this Change"
             tooltip-content="The default Submitting Party is based on your BC Registries
                        user account information. This information can be updated within your account settings."
-            :account-info="null"
+            is-queue-transfer
+            :account-info="parseSubmittingPartyToAccountInfo(getMhrAccountSubmittingParty)"
 
           />
         </section>
 
-        <section class="mt-6">
-          <SupportingDocuments />
+        <section class="my-9">
+          <AttentionReview />
+        </section>
+
+        <section class="my-9">
+          <UploadedDocuments :document-list="queueTransfer?.documents" />
         </section>
       </main>
     </div>
   </div>
 </template>
 <style lang="scss" scoped>
-ol {
-  list-style-type: revert;
-}
-
+@import '@/assets/styles/theme.scss';
 </style>

ppr-ui/src/pages/newMhrRegistration/HomeOwners.vue

@@ -349,7 +349,7 @@
               Home Owners
             </h4>
             <span
-              v-if="(isMhrTransfer) && hasRemovedOwners"
+              v-if="isMhrTransfer && hasRemovedOwners"
               class="float-right hide-show-owners fs-14"
               @click="hideShowRemovedOwners()"
             >