From a8e1128a0a8f5c997ef392e7dc0a552a3cdd37d6 Mon Sep 17 00:00:00 2001
From: mightycox <j.acox@hotmail.com>
Date: Wed, 11 Sep 2024 00:15:18 -0700
Subject: [PATCH] EDX-2853 - switches sldmove to use sdc api EDX-2869 - shows
 merged data on sld history and compare screens

---
 backend/package-lock.json                     |   40 +-
 backend/package.json                          |    3 +-
 backend/src/components/sdc/sdc.js             |   15 +-
 backend/src/components/validator.js           |   16 +
 backend/src/routes/sdc.js                     |    5 +-
 backend/src/util/constants.js                 |    4 +
 backend/src/validations/sdc.js                |   14 +
 frontend/src/components/CompareStudents.vue   |   14 +-
 .../common/CompareDemographicModal.vue        |   56 +-
 .../common/CompareDemographicsCommon.vue      | 1098 +----------------
 .../common/CompareDemographicsCommonV1.vue    | 1094 ++++++++++++++++
 .../common/CompareDemographicsCommonV2.vue    |  127 +-
 .../src/components/common/CustomTable.vue     |   48 +-
 .../penreg/student/StudentSLDHistoryV2.vue    |   80 +-
 frontend/src/router.js                        |    2 +-
 15 files changed, 1394 insertions(+), 1222 deletions(-)
 create mode 100644 backend/src/components/validator.js
 create mode 100644 backend/src/validations/sdc.js
 create mode 100644 frontend/src/components/common/CompareDemographicsCommonV1.vue

diff --git a/backend/package-lock.json b/backend/package-lock.json
index f7f18f754..006bf2e6b 100644
--- a/backend/package-lock.json
+++ b/backend/package-lock.json
@@ -47,7 +47,8 @@
         "strip-ansi": "^6.0.0",
         "uuid": "^8.3.2",
         "winston": "^3.5.0",
-        "winston-daily-rotate-file": "^4.5.0"
+        "winston-daily-rotate-file": "^4.5.0",
+        "yup": "^1.4.0"
       },
       "devDependencies": {
         "@babel/cli": "^7.16.8",
@@ -5286,6 +5287,11 @@
         "node": ">=6.1"
       }
     },
+    "node_modules/property-expr": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/property-expr/-/property-expr-2.0.6.tgz",
+      "integrity": "sha512-SVtmxhRE/CGkn3eZY1T6pC8Nln6Fr/lu1mKSgRud0eC73whjGfoAogbn78LkD8aFL0zz3bAFerKSnOl7NlErBA=="
+    },
     "node_modules/proxy-addr": {
       "version": "2.0.7",
       "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz",
@@ -6152,6 +6158,11 @@
       "integrity": "sha1-f17oI66AUgfACvLfSoTsP8+lcLQ=",
       "dev": true
     },
+    "node_modules/tiny-case": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/tiny-case/-/tiny-case-1.0.3.tgz",
+      "integrity": "sha512-Eet/eeMhkO6TX8mnUteS9zgPbUMQa4I6Kkp5ORiBD5476/m+PIRiumP5tmh5ioJpH7k51Kehawy2UDfsnxxY8Q=="
+    },
     "node_modules/to-fast-properties": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
@@ -6181,6 +6192,11 @@
         "node": ">=0.6"
       }
     },
+    "node_modules/toposort": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/toposort/-/toposort-2.0.2.tgz",
+      "integrity": "sha512-0a5EOkAUp8D4moMi2W8ZF8jcga7BgZd91O/yabJCFY8az+XSzeGyTKs0Aoo897iV1Nj6guFq8orWDS96z91oGg=="
+    },
     "node_modules/touch": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/touch/-/touch-3.1.0.tgz",
@@ -6659,6 +6675,28 @@
       "engines": {
         "node": ">=10"
       }
+    },
+    "node_modules/yup": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/yup/-/yup-1.4.0.tgz",
+      "integrity": "sha512-wPbgkJRCqIf+OHyiTBQoJiP5PFuAXaWiJK6AmYkzQAh5/c2K9hzSApBZG5wV9KoKSePF7sAxmNSvh/13YHkFDg==",
+      "dependencies": {
+        "property-expr": "^2.0.5",
+        "tiny-case": "^1.0.3",
+        "toposort": "^2.0.2",
+        "type-fest": "^2.19.0"
+      }
+    },
+    "node_modules/yup/node_modules/type-fest": {
+      "version": "2.19.0",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-2.19.0.tgz",
+      "integrity": "sha512-RAH822pAdBgcNMAfWnCBU3CFZcfZ/i1eZjwFU/dsLKumyuuP3niueg2UAukXYF0E2AAoc82ZSSf9J0WQBinzHA==",
+      "engines": {
+        "node": ">=12.20"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
     }
   }
 }
diff --git a/backend/package.json b/backend/package.json
index 8b3b21c05..4e5b3dc0c 100644
--- a/backend/package.json
+++ b/backend/package.json
@@ -54,7 +54,8 @@
     "strip-ansi": "^6.0.0",
     "uuid": "^8.3.2",
     "winston": "^3.5.0",
-    "winston-daily-rotate-file": "^4.5.0"
+    "winston-daily-rotate-file": "^4.5.0",
+    "yup": "^1.4.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.16.8",
diff --git a/backend/src/components/sdc/sdc.js b/backend/src/components/sdc/sdc.js
index 1e4bd79c7..79c5435ae 100644
--- a/backend/src/components/sdc/sdc.js
+++ b/backend/src/components/sdc/sdc.js
@@ -161,7 +161,7 @@ async function getSDCSchoolCollectionStudentPaginated(req, res) {
     if(req.query.assignedStudentID) {
       search.push({
         condition: null,
-        searchCriteriaList: [{ key: 'assignedStudentId', value: req.query.assignedStudentID, operation: FILTER_OPERATION.EQUAL, valueType: VALUE_TYPE.UUID }]
+        searchCriteriaList: [{ key: 'assignedStudentId', value: req.query.assignedStudentID.join(','), operation: FILTER_OPERATION.IN_NOT_DISTINCT, valueType: VALUE_TYPE.UUID }]
       });
     }
 
@@ -888,6 +888,16 @@ async function downloadSdcReport(req, res) {
   }
 }
 
+async function moveSld (req, res) {
+  try {
+    await postData(`${config.get('sdc:schoolCollectionStudentURL')}/move-sld`, req.body);
+    return res.status(HttpStatus.OK).json('');
+  } catch (e) {
+    logApiError(e, 'Error attempting to move sld record(s)');
+    return errorResponse(res);
+  }
+}
+
 function getFileDetails(reportType) {
   const mappings = {
     'ALL_STUDENT_DIS_CSV': { filename: 'AllDistrictStudents.csv', contentType: 'text/csv' },
@@ -929,5 +939,6 @@ module.exports = {
   getSdcSchoolCollections,
   getSdcDistrictCollections,
   downloadSdcReport,
-  updateBandCode
+  updateBandCode,
+  moveSld
 };
diff --git a/backend/src/components/validator.js b/backend/src/components/validator.js
new file mode 100644
index 000000000..abb59d2f3
--- /dev/null
+++ b/backend/src/components/validator.js
@@ -0,0 +1,16 @@
+const validate = (schema) => async (req, res, next) => {
+  try {
+    await schema.validate({
+      body: req.body,
+      query: req.query,
+      params: req.params,
+    }, {
+      stripUnknown: false
+    });
+    next();
+  } catch (e) {
+    return res.status(400).send(e.message);
+  }
+};
+
+module.exports = validate;
diff --git a/backend/src/routes/sdc.js b/backend/src/routes/sdc.js
index 82762cdae..731ce0678 100644
--- a/backend/src/routes/sdc.js
+++ b/backend/src/routes/sdc.js
@@ -8,7 +8,7 @@ const { getSnapshotFundingDataForSchool, getAllCollectionsForSchool, getActiveCo
   getIndySdcSchoolCollectionMonitoringByCollectionId, unsubmitSdcDistrictCollection, unsubmitSdcSchoolCollection, getInDistrictDuplicates, getSDCSchoolCollectionStudentPaginatedSlice,
   getSDCSchoolCollectionStudentPaginated, getSDCSchoolCollectionStudentDetail, updateStudentPEN, checkDuplicatesInCollection, updateAndValidateSdcSchoolCollectionStudent, resolveDuplicates, postProvincialDuplicates, resolveRemainingDuplicates,
   getInFlightDistrictProvincialDuplicates, getInFlightSchoolProvincialDuplicates, closeCollection, getCollectionPaginated, getSDCSchoolCollectionDetail, downloadSdcReport,
-  getCollectionByID, getSdcSchoolCollections, getSdcDistrictCollections, updateBandCode
+  getCollectionByID, getSdcSchoolCollections, getSdcDistrictCollections, updateBandCode, moveSld
 } = require('../components/sdc/sdc');
 const {getCachedSDCData} = require('../components/sdc/sdc-cache');
 const constants = require('../util/constants');
@@ -16,6 +16,8 @@ const {getCodes} = require('../components/utils');
 const PERMISSION = perm.PERMISSION;
 const permUtils = require('../components/permissionUtils');
 const auth = require('../components/auth');
+const validate = require('../components/validator');
+const { moveSldSchema } = require('../validations/sdc');
 
 //cached code table calls
 router.get('/band-codes', passport.authenticate('jwt', {session: false}, undefined), permUtils.checkUserHasPermission(PERMISSION.STUDENT_DATA_COLLECTION), extendSession, getCachedSDCData(constants.CACHE_KEYS.SDC_BAND_CODES, 'sdc:bandCodesURL'));
@@ -63,6 +65,7 @@ router.post('/sdcSchoolCollectionStudent/:sdcSchoolCollectionStudentID/update-pe
 
 //update student
 router.post('/sdcSchoolCollectionStudent', passport.authenticate('jwt', {session: false}, undefined), permUtils.checkUserHasPermission(PERMISSION.STUDENT_DATA_COLLECTION), extendSession, updateAndValidateSdcSchoolCollectionStudent);
+router.post('/move-sld', passport.authenticate('jwt', {session: false}, undefined), permUtils.checkUserHasPermission(PERMISSION.STUDENT_DATA_COLLECTION), validate(moveSldSchema), extendSession, moveSld);
 
 //district collection
 router.post('/sdcDistrictCollection/:sdcDistrictCollectionID/unsubmit', passport.authenticate('jwt', {session: false}, undefined), permUtils.checkUserHasPermission(PERMISSION.STUDENT_DATA_COLLECTION), extendSession, permUtils.isValidUUIDParam('sdcDistrictCollectionID'), unsubmitSdcDistrictCollection);
diff --git a/backend/src/util/constants.js b/backend/src/util/constants.js
index 5a626ada2..5987b9cf3 100644
--- a/backend/src/util/constants.js
+++ b/backend/src/util/constants.js
@@ -106,6 +106,10 @@ const FILTER_OPERATION = Object.freeze(
      * Ends with filter operation.
      */
     ENDS_WITH: 'ends_with',
+    /**
+     * In operation that does not include the DISTINCT condition
+     */
+    IN_NOT_DISTINCT: 'in_not_distinct'
   }
 );
 const CONDITION = Object.freeze(
diff --git a/backend/src/validations/sdc.js b/backend/src/validations/sdc.js
new file mode 100644
index 000000000..b71ca93c2
--- /dev/null
+++ b/backend/src/validations/sdc.js
@@ -0,0 +1,14 @@
+const { object, string, array } = require('yup');
+
+const moveSldSchema = object({
+  body: object({
+    toStudentPen: string().nonNullable(),
+    sdcSchoolCollectionIdsToUpdate: array().of(string().nonNullable())
+  }).noUnknown(),
+  params: object().noUnknown(),
+  query: object().noUnknown(),
+}).noUnknown();
+
+module.exports = {
+  moveSldSchema
+};
diff --git a/frontend/src/components/CompareStudents.vue b/frontend/src/components/CompareStudents.vue
index 0c87738a7..8ff53ebb7 100644
--- a/frontend/src/components/CompareStudents.vue
+++ b/frontend/src/components/CompareStudents.vue
@@ -5,35 +5,35 @@
         id="compareClearBtn"
         text="Clear"
         secondary
-        @click-action="[cancel, clearError]"
+        @click-action="[cancel(), clearError()]"
       />
       <PrimaryButton
         id="moveSldBtn"
         text="Move Sld Record"
         primary
-        :disabled="disableMoveSld"
-        @click-action="moveSldRecords"
+        :disabled="disableMoveSld()"
+        @click-action="moveSldRecords()"
       />
       <PrimaryButton
         id="twinBtn"
         text="Twin"
         primary
-        :disabled="validateAction"
-        @click-action="twin"
+        :disabled="validateAction()"
+        @click-action="twin()"
       />
       <PrimaryButton
         id="demergeBtn"
         text="Demerge"
         primary
         :disabled="disableDemerge()"
-        @click-action="demerge"
+        @click-action="demerge()"
       />
       <PrimaryButton
         id="mergeBtn"
         text="Merge PENs"
         primary
         :disabled="disableMerge()"
-        @click-action="merge"
+        @click-action="merge()"
       />
     </template>
   </CompareDemographicsCommon>
diff --git a/frontend/src/components/common/CompareDemographicModal.vue b/frontend/src/components/common/CompareDemographicModal.vue
index deccff819..b6c413c5d 100644
--- a/frontend/src/components/common/CompareDemographicModal.vue
+++ b/frontend/src/components/common/CompareDemographicModal.vue
@@ -17,10 +17,11 @@
     </template>
     <v-card id="requestInfoDialogCard">
       <CompareDemographicsCommon
-        v-if="compareModalOpen && !useEdxRelease"
+        v-if="compareModalOpen"
         v-model:selected-records="studentRecords"
         title="Compare/View"
         :close-compare-modal="closeCompareModal"
+        @refresh-sld-data="$emit('refresh-sld-data')"
       >
         <template #actions="{clearError, validateAction, disableMerge, disableDemerge, disableMoveSld, twin, merge, demerge, moveSldRecords}">
           <PrimaryButton
@@ -59,49 +60,6 @@
           />
         </template>
       </CompareDemographicsCommon>
-      <CompareDemographicsCommonV2
-        v-if="compareModalOpen && useEdxRelease"
-        v-model:selected-records="studentRecords"
-        title="Compare/View"
-        :close-compare-modal="closeCompareModal"
-      >
-        <template #actions="{clearError, validateAction, disableMerge, disableDemerge, disableMoveSld, twin, merge, demerge, moveSldRecords}">
-          <PrimaryButton
-            id="compareModalCancelBtn"
-            text="Cancel"
-            secondary
-            @click-action="[closeCompareModal(), clearError()]"
-          />
-          <PrimaryButton
-            id="moveSldBtn"
-            text="Move Sld Record"
-            primary
-            :disabled="disableMoveSld()"
-            @click-action="moveSldRecords()"
-          />
-          <PrimaryButton
-            id="twinBtn"
-            text="Twin"
-            primary
-            :disabled="validateAction()"
-            @click-action="twin()"
-          />
-          <PrimaryButton
-            id="demergeBtn"
-            text="Demerge"
-            primary
-            :disabled="disableDemerge()"
-            @click-action="demerge()"
-          />
-          <PrimaryButton
-            id="mergeBtn"
-            text="Merge PENs"
-            primary
-            :disabled="disableMerge()"
-            @click-action="merge()"
-          />
-        </template>
-      </CompareDemographicsCommonV2>
     </v-card>
   </v-dialog>
 </template>
@@ -113,15 +71,11 @@ import CompareDemographicsCommon from './CompareDemographicsCommon.vue';
 import {deepCloneObject} from '@/utils/common';
 import alertMixin from '@/mixins/alertMixin';
 import staleStudentRecordMixin from '@/mixins/staleStudentRecordMixin';
-import CompareDemographicsCommonV2 from '@/components/common/CompareDemographicsCommonV2.vue';
-import {mapState} from 'pinia';
-import {appStore} from '@/store/modules/app';
 
 export default {
   name: 'CompareDemographicModal',
   components: {
     CompareDemographicsCommon,
-    CompareDemographicsCommonV2,
     PrimaryButton,
     TertiaryButton
   },
@@ -140,7 +94,7 @@ export default {
       required: true
     }
   },
-  emits: ['update:selectedRecords','closeCompare'],
+  emits: ['update:selectedRecords','closeCompare', 'refresh-sld-data'],
   data() {
     return {
       compareModalOpen: false,
@@ -148,7 +102,6 @@ export default {
     };
   },
   computed: {
-    ...mapState(appStore, ['config']),
     studentRecords: {
       get: function() {
         return this.selectedRecords;
@@ -156,9 +109,6 @@ export default {
       set: function(value) {
         this.$emit('update:selectedRecords', value);
       }
-    },
-    useEdxRelease() {
-      return !this.config.DISABLE_SDC_FUNCTIONALITY;
     }
   },
   created() {
diff --git a/frontend/src/components/common/CompareDemographicsCommon.vue b/frontend/src/components/common/CompareDemographicsCommon.vue
index 3d100bea4..2e4912432 100644
--- a/frontend/src/components/common/CompareDemographicsCommon.vue
+++ b/frontend/src/components/common/CompareDemographicsCommon.vue
@@ -1,1094 +1,56 @@
 <template>
-  <v-card
-    fluid
-    class="px-4"
-    elevation="0"
-    style="overflow-y: auto;"
+  <component
+    :is="currentComponent"
+    v-model:selectedRecords="studentRecords"
+    v-bind="$props"
+    v-on="$attrs"
   >
-    <MergeStudentsModal
-      v-if="mergeStudentsModalOpen"
-      :merge-students-modal-open="mergeStudentsModalOpen"
-      :merged-to-student-i-d="mergedToStudentID"
-      :merged-from-student-i-d="mergedFromStudentID"
-      @merge-students-modal-open-emit="mergeStudentsModalOpenEmit"
-    />
-    <v-card-title class="px-0 py-5">
-      <v-row>
-        <v-col
-          v-if="title"
-          cols="2"
-          class="pr-0 py-0"
-        >
-          {{ title }}
-        </v-col>
-        <v-col
-          cols="2"
-          class="py-0 pr-0"
-        >
-          <v-text-field
-            id="enterAPenTxtField"
-            v-model="penToAdd"
-            variant="outlined"
-            density="compact"
-            label="Enter a PEN"
-            maxlength="9"
-            :disabled="studentRecords.length > 2"
-            :rules="penRules"
-            hide-details="auto"
-            @keyup.enter="enterPushed()"
-            @input="checkStudentStatusForValidPen()"
-          />
-        </v-col>
-        <v-col
-          class="py-0 pt-1"
-          cols="5"
-        >
-          <PrimaryButton
-            id="addPenBtn"
-            :disabled=" isLoadingStudent || !isValidPEN(penToAdd) || studentRecords.length >= 3"
-            :loading="isLoadingStudent"
-            text="Add PEN"
-            @click-action="addPEN"
-          />
-          <span
-            v-if="isSearchedPENMerged"
-            id="truePenMessage"
-            class="pl-1"
-            style="font-size: 1rem;"
-          >{{
-            truePenMessage
-          }} <a
-            :tabindex="0"
-            @click="updateAddPen()"
-            @keyup.enter="updateAddPen()"
-          > {{
-            truePen
-          }}</a></span>
-        </v-col>
-        <v-col class="py-0">
-          <v-btn
-            v-if="closeCompareModal"
-            id="closeCompareModalBtn"
-            variant="flat"
-            icon
-            @click="[closeCompareModal(), clearError()]"
-          >
-            <v-icon
-              large
-              color="#38598A"
-            >
-              mdi-close
-            </v-icon>
-          </v-btn>
-        </v-col>
-      </v-row>
-    </v-card-title>
-    <v-divider />
-    <v-data-table class="sldTable pb-2">
-      <template #default>
-        <thead>
-          <tr>
-            <th
-              v-for="(header, index) in headers"
-              :id="`${header.text}Header`"
-              class="header-font"
-              :key="index"
-              :title="header.tooltip"
-            >
-              {{ header.text }}
-            </th>
-          </tr>
-        </thead>
-      </template>
-    </v-data-table>
-    <div
-      v-for="(students, index) in studentRecords"
-      :key="index"
-      class="pb-2"
-    >
-      <v-row
-        id="studentDemographicsTableTopRow"
-        class="studentDemographicsTable"
-        no-gutters
-      >
-        <span class="pl-2 pr-0 flexBox">
-          <div>
-            <v-checkbox
-              v-model="checkedStudents[index]"
-              density="compact"
-              class="bannerCheckbox pa-0 ma-0"
-              hide-details="true"
-              color="#606060"
-              @update:model-value="validateAction"
-            />
-          </div>
-          <a
-            class="ml-2"
-            @click="updateSldRowDisplay(students.pen, !sldDataTablesToDisplay[students.pen])"
-          >
-            <v-icon
-              small
-              :icon="sldDataTablesToDisplay[students.pen]?'mdi-chevron-down':'mdi-chevron-up'"
-              color="#1A5A96"
-            />
-          </a>
-          <a
-            class="ml-1 pr-1"
-            @click="openStudentDetails(students.studentID)"
-          >
-            {{ formatPen(students.pen) }}
-          </a>
-          <v-tooltip
-            v-if="students['statusCode']==='M'"
-            bottom
-          >
-            <template #activator="{ props }">
-              <v-chip
-                v-if="students['statusCode']==='M'"
-                color="deep-purple"
-                text-color="white"
-                small
-                class="px-2"
-                v-bind="props"
-              >M</v-chip>
-            </template>
-            <span>Merged to {{ students.truePen }}</span>
-          </v-tooltip>
-        </span>
-        <span
-          v-for="(key, index) in studentDataHeaders"
-          :key="index"
-          :ref="key+`Col`"
-          class="pl-4 pr-3"
-        >
-          <span
-            v-if="key==='dob'"
-            ref="dobText"
-          >
-            {{ formatDob(students[key],'uuuu-MM-dd','uuuu/MM/dd') }}
-          </span>
-          <span v-else-if="key==='mincode'">{{ formatMincode(students[key]) }}</span>
-          <span v-else-if="key==='postalCode'">{{ formatPostalCode(students[key]) }}</span>
-          <span v-else>{{ students[key] }}</span>
-        </span>
-      </v-row>
-      <v-row
-        id="studentDemographicsTableBottomRow"
-        class="studentDemographicsTable pb-2"
-        no-gutters
-      >
-        <span class="pl-11">
-          Demog Code: {{ students.demogCode }}
-        </span>
-        <span class="pl-4 pr-3" />
-        <span class="pl-4 pr-3 bottom-field-item">{{ equalsIgnoreCase(students.legalLastName,students.usualLastName)? '' : students.usualLastName }}</span>
-        <span class="pl-4 pr-3 bottom-field-item">{{ equalsIgnoreCase(students.legalFirstName, students.usualFirstName)? '' : students.usualFirstName }}</span>
-        <span class="pl-4 pr-3 bottom-field-item">{{ equalsIgnoreCase(students.legalMiddleNames, students.usualMiddleNames)? '' : students.usualMiddleNames }}</span>
-        <span class="pl-4 pr-3" />
-        <span class="pl-4 pr-3" />
-        <v-spacer />
-        <a
-          class="removePenLink pr-3"
-          @click="removeRecord(students.studentID, index)"
-        >
-          <v-icon
-            small
-            color="#38598A"
-          >mdi-close</v-icon>
-          Remove Student
-        </a>
-      </v-row>
-      <v-data-table
-        v-if="sldDataTablesToDisplay[students.pen]"
-        class="sldTable"
-        :headers="headers"
-        :items="sldData[students.pen]"
-        :items-length="sldDataTablesNumberOfRows[students.pen]"
-        :items-per-page="sldDataTablesNumberOfRows[students.pen]"
-        @update:items-per-page="getSldData(students.pen)"
-      >
-        <template #headers />
-        <template #item="item">
-          <tr>
-            <td
-              v-for="header in item.columns"
-              :key="header.id"
-              :class="[header.id, existSldUsualName(item.item.raw)? 'two-rows-column' : 'one-row-column']"
-            >
-              <v-checkbox
-                v-if="header.type === 'select'"
-                v-model="item.item.raw.selected"
-                density="compact"
-                class="studentCheckbox pa-0 ma-0"
-                color="#606060"
-                :disabled="sldSelectDisabled(students.pen)"
-              />
-              <div
-                v-else-if="header.value === 'mincode'"
-                :class="existSldUsualName(item.item.raw)? 'flex-column-div' : 'flex-row-div'"
-              >
-                <span class="top-field-item">{{ item.item.raw.distNo + item.item.raw.schlNo }}</span>
-                <span
-                  v-if="existSldUsualName(item.item.raw)"
-                  class="bottom-field-item"
-                />
-              </div>
-              <div
-                v-else-if="header.value === 'legalSurname'"
-                :class="existSldUsualName(item.item.raw)? 'flex-column-div' : 'flex-row-div'"
-              >
-                <span class="top-field-item">{{ item.item.raw[header.value] }}</span>
-                <span
-                  v-if="existSldUsualName(item.item.raw)"
-                  class="bottom-field-item"
-                >{{ item.item.raw['usualSurname'] }}</span>
-              </div>
-              <div
-                v-else-if="header.value === 'legalGivenName'"
-                :class="existSldUsualName(item.item.raw)? 'flex-column-div' : 'flex-row-div'"
-              >
-                <span class="top-field-item">{{ item.item.raw[header.value] }}</span>
-                <span
-                  v-if="existSldUsualName(item.item.raw)"
-                  class="bottom-field-item"
-                >{{ item.item.raw['usualGivenName'] }}</span>
-              </div>
-              <div
-                v-else-if="header.value === 'legalMiddleName'"
-                :class="existSldUsualName(item.item.raw)? 'flex-column-div' : 'flex-row-div'"
-              >
-                <span class="top-field-item">{{ item.item.raw[header.value] }}</span>
-                <span
-                  v-if="existSldUsualName(item.item.raw)"
-                  class="bottom-field-item"
-                >{{ item.item.raw['usualMiddleName'] }}</span>
-              </div>
-              <div
-                v-else-if="header.value === 'birthDate'"
-                :class="existSldUsualName(item.item.raw)? 'flex-column-div' : 'flex-row-div'"
-              >
-                <span class="top-field-item">{{ formatDob(item.item.raw[header.value],'uuuuMMdd','uuuu/MM/dd') }}</span>
-                <span
-                  v-if="existSldUsualName(item.item.raw)"
-                  class="bottom-field-item"
-                />
-              </div>
-              <div
-                v-else
-                :class="existSldUsualName(item.item.raw)? 'flex-column-div' : 'flex-row-div'"
-              >
-                <span class="top-field-item">{{ item.item.raw[header.value] }}</span>
-                <span
-                  v-if="existSldUsualName(item.item.raw)"
-                  class="bottom-field-item"
-                />
-              </div>
-            </td>
-          </tr>
-        </template>
-      </v-data-table>
-      <v-row
-        v-show="sldDataTablesToDisplay[students.pen]"
-        class="pl-4"
-      >
-        <TertiaryButton
-          text="More"
-          icon="$plus"
-          @click-action="updateSldTableRows(students.pen, sldDataTablesNumberOfRows[students.pen] + 10)"
-        />
-        <TertiaryButton
-          text="Less"
-          icon="$minus"
-          @click-action="updateSldTableRows(students.pen, sldDataTablesNumberOfRows[students.pen] - 10)"
-        />
-      </v-row>
-    </div>
-    <v-progress-linear
-      indeterminate
-      color="blue"
-      :active="isProcessing"
-    />
-    <div v-if="selectedRecords && selectedRecords.length">
-      <v-divider />
-      <v-card-actions class="px-0">
-        <v-spacer />
-        <slot
-          name="actions"
-          :clear-error="clearError"
-          :validate-action="validateAction"
-          :disable-merge="disableMerge"
-          :disable-demerge="disableDemerge"
-          :disable-move-sld="disableMoveSld"
-          :merge="merge"
-          :demerge="demerge"
-          :twin="twin"
-          :move-sld-records="moveSldRecords"
-        />
-      </v-card-actions>
-    </div>
-    <ConfirmationDialog ref="confirmationDialog" :show-title-bar="false">
-      <template #message>
-        <v-row class="mb-3">
-          <v-col>
-            <span>Are you sure you want to demerge PENs <strong>{{ getMergedFromPen() }}</strong> and <strong>{{ getMergedToPen() }}</strong>?</span>
-          </v-col>
-        </v-row>
-      </template>
-    </ConfirmationDialog>
-    <ConfirmationDialog ref="moveSldConfirmationDialog" :show-title-bar="false">
-      <template #message>
-        <v-row>
-          <v-col>
-            <span>Are you sure you want to move the selected SLD records from <strong>{{ movedFromStudent.pen }}</strong> to <strong>{{ movedToStudent.pen }}</strong></span>?
-          </v-col>
-        </v-row>
-      </template>
-    </ConfirmationDialog>
-  </v-card>
+    <template #actions="slotProps">
+      <slot
+        name="actions"
+        v-bind="slotProps"
+      />
+    </template>
+  </component>
 </template>
-
+  >
 <script>
-import {formatDob, formatMincode, formatPen, formatPostalCode} from '@/utils/format';
-import PrimaryButton from '../util/PrimaryButton.vue';
-import ApiService from '../../common/apiService';
-import {REQUEST_TYPES, Routes, STUDENT_CODES} from '@/utils/constants';
-import {isValidPEN} from '@/utils/validation';
-import alertMixin from '@/mixins/alertMixin';
-import servicesSagaMixin from '@/mixins/servicesSagaMixin';
-import router from '../../router';
-import TertiaryButton from '../util/TertiaryButton.vue';
-import {equalsIgnoreCase, getMatchedRecordsByStudent, sortArrayByDate} from '@/utils/common';
-import ConfirmationDialog from '@/components/util/ConfirmationDialog.vue';
-import { mapState } from 'pinia';
-import MergeStudentsModal from '@/components/common/MergeStudentsModal.vue';
-import staleStudentRecordMixin from '@/mixins/staleStudentRecordMixin';
-import {notificationsStore} from '@/store/modules/notifications';
-import {studentStore} from '@/store/modules/student';
-import _ from 'lodash';
+
+import {mapState} from 'pinia';
+import {appStore} from '@/store/modules/app';
+import CompareDemographicsCommonV1 from '@/components/common/CompareDemographicsCommonV1.vue';
+import CompareDemographicsCommonV2 from '@/components/common/CompareDemographicsCommonV2.vue';
 
 export default {
-  emits: ['update:selectedRecords'],
   name: 'CompareDemographicsCommon',
-  components: {
-    TertiaryButton,
-    PrimaryButton,
-    ConfirmationDialog,
-    MergeStudentsModal
-  },
-  mixins: [alertMixin, servicesSagaMixin, staleStudentRecordMixin],
   props: {
     selectedRecords: {
       type: Array,
       required: true
     },
     title: {
-      type: String
+      type: String,
+      default: ''
     },
     closeCompareModal: {
       type: Function,
       default: null
     }
   },
-  data() {
-    return {
-      studentDataHeaders: [
-        'mincode',
-        'legalLastName',
-        'legalFirstName',
-        'legalMiddleNames',
-        'genderCode',
-        'dob',
-        'localID',
-        'gradeCode',
-        'postalCode',
-      ],
-      headers: [
-        { id: 'table-checkbox', type: 'select', sortable: false },
-        {text: 'Date', value: 'reportDate', key: 'date', sortable: false, tooltip: 'Activity Date'},
-        {text: 'Mincode', value: 'mincode', key: 'mincode', sortable: false, tooltip: 'Mincode'},
-        {text: 'Surname', value: 'legalSurname', key: 'surname', sortable: false, tooltip: 'Legal Surname'},
-        {text: 'Given', value: 'legalGivenName', key: 'givenName', sortable: false, tooltip: 'Legal Given Name'},
-        {text: 'Middle', value: 'legalMiddleName', key: 'middleName', sortable: false, tooltip: 'Legal Middle Name'},
-        {text: 'Gen', value: 'sex', key: 'gender', sortable: false, tooltip: 'Gender'},
-        {text: 'Birth Date', value: 'birthDate', key: 'dob', sortable: false, tooltip: 'Birth Date'},
-        {text: 'Local ID', value: 'localStudentId', key: 'localId', sortable: false, tooltip: 'Local ID'},
-        {text: 'Gr', value: 'enrolledGradeCode', key: 'grade', sortable: false, tooltip: 'Student Grade'},
-        {text: 'Postal Code', value: 'postal', key: 'postalCode', sortable: false, tooltip: 'Postal Code'},
-      ],
-      penToAdd: null,
-      penRules: [v => (!v || isValidPEN(v)) || this.penHint],
-      penHint: 'Invalid PEN',
-      studentDNEErrorMessage: 'Error! This student does not exist in the system.',
-      penAlreadyAddedErrorMessage: 'Pen already added to compare list.',
-      fetchingStudentErrorMessage: 'Error occurred while fetching student, Please try again later.',
-      sldData: {},
-      storedSldData: {},
-      sldDataTablesToDisplay: {},
-      sldDataTablesNumberOfRows: {},
-      checkedStudents: [],
-      isStudentDataUpdated: false,
-      isLoadingStudent: false,
-      isSearchedPENMerged: false,
-      studentDataMap: new Map(),
-      mergeStudentsModalOpen: false,
-      mergedToStudentID: '',
-      mergedFromStudentID: '',
-      movedFromStudent: {},
-      movedToStudent: {},
-    };
-  },
-  watch: {
-    notification(val) {
-      if (val) {
-        const notificationData = val;
-        if (notificationData.sagaName === 'PEN_SERVICES_STUDENT_DEMERGE_COMPLETE_SAGA' && this.sagaId === notificationData.sagaId && notificationData.studentID === this.mergedFromStudent?.studentID && notificationData.sagaStatus === 'COMPLETED') {
-          this.notifyDemergeSagaCompleteMessage();
-          // Open students in new tabs
-          setTimeout(() => {
-            this.openStudentDetails(this.mergedToStudent.studentID);
-          }, 1000);
-          setTimeout(() => {
-            this.openStudentDetails(this.mergedFromStudent.studentID);
-          }, 500);
-        } else if (notificationData.sagaName === 'PEN_SERVICES_MOVE_SLD_SAGA' && notificationData.sagaStatus === 'COMPLETED') {
-          this.handleMoveSldSagaCompleteMessage(notificationData);
-        } else if (notificationData.eventType === 'UPDATE_STUDENT' && notificationData.eventOutcome === 'STUDENT_UPDATED' && notificationData.eventPayload) {
-          this.showWarningAndDisableActionIfUpdatedStudentMatched(notificationData);
-        }
-      }
+  emits: ['update:selectedRecords'],
+  computed:{
+    ...mapState(appStore, ['config']),
+    currentComponent() {
+      return this.config.DISABLE_SDC_FUNCTIONALITY ? CompareDemographicsCommonV1 : CompareDemographicsCommonV2;
     },
-  },
-  mounted() {
-    this.studentRecords.forEach(student => {
-      this.getSldData(student.pen);
-      if(student.trueStudentID) {
-        this.getTrueStudent(student, student.trueStudentID);
-      }
-    });
-    this.checkedStudents = [];
-  },
-  computed: {
-    ...mapState(notificationsStore, ['notification']),
     studentRecords: {
-      get: function() {
-        return this.sortStudents(this.selectedRecords);
+      get() {
+        return this.selectedRecords;
       },
-      set: async function(value) {
+      set(value) {
         this.$emit('update:selectedRecords', value);
       }
-    },
-    checkedSldStudents() {
-      return Object.values(this.sldData).flatMap(records => records.filter(record => record.selected));
-    },
-  },
-  methods: {
-    ...mapState(studentStore, ['setStudentInProcessStatus', 'clearStudentInProcessStatus']),
-    equalsIgnoreCase,
-    sortStudents(array){
-      return array.sort(this.sortStudentRecordsForCompare);
-    },
-    sortStudentRecordsForCompare(student1, student2){
-      let student1digit = student1.pen.substring(0,1);
-      let student2digit = student2.pen.substring(0,1);
-      //Determine which is the oldest, which will be mergedToPen
-      //If two PENs are merged and neither start with "1", or both start with "1" use the lowest number as the survivor
-      //If two PENs are merged and one starts with "1" and other starts with something else, the other is the survivor
-      if((student1digit == '1' && student2digit == '1') || (student1digit != '1' && student2digit != '1')) {
-        return (student1.pen > student2.pen) ? 1 : -1;
-      } else {
-        return (student1.pen < student2.pen) ? 1 : -1;
-      }
-    },
-    addPEN() {
-      const isRecordAlreadyAdded = this.studentRecords.find(el => el.pen === this.penToAdd);
-      if (isRecordAlreadyAdded) {
-        this.setFailureAlert(this.penAlreadyAddedErrorMessage);
-        return;
-      }
-      this.getSldData(this.penToAdd);
-      const student = this.studentDataMap.get(this.penToAdd);
-      if (student) {
-        this.studentRecords.push(student);
-        this.studentRecords = _.sortBy(this.studentRecords, o => o.pen);
-        this.penToAdd = null;
-        this.truePenMessage = null;
-        this.truePen = null;
-        this.isSearchedPENMerged = false;
-      } else {
-        ApiService.apiAxios
-          .get(Routes['student'].ROOT_ENDPOINT + '/', {params: {pen: this.penToAdd}})
-          .then(response => {
-            this.studentRecords.push(response.data);
-            this.studentRecords = _.sortBy(this.studentRecords, o => o.pen);
-          })
-          .catch(error => {
-            console.log(error);
-            this.setFailureAlert(this.studentDNEErrorMessage);
-          })
-          .finally(() => {
-            this.penToAdd = null;
-          });
-      }
-    },
-    clearError() {
-      this.penToAdd = null;
-    },
-    enterPushed() {
-      this.addPEN();
-    },
-    updateAddPen() {
-      const isRecordAlreadyAdded = this.studentRecords.find(el => el.pen === this.truePen);
-      if (isRecordAlreadyAdded) {
-        this.setFailureAlert(this.penAlreadyAddedErrorMessage);
-        return;
-      }
-      this.penToAdd = this.truePen;
-      this.addPEN();
-    },
-    async checkStudentStatusForValidPen() {
-      const isProceed = this.penToAdd && this.isValidPEN(this.penToAdd) && (!this.studentRecords || this.studentRecords?.length < 3);
-      if (isProceed) {
-        this.isLoadingStudent = true;
-        this.truePenMessage = null;
-        this.truePen = null;
-        this.isSearchedPENMerged = false;
-        try {
-          const studentResponse = await ApiService.apiAxios
-            .get(Routes['student'].ROOT_ENDPOINT + '/', {params: {pen: this.penToAdd}});
-          const student = studentResponse.data;
-          this.studentDataMap.set(student.pen, student);
-          if (student.statusCode === STUDENT_CODES.MERGED) {
-            const trueStudentResponse = await this.getTrueStudent(student, student.trueStudentID);
-            this.studentDataMap.set(trueStudentResponse.data.pen, trueStudentResponse.data);
-            this.truePenMessage = `${student.pen} is Merged to `;
-            this.truePen = trueStudentResponse.data.pen;
-            this.isSearchedPENMerged = true;
-          }
-        } catch (error) {
-          if (error?.response?.status === 404 && error?.response?.data?.message) {
-            this.setFailureAlert(this.studentDNEErrorMessage);
-          } else {
-            this.setFailureAlert(this.fetchingStudentErrorMessage);
-          }
-        } finally {
-          this.isLoadingStudent = false;
-        }
-      } else {
-        // reset values if the entered pen is removed
-        this.truePenMessage = null;
-        this.truePen = null;
-        this.isSearchedPENMerged = false;
-      }
-    },
-    formatDob,
-    formatMincode,
-    formatPostalCode,
-    formatPen,
-    sortArrayByDate,
-    getMatchedRecordsByStudent,
-    getSldData(pen) {
-      ApiService.apiAxios
-        .get(Routes['sld'].STUDENT_HISTORY_URL + '/', {params: {pen: pen}})
-        .then(response => {
-          if (response?.data?.length > 0) {
-            response.data = this.sortArrayByDate(response.data, 'reportDate', false);
-            response.data.forEach(sld => sld.selected = false);
-          }
-          this.storedSldData[pen] = response.data;
-          this.updateSldRowDisplay(pen, true);
-          this.updateSldTableRows(pen, 10);
-        })
-        .catch(error => {
-          console.log(error);
-          this.setFailureAlert(this.studentDNEErrorMessage);
-        });
-    },
-    async getTrueStudent(student, trueStudentID) {
-      const trueStudent = await ApiService.apiAxios.get(Routes['student'].ROOT_ENDPOINT + '/demographics/' + trueStudentID);
-      student.truePen = trueStudent.data.pen;
-      return trueStudent;
-    },
-    isValidPEN,
-    existSldUsualName(sldData) {
-      return !!sldData.usualSurname || !!sldData.usualGivenName || !!sldData.usualMiddleName;
-    },
-    openStudentDetails(studentID) {
-      const route = router.resolve({ name: REQUEST_TYPES.student.label, params: {studentID: studentID}});
-      window.open(route.href, '_blank');
-    },
-    removeRecord(studentID, index) {
-      const student = this.studentRecords.find(item => item.studentID === studentID);
-      this.studentRecords = this.studentRecords.filter(item => item.studentID !== studentID);
-      this.checkedStudents = this.checkedStudents.filter((item, idx) => idx !== index);
-      this.validateAction();
-      this.updateSldRowDisplay(student.pen, false);
-      this.resetSldSelection();
-    },
-    updateSldRowDisplay(id, value) {
-      this.sldDataTablesToDisplay[id] = value;
-    },
-    updateSldTableRows(id, value) {
-      if(value < 0) {
-        value = 0;
-      } else if(value > this.storedSldData[id]?.length) {
-        value = this.storedSldData[id]?.length;
-      }
-      this.sldDataTablesNumberOfRows[id] = value;
-
-      if(value === 0){
-        this.sldData[id] = [];
-      }else{
-        this.sldData[id] = this.storedSldData[id].slice(0, value);
-      }
-    },
-    validateAction() {
-      let cnt = 0;
-      this.checkedStudents.forEach(checked => cnt += checked ? 1 : 0);
-      return cnt !== 2;
-    },
-    disableMerge() {
-      if (this.validateAction()) {
-        return true;
-      }
-      const selectedStudents = this.getSelectedStudents();
-      if (selectedStudents.length === 2) {
-        return this.validateStudentsAreMerged(selectedStudents[0], selectedStudents[1]);
-      }
-      return true;
-    },
-    disableDemerge() {
-      if (this.isProcessing || this.demergeSagaComplete) {
-        return true;
-      }
-      if (this.validateAction()) {
-        return true;
-      }
-
-      const selectedStudents = this.getSelectedStudents();
-      if (selectedStudents.length === 2) {
-        return !this.validateStudentsAreMerged(selectedStudents[0], selectedStudents[1]);
-      }
-      return true;
-    },
-    disableMoveSld() {
-      return this.isProcessing || this.checkedSldStudents.length <= 0;
-    },
-    validateTwinRecordsExist(studentID, twinStudentID) {
-      return getMatchedRecordsByStudent(studentID)
-        .then(data => {
-          if (data && data.length > 0) {
-            const twin = data.find(item => item.matchedStudentID === twinStudentID || item.studentID === twinStudentID);
-            if (twin) {
-              this.setFailureAlert('Error! Records are already twinned.');
-              return true;
-            }
-          }
-          return false;
-        })
-        .catch(error => {
-          this.setFailureAlert('An error occurred while loading the possible matches in twin validation. Please try again later.');
-          console.log(error);
-          return true;  // set true to make the validation failed
-        });
-    },
-    getSelectedStudents() {
-      return this.checkedStudents.map((checked, idx) => {
-        if (!checked) {
-          return false;
-        } else {
-          return this.studentRecords[idx];
-        }
-      }).filter(item => !!item);
-    },
-    async twin() {
-      const selectedStudents = this.getSelectedStudents();
-      let warningMessage = this.getWarningMessage();
-      if (warningMessage) {
-        this.setWarningAlert(warningMessage);
-        return;
-      }
-      // Determine which is the oldest, which will be mergedToPen
-      let student = selectedStudents[0];
-      let twinStudent = selectedStudents[1];
-
-      // Same Pen validation
-      if (this.validateStudentsHaveSamePen(student, twinStudent,
-        'Error! PENs cannot be twinned, as same PENs are selected.')) {
-        return;
-      }
-      // Status validation
-      if (this.validateStudentIsStatusOfMerged(student, twinStudent,
-        'Error! PENs cannot be twinned, as one of the PENs has a status of merged.')) {
-        return;
-      }
-      // Twins validation
-      const hasAnyTwins = await this.validateTwinRecordsExist(student.studentID, twinStudent.studentID);
-      if (hasAnyTwins) {
-        return;
-      }
-
-      const twinRequests = [
-        {
-          studentID: student.studentID,
-          matchedStudentID: twinStudent.studentID,
-          matchReasonCode: 'MINISTRY',
-        }
-      ];
-
-      return ApiService.apiAxios
-        .post(Routes['penMatch'].POSSIBLE_MATCHES, twinRequests)
-        .then(() => {
-          this.setSuccessAlert('Success! The two records have been twinned.');
-        })
-        .catch(error => {
-          this.setFailureAlert('An error occurred while saving twinned students. Please try again later.');
-          console.log(error);
-        });
-    },
-    async merge() {
-      const selectedStudents = this.getSelectedStudents();
-      let warningMessage = this.getWarningMessage();
-      if (warningMessage) {
-        this.setWarningAlert(warningMessage);
-        return;
-      }
-
-      let student1digit = selectedStudents[0].pen.substring(0,1);
-      let student2digit = selectedStudents[1].pen.substring(0,1);
-
-      // Determine which is the oldest, which will be mergedToPen
-      //If two PENs are merged and neither start with "1", or both start with "1" use the lowest number as the survivor
-      //If two PENs are merged and one starts with "1" and other starts with something else, the other is the survivor
-      if((student1digit == '1' && student2digit == '1') || (student1digit != '1' && student2digit != '1')) {
-        [this.mergedToStudent, this.mergedFromStudent] = _.sortBy(selectedStudents, ['pen']);
-      } else {
-        [this.mergedFromStudent, this.mergedToStudent ] = _.sortBy(selectedStudents, ['pen']);
-      }
-
-      // Same Pen validation
-      if (this.validateStudentsHaveSamePen(this.mergedToStudent, this.mergedFromStudent,
-        'Error! PENs cannot be merged, as same PENs are selected.')) {
-        return;
-      }
-      // Status validation
-      if (this.validateStudentIsStatusOfMerged(this.mergedToStudent, this.mergedFromStudent,
-        'Error! PENs cannot be merged, as one of the PENs has a status of merged.')) {
-        return;
-      }
-      // Merge validation
-      const hasAnyMergedFrom = await this.validateStudentHasAnyMergedFrom(this.mergedFromStudent.studentID);
-      if (hasAnyMergedFrom) {
-        return;
-      }
-
-      // open the merge student / pen modal and the following two values are its props
-      this.mergeStudentsModalOpen = true;
-      this.mergedToStudentID = this.mergedToStudent.studentID;
-      this.mergedFromStudentID = this.mergedFromStudent.studentID;
-    },
-    async demerge() {
-      const selectedStudents = this.getSelectedStudents();
-      let warningMessage = this.getWarningMessage();
-      if (warningMessage) {
-        this.setWarningAlert(warningMessage);
-        return;
-      }
-      if (selectedStudents[0].statusCode === 'M') { // This check is enough as validateDemerge is performed before.
-        this.mergedFromStudent = selectedStudents[0];
-        this.mergedToStudent = selectedStudents[1];
-      } else {
-        this.mergedFromStudent = selectedStudents[1];
-        this.mergedToStudent = selectedStudents[0];
-      }
-
-      let result = await this.$refs.confirmationDialog.open(null, null,
-        {color: '#fff', width: 580, closeIcon: true, dark: false, rejectText: 'No'});
-      if (!result) {
-        return;
-      }
-      await this.executeDemerge();
-    },
-    async moveSldRecords() {
-      let warningMessage = this.getWarningMessage();
-      if (warningMessage) {
-        this.setWarningAlert(warningMessage);
-        return;
-      }
-
-      this.movedFromStudent = this.studentRecords.find(student => this.checkedSldStudents.some(record => record.pen.startsWith(student.pen)));
-      this.movedToStudent = this.studentRecords.find(student => student.pen !== this.movedFromStudent.pen);
-
-      let result = await this.$refs.moveSldConfirmationDialog.open(null, null,
-        {color: '#fff', width: 580, closeIcon: true, dark: false, resolveText: 'Move'});
-      if (!result) {
-        return;
-      }
-      
-      this.setStudentInProcessStatus(this.movedFromStudent.studentID);
-      this.isProcessing = true;
-      const moveSldSagaData = this.checkedSldStudents.map(record => {
-        return _.pick(record, ['pen', 'distNo', 'schlNo', 'reportDate', 'studentId']);
-      });
-      const moveSldRequest = {
-        moveSldSagaData, 
-        movedToPen: this.movedToStudent.pen,
-        studentID: this.movedFromStudent.studentID
-      };
-      ApiService.apiAxios
-        .post(Routes['penServices'].ROOT_ENDPOINT + '/' + this.movedFromStudent.studentID + '/move-sld', moveSldRequest)
-        .then(response => {
-          this.setSuccessAlert('Your request to move sld records is accepted.');
-          this.sagaId = response.data;
-        })
-        .catch(error => {
-          console.log(error);
-          this.isProcessing = false;
-          this.clearStudentInProcessStatus(this.movedFromStudent.studentID);
-          if (error?.response?.status === 409 && error?.response?.data?.message) {
-            this.setFailureAlert(error?.response?.data?.message);
-          } else {
-            this.setFailureAlert('Your request to move sld records could not be accepted, please try again later.');
-          }
-        });
-    },
-    showWarningAndDisableActionIfUpdatedStudentMatched(notificationData){
-      try {
-        const student = JSON.parse(notificationData.eventPayload);
-        if (student?.pen &&  !this.isProcessing && this.studentRecords?.some(el => el?.pen === student.pen)) {
-          this.isStudentDataUpdated = true;
-          const warningMessage = `Student details for ${student.pen} is updated by ${student.updateUser}, Please refresh the page.`;
-          this.setWarningAlert(warningMessage);
-          const studentID = student.studentID;
-          this.addStaleDataToMap({studentID, warningMessage});
-        }
-      } catch (e) {
-        console.error(e);
-      }
-    },
-    mergeStudentsModalOpenEmit(value) {
-      this.mergeStudentsModalOpen = value;
-    },
-    getWarningMessage() {
-      let warningMessage;
-      for (const stud of this.getSelectedStudents()) {
-        warningMessage = this.getMessageForStudent(stud.studentID);
-        if (warningMessage) {
-          break;
-        }
-      }
-      return warningMessage;
-    },
-    sldSelectDisabled(pen) {
-      const isMergedOrDeceased = this.studentRecords.some(student => student.statusCode === STUDENT_CODES.MERGED || student.statusCode === STUDENT_CODES.DECEASED);
-      return this.isProcessing || this.studentRecords.length !== 2 || isMergedOrDeceased || this.checkedSldStudents.some(record => !record.pen.startsWith(pen));
-    },
-    resetSldSelection(){
-      this.checkedSldStudents.forEach(record => record.selected = false);
-    },
-    handleMoveSldSagaCompleteMessage(notificationData) {
-      if(this.sagaId === notificationData.sagaId && notificationData.studentID === this.movedFromStudent?.studentID) {
-        this.notifyMoveSldSagaCompleteMessage();
-      } else {
-        this.showWarningAndDisableActionIfMovedSldStudentMatched(notificationData.studentID);
-      }
-    },
-    notifyMoveSldSagaCompleteMessage() {
-      this.setSuccessAlert('Success! Your request to move sld records is completed.');
-      this.isProcessing = false;
-      this.studentRecords.forEach(student => {
-        this.getSldData(student.pen);
-      });
-      this.resetSldSelection();
-    },
-    showWarningAndDisableActionIfMovedSldStudentMatched(studentID){
-      const student = this.studentRecords?.find(el => el?.studentID === studentID);
-      if (!this.isProcessing && student) {
-        const warningMessage = `SLD records for ${student.pen} is updated by other users, Please refresh the page.`;
-        this.setWarningAlert(warningMessage);
-        this.addStaleDataToMap({studentID, warningMessage});
-      }
-    },
-  },
+    }
+  }
 };
 </script>
-
-<style scoped>
-  #addPenBtn {
-    height: 2.858em;
-  }
-  #closeCompareModalBtn {
-    float: right;
-  }
-  .paginatedButtons {
-    color: #38598A;
-  }
-
-  .header-font {
-    font-size: 0.9em;
-    font-weight: bold !important;
-  }
-
-  .sldTable :deep(.one-row-column) {
-    height: 32px !important;
-  }
-  .sldTable :deep(.two-rows-column) {
-    height: 42px !important;
-  }
-  .studentDemographicsTable a {
-    color: #1A5A96;
-  }
-  .studentDemographicsTable {
-    background-color: #eeeeee;
-    font-size: 0.875rem;
-    color: rgba(0, 0, 0, 1);
-  }
-  .studentDemographicsTable :deep(.bottom-field-item) {
-    font-style: italic;
-  }
-
-  #studentDemographicsTableTopRow > span:nth-child(1) {
-    vertical-align: top;
-    padding-top: 6px;
-    width: 15%;
-  }
-
-  #studentDemographicsTableTopRow > span:nth-child(9),
-  #studentDemographicsTableTopRow > span:nth-child(6) {
-    vertical-align: top;
-    padding-top: 6px;
-    width: 5%;
-  }
-  #studentDemographicsTableTopRow > span:nth-child(2),
-  #studentDemographicsTableTopRow > span:nth-child(8) {
-    vertical-align: top;
-    padding-top: 6px;
-    width: 10%;
-  }
-  #studentDemographicsTableTopRow > span:nth-child(10) {
-    vertical-align: top;
-    padding-top: 6px;
-    text-align: right;
-    width: 9%;
-  }
-  #studentDemographicsTableTopRow > span:nth-child(7) {
-    vertical-align: top;
-    padding-top: 6px;
-    width: 10%;
-  }
-  #studentDemographicsTableTopRow > span:nth-child(3),
-  #studentDemographicsTableTopRow > span:nth-child(4),
-  #studentDemographicsTableTopRow > span:nth-child(5) {
-    vertical-align: top;
-    padding-top: 6px;
-    width: 12%;
-  }
-
-  #studentDemographicsTableBottomRow /deep/ span:nth-child(1) {
-    vertical-align: top;
-    width: 15%;
-  }
-  #studentDemographicsTableBottomRow /deep/ span:nth-child(2) {
-    vertical-align: top;
-    width: 10%;
-  }
-  #studentDemographicsTableBottomRow /deep/ span:nth-child(6) {
-    vertical-align: top;
-    width: 5%;
-  }
-  #studentDemographicsTableBottomRow /deep/ span:nth-child(7) {
-    vertical-align: top;
-    width: 10%;
-  }
-  #studentDemographicsTableBottomRow /deep/ span:nth-child(3),
-  #studentDemographicsTableBottomRow /deep/ span:nth-child(4),
-  #studentDemographicsTableBottomRow /deep/ span:nth-child(5) {
-    vertical-align: top;
-    width: 12%;
-  }
-
-  .sldTable {
-    font-size: 0.9rem;
-  }
-
-  .sldTable .flex-row-div {
-    height: 21px !important;
-  }
-
-  .sldTable .flex-column-div {
-    display: flex;
-    flex-direction: column;
-    height: 42px !important;
-  }
-
-  .sldTable .top-field-item {
-    margin: 0px;
-    padding: 0px;
-  }
-
-  .sldTable .bottom-field-item {
-    font-style: italic;
-    margin: 0px;
-    padding: 0px;
-  }
-
-  .sldTable /deep/ tr th:nth-child(1),
-  .sldTable /deep/ tr th:nth-child(7),
-  .sldTable /deep/ tr th:nth-child(10),
-  .sldTable /deep/ tr td:nth-child(1),
-  .sldTable /deep/ tr td:nth-child(7),
-  .sldTable /deep/ tr td:nth-child(10) {
-    width: 5%;
-  }
-  .sldTable /deep/ tr th:nth-child(9),
-  .sldTable /deep/ tr th:nth-child(8),
-  .sldTable /deep/ tr th:nth-child(3),
-  .sldTable /deep/ tr th:nth-child(2),
-  .sldTable /deep/ tr td:nth-child(9),
-  .sldTable /deep/ tr td:nth-child(8),
-  .sldTable /deep/ tr td:nth-child(3)
-   {
-    width: 10%;
-  }
-  .sldTable /deep/ tr td:nth-child(2)
-  {
-    width: 10%;
-  }
-  .sldTable /deep/ tr th:nth-child(11),
-  .sldTable /deep/ tr td:nth-child(11){
-    width: 10%;
-    text-align: right !important;
-    padding-right: 12px;
-  }
-  .sldTable /deep/ tr th:nth-child(4),
-  .sldTable /deep/ tr th:nth-child(5),
-  .sldTable /deep/ tr th:nth-child(6),
-  .sldTable /deep/ tr td:nth-child(4),
-  .sldTable /deep/ tr td:nth-child(5),
-  .sldTable /deep/ tr td:nth-child(6) {
-    width: 12%;
-  }
-
-  .studentCheckbox :deep(.v-input__details){
-      display: none;
-  }
-
-  .bannerCheckbox :deep(.v-input__control){
-      height: 24px !important;
-  }
-
-  .flexBox {
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-start;
-
-    /*padding: 8px 12px;*/
-  }
-  .flexBox a {
-    margin-top: 2px;
-    margin-left: 12px;
-  }
-
-  :deep(.v-data-table-footer){
-      display: none;
-  }
-</style>
diff --git a/frontend/src/components/common/CompareDemographicsCommonV1.vue b/frontend/src/components/common/CompareDemographicsCommonV1.vue
new file mode 100644
index 000000000..cc5e927ce
--- /dev/null
+++ b/frontend/src/components/common/CompareDemographicsCommonV1.vue
@@ -0,0 +1,1094 @@
+<template>
+  <v-card
+    fluid
+    class="px-4"
+    elevation="0"
+    style="overflow-y: auto;"
+  >
+    <MergeStudentsModal
+      v-if="mergeStudentsModalOpen"
+      :merge-students-modal-open="mergeStudentsModalOpen"
+      :merged-to-student-i-d="mergedToStudentID"
+      :merged-from-student-i-d="mergedFromStudentID"
+      @merge-students-modal-open-emit="mergeStudentsModalOpenEmit"
+    />
+    <v-card-title class="px-0 py-5">
+      <v-row>
+        <v-col
+          v-if="title"
+          cols="2"
+          class="pr-0 py-0"
+        >
+          {{ title }}
+        </v-col>
+        <v-col
+          cols="2"
+          class="py-0 pr-0"
+        >
+          <v-text-field
+            id="enterAPenTxtField"
+            v-model="penToAdd"
+            variant="outlined"
+            density="compact"
+            label="Enter a PEN"
+            maxlength="9"
+            :disabled="studentRecords.length > 2"
+            :rules="penRules"
+            hide-details="auto"
+            @keyup.enter="enterPushed()"
+            @input="checkStudentStatusForValidPen()"
+          />
+        </v-col>
+        <v-col
+          class="py-0 pt-1"
+          cols="5"
+        >
+          <PrimaryButton
+            id="addPenBtn"
+            :disabled=" isLoadingStudent || !isValidPEN(penToAdd) || studentRecords.length >= 3"
+            :loading="isLoadingStudent"
+            text="Add PEN"
+            @click-action="addPEN"
+          />
+          <span
+            v-if="isSearchedPENMerged"
+            id="truePenMessage"
+            class="pl-1"
+            style="font-size: 1rem;"
+          >{{
+            truePenMessage
+          }} <a
+            :tabindex="0"
+            @click="updateAddPen()"
+            @keyup.enter="updateAddPen()"
+          > {{
+            truePen
+          }}</a></span>
+        </v-col>
+        <v-col class="py-0">
+          <v-btn
+            v-if="closeCompareModal"
+            id="closeCompareModalBtn"
+            variant="flat"
+            icon
+            @click="[closeCompareModal(), clearError()]"
+          >
+            <v-icon
+              large
+              color="#38598A"
+            >
+              mdi-close
+            </v-icon>
+          </v-btn>
+        </v-col>
+      </v-row>
+    </v-card-title>
+    <v-divider />
+    <v-data-table class="sldTable pb-2">
+      <template #default>
+        <thead>
+          <tr>
+            <th
+              v-for="(header, index) in headers"
+              :id="`${header.text}Header`"
+              class="header-font"
+              :key="index"
+              :title="header.tooltip"
+            >
+              {{ header.text }}
+            </th>
+          </tr>
+        </thead>
+      </template>
+    </v-data-table>
+    <div
+      v-for="(students, index) in studentRecords"
+      :key="index"
+      class="pb-2"
+    >
+      <v-row
+        id="studentDemographicsTableTopRow"
+        class="studentDemographicsTable"
+        no-gutters
+      >
+        <span class="pl-2 pr-0 flexBox">
+          <div>
+            <v-checkbox
+              v-model="checkedStudents[index]"
+              density="compact"
+              class="bannerCheckbox pa-0 ma-0"
+              hide-details="true"
+              color="#606060"
+              @update:model-value="validateAction"
+            />
+          </div>
+          <a
+            class="ml-2"
+            @click="updateSldRowDisplay(students.pen, !sldDataTablesToDisplay[students.pen])"
+          >
+            <v-icon
+              small
+              :icon="sldDataTablesToDisplay[students.pen]?'mdi-chevron-down':'mdi-chevron-up'"
+              color="#1A5A96"
+            />
+          </a>
+          <a
+            class="ml-1 pr-1"
+            @click="openStudentDetails(students.studentID)"
+          >
+            {{ formatPen(students.pen) }}
+          </a>
+          <v-tooltip
+            v-if="students['statusCode']==='M'"
+            bottom
+          >
+            <template #activator="{ props }">
+              <v-chip
+                v-if="students['statusCode']==='M'"
+                color="deep-purple"
+                text-color="white"
+                small
+                class="px-2"
+                v-bind="props"
+              >M</v-chip>
+            </template>
+            <span>Merged to {{ students.truePen }}</span>
+          </v-tooltip>
+        </span>
+        <span
+          v-for="(key, index) in studentDataHeaders"
+          :key="index"
+          :ref="key+`Col`"
+          class="pl-4 pr-3"
+        >
+          <span
+            v-if="key==='dob'"
+            ref="dobText"
+          >
+            {{ formatDob(students[key],'uuuu-MM-dd','uuuu/MM/dd') }}
+          </span>
+          <span v-else-if="key==='mincode'">{{ formatMincode(students[key]) }}</span>
+          <span v-else-if="key==='postalCode'">{{ formatPostalCode(students[key]) }}</span>
+          <span v-else>{{ students[key] }}</span>
+        </span>
+      </v-row>
+      <v-row
+        id="studentDemographicsTableBottomRow"
+        class="studentDemographicsTable pb-2"
+        no-gutters
+      >
+        <span class="pl-11">
+          Demog Code: {{ students.demogCode }}
+        </span>
+        <span class="pl-4 pr-3" />
+        <span class="pl-4 pr-3 bottom-field-item">{{ equalsIgnoreCase(students.legalLastName,students.usualLastName)? '' : students.usualLastName }}</span>
+        <span class="pl-4 pr-3 bottom-field-item">{{ equalsIgnoreCase(students.legalFirstName, students.usualFirstName)? '' : students.usualFirstName }}</span>
+        <span class="pl-4 pr-3 bottom-field-item">{{ equalsIgnoreCase(students.legalMiddleNames, students.usualMiddleNames)? '' : students.usualMiddleNames }}</span>
+        <span class="pl-4 pr-3" />
+        <span class="pl-4 pr-3" />
+        <v-spacer />
+        <a
+          class="removePenLink pr-3"
+          @click="removeRecord(students.studentID, index)"
+        >
+          <v-icon
+            small
+            color="#38598A"
+          >mdi-close</v-icon>
+          Remove Student
+        </a>
+      </v-row>
+      <v-data-table
+        v-if="sldDataTablesToDisplay[students.pen]"
+        class="sldTable"
+        :headers="headers"
+        :items="sldData[students.pen]"
+        :items-length="sldDataTablesNumberOfRows[students.pen]"
+        :items-per-page="sldDataTablesNumberOfRows[students.pen]"
+        @update:items-per-page="getSldData(students.pen)"
+      >
+        <template #headers />
+        <template #item="item">
+          <tr>
+            <td
+              v-for="header in item.columns"
+              :key="header.id"
+              :class="[header.id, existSldUsualName(item.item.raw)? 'two-rows-column' : 'one-row-column']"
+            >
+              <v-checkbox
+                v-if="header.type === 'select'"
+                v-model="item.item.raw.selected"
+                density="compact"
+                class="studentCheckbox pa-0 ma-0"
+                color="#606060"
+                :disabled="sldSelectDisabled(students.pen)"
+              />
+              <div
+                v-else-if="header.value === 'mincode'"
+                :class="existSldUsualName(item.item.raw)? 'flex-column-div' : 'flex-row-div'"
+              >
+                <span class="top-field-item">{{ item.item.raw.distNo + item.item.raw.schlNo }}</span>
+                <span
+                  v-if="existSldUsualName(item.item.raw)"
+                  class="bottom-field-item"
+                />
+              </div>
+              <div
+                v-else-if="header.value === 'legalSurname'"
+                :class="existSldUsualName(item.item.raw)? 'flex-column-div' : 'flex-row-div'"
+              >
+                <span class="top-field-item">{{ item.item.raw[header.value] }}</span>
+                <span
+                  v-if="existSldUsualName(item.item.raw)"
+                  class="bottom-field-item"
+                >{{ item.item.raw['usualSurname'] }}</span>
+              </div>
+              <div
+                v-else-if="header.value === 'legalGivenName'"
+                :class="existSldUsualName(item.item.raw)? 'flex-column-div' : 'flex-row-div'"
+              >
+                <span class="top-field-item">{{ item.item.raw[header.value] }}</span>
+                <span
+                  v-if="existSldUsualName(item.item.raw)"
+                  class="bottom-field-item"
+                >{{ item.item.raw['usualGivenName'] }}</span>
+              </div>
+              <div
+                v-else-if="header.value === 'legalMiddleName'"
+                :class="existSldUsualName(item.item.raw)? 'flex-column-div' : 'flex-row-div'"
+              >
+                <span class="top-field-item">{{ item.item.raw[header.value] }}</span>
+                <span
+                  v-if="existSldUsualName(item.item.raw)"
+                  class="bottom-field-item"
+                >{{ item.item.raw['usualMiddleName'] }}</span>
+              </div>
+              <div
+                v-else-if="header.value === 'birthDate'"
+                :class="existSldUsualName(item.item.raw)? 'flex-column-div' : 'flex-row-div'"
+              >
+                <span class="top-field-item">{{ formatDob(item.item.raw[header.value],'uuuuMMdd','uuuu/MM/dd') }}</span>
+                <span
+                  v-if="existSldUsualName(item.item.raw)"
+                  class="bottom-field-item"
+                />
+              </div>
+              <div
+                v-else
+                :class="existSldUsualName(item.item.raw)? 'flex-column-div' : 'flex-row-div'"
+              >
+                <span class="top-field-item">{{ item.item.raw[header.value] }}</span>
+                <span
+                  v-if="existSldUsualName(item.item.raw)"
+                  class="bottom-field-item"
+                />
+              </div>
+            </td>
+          </tr>
+        </template>
+      </v-data-table>
+      <v-row
+        v-show="sldDataTablesToDisplay[students.pen]"
+        class="pl-4"
+      >
+        <TertiaryButton
+          text="More"
+          icon="$plus"
+          @click-action="updateSldTableRows(students.pen, sldDataTablesNumberOfRows[students.pen] + 10)"
+        />
+        <TertiaryButton
+          text="Less"
+          icon="$minus"
+          @click-action="updateSldTableRows(students.pen, sldDataTablesNumberOfRows[students.pen] - 10)"
+        />
+      </v-row>
+    </div>
+    <v-progress-linear
+      indeterminate
+      color="blue"
+      :active="isProcessing"
+    />
+    <div v-if="selectedRecords && selectedRecords.length">
+      <v-divider />
+      <v-card-actions class="px-0">
+        <v-spacer />
+        <slot
+          name="actions"
+          :clear-error="clearError"
+          :validate-action="validateAction"
+          :disable-merge="disableMerge"
+          :disable-demerge="disableDemerge"
+          :disable-move-sld="disableMoveSld"
+          :merge="merge"
+          :demerge="demerge"
+          :twin="twin"
+          :move-sld-records="moveSldRecords"
+        />
+      </v-card-actions>
+    </div>
+    <ConfirmationDialog ref="confirmationDialog" :show-title-bar="false">
+      <template #message>
+        <v-row class="mb-3">
+          <v-col>
+            <span>Are you sure you want to demerge PENs <strong>{{ getMergedFromPen() }}</strong> and <strong>{{ getMergedToPen() }}</strong>?</span>
+          </v-col>
+        </v-row>
+      </template>
+    </ConfirmationDialog>
+    <ConfirmationDialog ref="moveSldConfirmationDialog" :show-title-bar="false">
+      <template #message>
+        <v-row>
+          <v-col>
+            <span>Are you sure you want to move the selected SLD records from <strong>{{ movedFromStudent.pen }}</strong> to <strong>{{ movedToStudent.pen }}</strong></span>?
+          </v-col>
+        </v-row>
+      </template>
+    </ConfirmationDialog>
+  </v-card>
+</template>
+
+<script>
+import {formatDob, formatMincode, formatPen, formatPostalCode} from '@/utils/format';
+import PrimaryButton from '../util/PrimaryButton.vue';
+import ApiService from '../../common/apiService';
+import {REQUEST_TYPES, Routes, STUDENT_CODES} from '@/utils/constants';
+import {isValidPEN} from '@/utils/validation';
+import alertMixin from '@/mixins/alertMixin';
+import servicesSagaMixin from '@/mixins/servicesSagaMixin';
+import router from '../../router';
+import TertiaryButton from '../util/TertiaryButton.vue';
+import {equalsIgnoreCase, getMatchedRecordsByStudent, sortArrayByDate} from '@/utils/common';
+import ConfirmationDialog from '@/components/util/ConfirmationDialog.vue';
+import { mapState } from 'pinia';
+import MergeStudentsModal from '@/components/common/MergeStudentsModal.vue';
+import staleStudentRecordMixin from '@/mixins/staleStudentRecordMixin';
+import {notificationsStore} from '@/store/modules/notifications';
+import {studentStore} from '@/store/modules/student';
+import _ from 'lodash';
+
+export default {
+  emits: ['update:selectedRecords'],
+  name: 'CompareDemographicsCommonV1',
+  components: {
+    TertiaryButton,
+    PrimaryButton,
+    ConfirmationDialog,
+    MergeStudentsModal
+  },
+  mixins: [alertMixin, servicesSagaMixin, staleStudentRecordMixin],
+  props: {
+    selectedRecords: {
+      type: Array,
+      required: true
+    },
+    title: {
+      type: String
+    },
+    closeCompareModal: {
+      type: Function,
+      default: null
+    }
+  },
+  data() {
+    return {
+      studentDataHeaders: [
+        'mincode',
+        'legalLastName',
+        'legalFirstName',
+        'legalMiddleNames',
+        'genderCode',
+        'dob',
+        'localID',
+        'gradeCode',
+        'postalCode',
+      ],
+      headers: [
+        { id: 'table-checkbox', type: 'select', sortable: false },
+        {text: 'Date', value: 'reportDate', key: 'date', sortable: false, tooltip: 'Activity Date'},
+        {text: 'Mincode', value: 'mincode', key: 'mincode', sortable: false, tooltip: 'Mincode'},
+        {text: 'Surname', value: 'legalSurname', key: 'surname', sortable: false, tooltip: 'Legal Surname'},
+        {text: 'Given', value: 'legalGivenName', key: 'givenName', sortable: false, tooltip: 'Legal Given Name'},
+        {text: 'Middle', value: 'legalMiddleName', key: 'middleName', sortable: false, tooltip: 'Legal Middle Name'},
+        {text: 'Gen', value: 'sex', key: 'gender', sortable: false, tooltip: 'Gender'},
+        {text: 'Birth Date', value: 'birthDate', key: 'dob', sortable: false, tooltip: 'Birth Date'},
+        {text: 'Local ID', value: 'localStudentId', key: 'localId', sortable: false, tooltip: 'Local ID'},
+        {text: 'Gr', value: 'enrolledGradeCode', key: 'grade', sortable: false, tooltip: 'Student Grade'},
+        {text: 'Postal Code', value: 'postal', key: 'postalCode', sortable: false, tooltip: 'Postal Code'},
+      ],
+      penToAdd: null,
+      penRules: [v => (!v || isValidPEN(v)) || this.penHint],
+      penHint: 'Invalid PEN',
+      studentDNEErrorMessage: 'Error! This student does not exist in the system.',
+      penAlreadyAddedErrorMessage: 'Pen already added to compare list.',
+      fetchingStudentErrorMessage: 'Error occurred while fetching student, Please try again later.',
+      sldData: {},
+      storedSldData: {},
+      sldDataTablesToDisplay: {},
+      sldDataTablesNumberOfRows: {},
+      checkedStudents: [],
+      isStudentDataUpdated: false,
+      isLoadingStudent: false,
+      isSearchedPENMerged: false,
+      studentDataMap: new Map(),
+      mergeStudentsModalOpen: false,
+      mergedToStudentID: '',
+      mergedFromStudentID: '',
+      movedFromStudent: {},
+      movedToStudent: {},
+    };
+  },
+  watch: {
+    notification(val) {
+      if (val) {
+        const notificationData = val;
+        if (notificationData.sagaName === 'PEN_SERVICES_STUDENT_DEMERGE_COMPLETE_SAGA' && this.sagaId === notificationData.sagaId && notificationData.studentID === this.mergedFromStudent?.studentID && notificationData.sagaStatus === 'COMPLETED') {
+          this.notifyDemergeSagaCompleteMessage();
+          // Open students in new tabs
+          setTimeout(() => {
+            this.openStudentDetails(this.mergedToStudent.studentID);
+          }, 1000);
+          setTimeout(() => {
+            this.openStudentDetails(this.mergedFromStudent.studentID);
+          }, 500);
+        } else if (notificationData.sagaName === 'PEN_SERVICES_MOVE_SLD_SAGA' && notificationData.sagaStatus === 'COMPLETED') {
+          this.handleMoveSldSagaCompleteMessage(notificationData);
+        } else if (notificationData.eventType === 'UPDATE_STUDENT' && notificationData.eventOutcome === 'STUDENT_UPDATED' && notificationData.eventPayload) {
+          this.showWarningAndDisableActionIfUpdatedStudentMatched(notificationData);
+        }
+      }
+    },
+  },
+  mounted() {
+    this.studentRecords.forEach(student => {
+      this.getSldData(student.pen);
+      if(student.trueStudentID) {
+        this.getTrueStudent(student, student.trueStudentID);
+      }
+    });
+    this.checkedStudents = [];
+  },
+  computed: {
+    ...mapState(notificationsStore, ['notification']),
+    studentRecords: {
+      get: function() {
+        return this.sortStudents(this.selectedRecords);
+      },
+      set: async function(value) {
+        this.$emit('update:selectedRecords', value);
+      }
+    },
+    checkedSldStudents() {
+      return Object.values(this.sldData).flatMap(records => records.filter(record => record.selected));
+    },
+  },
+  methods: {
+    ...mapState(studentStore, ['setStudentInProcessStatus', 'clearStudentInProcessStatus']),
+    equalsIgnoreCase,
+    sortStudents(array){
+      return array.sort(this.sortStudentRecordsForCompare);
+    },
+    sortStudentRecordsForCompare(student1, student2){
+      let student1digit = student1.pen.substring(0,1);
+      let student2digit = student2.pen.substring(0,1);
+      //Determine which is the oldest, which will be mergedToPen
+      //If two PENs are merged and neither start with "1", or both start with "1" use the lowest number as the survivor
+      //If two PENs are merged and one starts with "1" and other starts with something else, the other is the survivor
+      if((student1digit == '1' && student2digit == '1') || (student1digit != '1' && student2digit != '1')) {
+        return (student1.pen > student2.pen) ? 1 : -1;
+      } else {
+        return (student1.pen < student2.pen) ? 1 : -1;
+      }
+    },
+    addPEN() {
+      const isRecordAlreadyAdded = this.studentRecords.find(el => el.pen === this.penToAdd);
+      if (isRecordAlreadyAdded) {
+        this.setFailureAlert(this.penAlreadyAddedErrorMessage);
+        return;
+      }
+      this.getSldData(this.penToAdd);
+      const student = this.studentDataMap.get(this.penToAdd);
+      if (student) {
+        this.studentRecords.push(student);
+        this.studentRecords = _.sortBy(this.studentRecords, o => o.pen);
+        this.penToAdd = null;
+        this.truePenMessage = null;
+        this.truePen = null;
+        this.isSearchedPENMerged = false;
+      } else {
+        ApiService.apiAxios
+          .get(Routes['student'].ROOT_ENDPOINT + '/', {params: {pen: this.penToAdd}})
+          .then(response => {
+            this.studentRecords.push(response.data);
+            this.studentRecords = _.sortBy(this.studentRecords, o => o.pen);
+          })
+          .catch(error => {
+            console.log(error);
+            this.setFailureAlert(this.studentDNEErrorMessage);
+          })
+          .finally(() => {
+            this.penToAdd = null;
+          });
+      }
+    },
+    clearError() {
+      this.penToAdd = null;
+    },
+    enterPushed() {
+      this.addPEN();
+    },
+    updateAddPen() {
+      const isRecordAlreadyAdded = this.studentRecords.find(el => el.pen === this.truePen);
+      if (isRecordAlreadyAdded) {
+        this.setFailureAlert(this.penAlreadyAddedErrorMessage);
+        return;
+      }
+      this.penToAdd = this.truePen;
+      this.addPEN();
+    },
+    async checkStudentStatusForValidPen() {
+      const isProceed = this.penToAdd && this.isValidPEN(this.penToAdd) && (!this.studentRecords || this.studentRecords?.length < 3);
+      if (isProceed) {
+        this.isLoadingStudent = true;
+        this.truePenMessage = null;
+        this.truePen = null;
+        this.isSearchedPENMerged = false;
+        try {
+          const studentResponse = await ApiService.apiAxios
+            .get(Routes['student'].ROOT_ENDPOINT + '/', {params: {pen: this.penToAdd}});
+          const student = studentResponse.data;
+          this.studentDataMap.set(student.pen, student);
+          if (student.statusCode === STUDENT_CODES.MERGED) {
+            const trueStudentResponse = await this.getTrueStudent(student, student.trueStudentID);
+            this.studentDataMap.set(trueStudentResponse.data.pen, trueStudentResponse.data);
+            this.truePenMessage = `${student.pen} is Merged to `;
+            this.truePen = trueStudentResponse.data.pen;
+            this.isSearchedPENMerged = true;
+          }
+        } catch (error) {
+          if (error?.response?.status === 404 && error?.response?.data?.message) {
+            this.setFailureAlert(this.studentDNEErrorMessage);
+          } else {
+            this.setFailureAlert(this.fetchingStudentErrorMessage);
+          }
+        } finally {
+          this.isLoadingStudent = false;
+        }
+      } else {
+        // reset values if the entered pen is removed
+        this.truePenMessage = null;
+        this.truePen = null;
+        this.isSearchedPENMerged = false;
+      }
+    },
+    formatDob,
+    formatMincode,
+    formatPostalCode,
+    formatPen,
+    sortArrayByDate,
+    getMatchedRecordsByStudent,
+    getSldData(pen) {
+      ApiService.apiAxios
+        .get(Routes['sld'].STUDENT_HISTORY_URL + '/', {params: {pen: pen}})
+        .then(response => {
+          if (response?.data?.length > 0) {
+            response.data = this.sortArrayByDate(response.data, 'reportDate', false);
+            response.data.forEach(sld => sld.selected = false);
+          }
+          this.storedSldData[pen] = response.data;
+          this.updateSldRowDisplay(pen, true);
+          this.updateSldTableRows(pen, 10);
+        })
+        .catch(error => {
+          console.log(error);
+          this.setFailureAlert(this.studentDNEErrorMessage);
+        });
+    },
+    async getTrueStudent(student, trueStudentID) {
+      const trueStudent = await ApiService.apiAxios.get(Routes['student'].ROOT_ENDPOINT + '/demographics/' + trueStudentID);
+      student.truePen = trueStudent.data.pen;
+      return trueStudent;
+    },
+    isValidPEN,
+    existSldUsualName(sldData) {
+      return !!sldData.usualSurname || !!sldData.usualGivenName || !!sldData.usualMiddleName;
+    },
+    openStudentDetails(studentID) {
+      const route = router.resolve({ name: REQUEST_TYPES.student.label, params: {studentID: studentID}});
+      window.open(route.href, '_blank');
+    },
+    removeRecord(studentID, index) {
+      const student = this.studentRecords.find(item => item.studentID === studentID);
+      this.studentRecords = this.studentRecords.filter(item => item.studentID !== studentID);
+      this.checkedStudents = this.checkedStudents.filter((item, idx) => idx !== index);
+      this.validateAction();
+      this.updateSldRowDisplay(student.pen, false);
+      this.resetSldSelection();
+    },
+    updateSldRowDisplay(id, value) {
+      this.sldDataTablesToDisplay[id] = value;
+    },
+    updateSldTableRows(id, value) {
+      if(value < 0) {
+        value = 0;
+      } else if(value > this.storedSldData[id]?.length) {
+        value = this.storedSldData[id]?.length;
+      }
+      this.sldDataTablesNumberOfRows[id] = value;
+
+      if(value === 0){
+        this.sldData[id] = [];
+      }else{
+        this.sldData[id] = this.storedSldData[id].slice(0, value);
+      }
+    },
+    validateAction() {
+      let cnt = 0;
+      this.checkedStudents.forEach(checked => cnt += checked ? 1 : 0);
+      return cnt !== 2;
+    },
+    disableMerge() {
+      if (this.validateAction()) {
+        return true;
+      }
+      const selectedStudents = this.getSelectedStudents();
+      if (selectedStudents.length === 2) {
+        return this.validateStudentsAreMerged(selectedStudents[0], selectedStudents[1]);
+      }
+      return true;
+    },
+    disableDemerge() {
+      if (this.isProcessing || this.demergeSagaComplete) {
+        return true;
+      }
+      if (this.validateAction()) {
+        return true;
+      }
+
+      const selectedStudents = this.getSelectedStudents();
+      if (selectedStudents.length === 2) {
+        return !this.validateStudentsAreMerged(selectedStudents[0], selectedStudents[1]);
+      }
+      return true;
+    },
+    disableMoveSld() {
+      return this.isProcessing || this.checkedSldStudents.length <= 0;
+    },
+    validateTwinRecordsExist(studentID, twinStudentID) {
+      return getMatchedRecordsByStudent(studentID)
+        .then(data => {
+          if (data && data.length > 0) {
+            const twin = data.find(item => item.matchedStudentID === twinStudentID || item.studentID === twinStudentID);
+            if (twin) {
+              this.setFailureAlert('Error! Records are already twinned.');
+              return true;
+            }
+          }
+          return false;
+        })
+        .catch(error => {
+          this.setFailureAlert('An error occurred while loading the possible matches in twin validation. Please try again later.');
+          console.log(error);
+          return true;  // set true to make the validation failed
+        });
+    },
+    getSelectedStudents() {
+      return this.checkedStudents.map((checked, idx) => {
+        if (!checked) {
+          return false;
+        } else {
+          return this.studentRecords[idx];
+        }
+      }).filter(item => !!item);
+    },
+    async twin() {
+      const selectedStudents = this.getSelectedStudents();
+      let warningMessage = this.getWarningMessage();
+      if (warningMessage) {
+        this.setWarningAlert(warningMessage);
+        return;
+      }
+      // Determine which is the oldest, which will be mergedToPen
+      let student = selectedStudents[0];
+      let twinStudent = selectedStudents[1];
+
+      // Same Pen validation
+      if (this.validateStudentsHaveSamePen(student, twinStudent,
+        'Error! PENs cannot be twinned, as same PENs are selected.')) {
+        return;
+      }
+      // Status validation
+      if (this.validateStudentIsStatusOfMerged(student, twinStudent,
+        'Error! PENs cannot be twinned, as one of the PENs has a status of merged.')) {
+        return;
+      }
+      // Twins validation
+      const hasAnyTwins = await this.validateTwinRecordsExist(student.studentID, twinStudent.studentID);
+      if (hasAnyTwins) {
+        return;
+      }
+
+      const twinRequests = [
+        {
+          studentID: student.studentID,
+          matchedStudentID: twinStudent.studentID,
+          matchReasonCode: 'MINISTRY',
+        }
+      ];
+
+      return ApiService.apiAxios
+        .post(Routes['penMatch'].POSSIBLE_MATCHES, twinRequests)
+        .then(() => {
+          this.setSuccessAlert('Success! The two records have been twinned.');
+        })
+        .catch(error => {
+          this.setFailureAlert('An error occurred while saving twinned students. Please try again later.');
+          console.log(error);
+        });
+    },
+    async merge() {
+      const selectedStudents = this.getSelectedStudents();
+      let warningMessage = this.getWarningMessage();
+      if (warningMessage) {
+        this.setWarningAlert(warningMessage);
+        return;
+      }
+
+      let student1digit = selectedStudents[0].pen.substring(0,1);
+      let student2digit = selectedStudents[1].pen.substring(0,1);
+
+      // Determine which is the oldest, which will be mergedToPen
+      //If two PENs are merged and neither start with "1", or both start with "1" use the lowest number as the survivor
+      //If two PENs are merged and one starts with "1" and other starts with something else, the other is the survivor
+      if((student1digit == '1' && student2digit == '1') || (student1digit != '1' && student2digit != '1')) {
+        [this.mergedToStudent, this.mergedFromStudent] = _.sortBy(selectedStudents, ['pen']);
+      } else {
+        [this.mergedFromStudent, this.mergedToStudent ] = _.sortBy(selectedStudents, ['pen']);
+      }
+
+      // Same Pen validation
+      if (this.validateStudentsHaveSamePen(this.mergedToStudent, this.mergedFromStudent,
+        'Error! PENs cannot be merged, as same PENs are selected.')) {
+        return;
+      }
+      // Status validation
+      if (this.validateStudentIsStatusOfMerged(this.mergedToStudent, this.mergedFromStudent,
+        'Error! PENs cannot be merged, as one of the PENs has a status of merged.')) {
+        return;
+      }
+      // Merge validation
+      const hasAnyMergedFrom = await this.validateStudentHasAnyMergedFrom(this.mergedFromStudent.studentID);
+      if (hasAnyMergedFrom) {
+        return;
+      }
+
+      // open the merge student / pen modal and the following two values are its props
+      this.mergeStudentsModalOpen = true;
+      this.mergedToStudentID = this.mergedToStudent.studentID;
+      this.mergedFromStudentID = this.mergedFromStudent.studentID;
+    },
+    async demerge() {
+      const selectedStudents = this.getSelectedStudents();
+      let warningMessage = this.getWarningMessage();
+      if (warningMessage) {
+        this.setWarningAlert(warningMessage);
+        return;
+      }
+      if (selectedStudents[0].statusCode === 'M') { // This check is enough as validateDemerge is performed before.
+        this.mergedFromStudent = selectedStudents[0];
+        this.mergedToStudent = selectedStudents[1];
+      } else {
+        this.mergedFromStudent = selectedStudents[1];
+        this.mergedToStudent = selectedStudents[0];
+      }
+
+      let result = await this.$refs.confirmationDialog.open(null, null,
+        {color: '#fff', width: 580, closeIcon: true, dark: false, rejectText: 'No'});
+      if (!result) {
+        return;
+      }
+      await this.executeDemerge();
+    },
+    async moveSldRecords() {
+      let warningMessage = this.getWarningMessage();
+      if (warningMessage) {
+        this.setWarningAlert(warningMessage);
+        return;
+      }
+
+      this.movedFromStudent = this.studentRecords.find(student => this.checkedSldStudents.some(record => record.pen.startsWith(student.pen)));
+      this.movedToStudent = this.studentRecords.find(student => student.pen !== this.movedFromStudent.pen);
+
+      let result = await this.$refs.moveSldConfirmationDialog.open(null, null,
+        {color: '#fff', width: 580, closeIcon: true, dark: false, resolveText: 'Move'});
+      if (!result) {
+        return;
+      }
+      
+      this.setStudentInProcessStatus(this.movedFromStudent.studentID);
+      this.isProcessing = true;
+      const moveSldSagaData = this.checkedSldStudents.map(record => {
+        return _.pick(record, ['pen', 'distNo', 'schlNo', 'reportDate', 'studentId']);
+      });
+      const moveSldRequest = {
+        moveSldSagaData, 
+        movedToPen: this.movedToStudent.pen,
+        studentID: this.movedFromStudent.studentID
+      };
+      ApiService.apiAxios
+        .post(Routes['penServices'].ROOT_ENDPOINT + '/' + this.movedFromStudent.studentID + '/move-sld', moveSldRequest)
+        .then(response => {
+          this.setSuccessAlert('Your request to move sld records is accepted.');
+          this.sagaId = response.data;
+        })
+        .catch(error => {
+          console.log(error);
+          this.isProcessing = false;
+          this.clearStudentInProcessStatus(this.movedFromStudent.studentID);
+          if (error?.response?.status === 409 && error?.response?.data?.message) {
+            this.setFailureAlert(error?.response?.data?.message);
+          } else {
+            this.setFailureAlert('Your request to move sld records could not be accepted, please try again later.');
+          }
+        });
+    },
+    showWarningAndDisableActionIfUpdatedStudentMatched(notificationData){
+      try {
+        const student = JSON.parse(notificationData.eventPayload);
+        if (student?.pen &&  !this.isProcessing && this.studentRecords?.some(el => el?.pen === student.pen)) {
+          this.isStudentDataUpdated = true;
+          const warningMessage = `Student details for ${student.pen} is updated by ${student.updateUser}, Please refresh the page.`;
+          this.setWarningAlert(warningMessage);
+          const studentID = student.studentID;
+          this.addStaleDataToMap({studentID, warningMessage});
+        }
+      } catch (e) {
+        console.error(e);
+      }
+    },
+    mergeStudentsModalOpenEmit(value) {
+      this.mergeStudentsModalOpen = value;
+    },
+    getWarningMessage() {
+      let warningMessage;
+      for (const stud of this.getSelectedStudents()) {
+        warningMessage = this.getMessageForStudent(stud.studentID);
+        if (warningMessage) {
+          break;
+        }
+      }
+      return warningMessage;
+    },
+    sldSelectDisabled(pen) {
+      const isMergedOrDeceased = this.studentRecords.some(student => student.statusCode === STUDENT_CODES.MERGED || student.statusCode === STUDENT_CODES.DECEASED);
+      return this.isProcessing || this.studentRecords.length !== 2 || isMergedOrDeceased || this.checkedSldStudents.some(record => !record.pen.startsWith(pen));
+    },
+    resetSldSelection(){
+      this.checkedSldStudents.forEach(record => record.selected = false);
+    },
+    handleMoveSldSagaCompleteMessage(notificationData) {
+      if(this.sagaId === notificationData.sagaId && notificationData.studentID === this.movedFromStudent?.studentID) {
+        this.notifyMoveSldSagaCompleteMessage();
+      } else {
+        this.showWarningAndDisableActionIfMovedSldStudentMatched(notificationData.studentID);
+      }
+    },
+    notifyMoveSldSagaCompleteMessage() {
+      this.setSuccessAlert('Success! Your request to move sld records is completed.');
+      this.isProcessing = false;
+      this.studentRecords.forEach(student => {
+        this.getSldData(student.pen);
+      });
+      this.resetSldSelection();
+    },
+    showWarningAndDisableActionIfMovedSldStudentMatched(studentID){
+      const student = this.studentRecords?.find(el => el?.studentID === studentID);
+      if (!this.isProcessing && student) {
+        const warningMessage = `SLD records for ${student.pen} is updated by other users, Please refresh the page.`;
+        this.setWarningAlert(warningMessage);
+        this.addStaleDataToMap({studentID, warningMessage});
+      }
+    },
+  },
+};
+</script>
+
+<style scoped>
+  #addPenBtn {
+    height: 2.858em;
+  }
+  #closeCompareModalBtn {
+    float: right;
+  }
+  .paginatedButtons {
+    color: #38598A;
+  }
+
+  .header-font {
+    font-size: 0.9em;
+    font-weight: bold !important;
+  }
+
+  .sldTable :deep(.one-row-column) {
+    height: 32px !important;
+  }
+  .sldTable :deep(.two-rows-column) {
+    height: 42px !important;
+  }
+  .studentDemographicsTable a {
+    color: #1A5A96;
+  }
+  .studentDemographicsTable {
+    background-color: #eeeeee;
+    font-size: 0.875rem;
+    color: rgba(0, 0, 0, 1);
+  }
+  .studentDemographicsTable :deep(.bottom-field-item) {
+    font-style: italic;
+  }
+
+  #studentDemographicsTableTopRow > span:nth-child(1) {
+    vertical-align: top;
+    padding-top: 6px;
+    width: 15%;
+  }
+
+  #studentDemographicsTableTopRow > span:nth-child(9),
+  #studentDemographicsTableTopRow > span:nth-child(6) {
+    vertical-align: top;
+    padding-top: 6px;
+    width: 5%;
+  }
+  #studentDemographicsTableTopRow > span:nth-child(2),
+  #studentDemographicsTableTopRow > span:nth-child(8) {
+    vertical-align: top;
+    padding-top: 6px;
+    width: 10%;
+  }
+  #studentDemographicsTableTopRow > span:nth-child(10) {
+    vertical-align: top;
+    padding-top: 6px;
+    text-align: right;
+    width: 9%;
+  }
+  #studentDemographicsTableTopRow > span:nth-child(7) {
+    vertical-align: top;
+    padding-top: 6px;
+    width: 10%;
+  }
+  #studentDemographicsTableTopRow > span:nth-child(3),
+  #studentDemographicsTableTopRow > span:nth-child(4),
+  #studentDemographicsTableTopRow > span:nth-child(5) {
+    vertical-align: top;
+    padding-top: 6px;
+    width: 12%;
+  }
+
+  #studentDemographicsTableBottomRow /deep/ span:nth-child(1) {
+    vertical-align: top;
+    width: 15%;
+  }
+  #studentDemographicsTableBottomRow /deep/ span:nth-child(2) {
+    vertical-align: top;
+    width: 10%;
+  }
+  #studentDemographicsTableBottomRow /deep/ span:nth-child(6) {
+    vertical-align: top;
+    width: 5%;
+  }
+  #studentDemographicsTableBottomRow /deep/ span:nth-child(7) {
+    vertical-align: top;
+    width: 10%;
+  }
+  #studentDemographicsTableBottomRow /deep/ span:nth-child(3),
+  #studentDemographicsTableBottomRow /deep/ span:nth-child(4),
+  #studentDemographicsTableBottomRow /deep/ span:nth-child(5) {
+    vertical-align: top;
+    width: 12%;
+  }
+
+  .sldTable {
+    font-size: 0.9rem;
+  }
+
+  .sldTable .flex-row-div {
+    height: 21px !important;
+  }
+
+  .sldTable .flex-column-div {
+    display: flex;
+    flex-direction: column;
+    height: 42px !important;
+  }
+
+  .sldTable .top-field-item {
+    margin: 0px;
+    padding: 0px;
+  }
+
+  .sldTable .bottom-field-item {
+    font-style: italic;
+    margin: 0px;
+    padding: 0px;
+  }
+
+  .sldTable /deep/ tr th:nth-child(1),
+  .sldTable /deep/ tr th:nth-child(7),
+  .sldTable /deep/ tr th:nth-child(10),
+  .sldTable /deep/ tr td:nth-child(1),
+  .sldTable /deep/ tr td:nth-child(7),
+  .sldTable /deep/ tr td:nth-child(10) {
+    width: 5%;
+  }
+  .sldTable /deep/ tr th:nth-child(9),
+  .sldTable /deep/ tr th:nth-child(8),
+  .sldTable /deep/ tr th:nth-child(3),
+  .sldTable /deep/ tr th:nth-child(2),
+  .sldTable /deep/ tr td:nth-child(9),
+  .sldTable /deep/ tr td:nth-child(8),
+  .sldTable /deep/ tr td:nth-child(3)
+   {
+    width: 10%;
+  }
+  .sldTable /deep/ tr td:nth-child(2)
+  {
+    width: 10%;
+  }
+  .sldTable /deep/ tr th:nth-child(11),
+  .sldTable /deep/ tr td:nth-child(11){
+    width: 10%;
+    text-align: right !important;
+    padding-right: 12px;
+  }
+  .sldTable /deep/ tr th:nth-child(4),
+  .sldTable /deep/ tr th:nth-child(5),
+  .sldTable /deep/ tr th:nth-child(6),
+  .sldTable /deep/ tr td:nth-child(4),
+  .sldTable /deep/ tr td:nth-child(5),
+  .sldTable /deep/ tr td:nth-child(6) {
+    width: 12%;
+  }
+
+  .studentCheckbox :deep(.v-input__details){
+      display: none;
+  }
+
+  .bannerCheckbox :deep(.v-input__control){
+      height: 24px !important;
+  }
+
+  .flexBox {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+
+    /*padding: 8px 12px;*/
+  }
+  .flexBox a {
+    margin-top: 2px;
+    margin-left: 12px;
+  }
+
+  :deep(.v-data-table-footer){
+      display: none;
+  }
+</style>
diff --git a/frontend/src/components/common/CompareDemographicsCommonV2.vue b/frontend/src/components/common/CompareDemographicsCommonV2.vue
index 4cd90e1bc..25b40c580 100644
--- a/frontend/src/components/common/CompareDemographicsCommonV2.vue
+++ b/frontend/src/components/common/CompareDemographicsCommonV2.vue
@@ -205,7 +205,7 @@
         :items="sldData[students.studentID]"
         :items-length="sldDataTablesNumberOfRows[students.studentID]"
         :items-per-page="sldDataTablesNumberOfRows[students.studentID]"
-        @update:items-per-page="getSldData(students.studentID)"
+        @update:items-per-page="getSldData(students)"
       >
         <template #headers />
         <template #item="item">
@@ -278,8 +278,26 @@
                 :class="existSldUsualName(item.item.raw)? 'flex-column-div' : 'flex-row-div'"
               >
                 <span class="top-field-item">{{ formatDateFromDateTime(item.item.raw[header.value]) }}</span>
+                <span v-if="existingMergedStudentIdsMap?.get(students.pen)?.includes(item.item.raw.assignedStudentId)">
+                  <v-tooltip
+                    bottom
+                  >
+                    <template #activator="{ props }">
+                      <v-chip
+                        color="deep-purple"
+                        text-color="white"
+                        small
+                        class="px-2"
+                        v-bind="props"
+                      >
+                        M
+                      </v-chip>
+                    </template>
+                    <span>Merged from {{ item.item.raw.assignedPen }}</span>
+                  </v-tooltip>
+                </span>
                 <span
-                  v-if="existSldUsualName(item.item.raw)"
+                  v-else-if="existSldUsualName(item.item.raw)"
                   class="bottom-field-item"
                 />
               </div>
@@ -384,7 +402,7 @@ import _ from 'lodash';
 import {DateTimeFormatter, LocalDateTime} from '@js-joda/core';
 
 export default {
-  name: 'CompareDemographicsCommon',
+  name: 'CompareDemographicsCommonV2',
   components: {
     TertiaryButton,
     PrimaryButton,
@@ -406,7 +424,7 @@ export default {
       default: null
     }
   },
-  emits: ['update:selectedRecords'],
+  emits: ['update:selectedRecords', 'refresh-sld-data'],
   data() {
     return {
       studentDataHeaders: [
@@ -453,6 +471,7 @@ export default {
       mergedFromStudentID: '',
       movedFromStudent: {},
       movedToStudent: {},
+      existingMergedStudentIdsMap: new Map()
     };
   },
   computed: {
@@ -482,8 +501,6 @@ export default {
           setTimeout(() => {
             this.openStudentDetails(this.mergedFromStudent.studentID);
           }, 500);
-        } else if (notificationData.sagaName === 'PEN_SERVICES_MOVE_SLD_SAGA' && notificationData.sagaStatus === 'COMPLETED') {
-          this.handleMoveSldSagaCompleteMessage(notificationData);
         } else if (notificationData.eventType === 'UPDATE_STUDENT' && notificationData.eventOutcome === 'STUDENT_UPDATED' && notificationData.eventPayload) {
           this.showWarningAndDisableActionIfUpdatedStudentMatched(notificationData);
         }
@@ -492,7 +509,7 @@ export default {
   },
   mounted() {
     this.studentRecords.forEach(student => {
-      this.getSldData(student.studentID);
+      this.getSldData(student);
       if(student.trueStudentID) {
         this.getTrueStudent(student, student.trueStudentID);
       }
@@ -523,7 +540,7 @@ export default {
         this.setFailureAlert(this.penAlreadyAddedErrorMessage);
         return;
       }
-      this.getSldData(this.studentDataMap.get(this.penToAdd)?.studentID);
+      this.getSldData(this.studentDataMap.get(this.penToAdd));
       const student = this.studentDataMap.get(this.penToAdd);
       if (student) {
         this.studentRecords.push(student);
@@ -608,26 +625,40 @@ export default {
     formatPen,
     sortArrayByDate,
     getMatchedRecordsByStudent,
-    getSldData(assignedStudentID) {
+    getSldData(student) {
       ApiService.apiAxios
-        .get(Routes.sdc.SDC_SCHOOL_COLLECTION_STUDENT + '/byAssignedStudentID', {
-          params: {
-            pageNumber: 0,
-            pageSize: this.pageSize,
-            sort: {
-              'sdcSchoolCollection.uploadDate': 'DESC'
-            },
-            assignedStudentID: assignedStudentID,
-            tableFormat: true
-          }
-        })
+        .get(Routes.penServices.ROOT_ENDPOINT + '/' + student?.studentID + '/student-merge',
+          {
+            params: {
+              mergeDirection: 'FROM'
+            }
+          })
         .then(response => {
-          if (response?.data?.length > 0) {
-            response.data.forEach(sld => sld.selected = false);
-          }
-          this.storedSldData[assignedStudentID] = response.data?.content;
-          this.updateSldRowDisplay(assignedStudentID, true);
-          this.updateSldTableRows(assignedStudentID, 10);
+          this.existingMergedStudentIdsMap.set(student?.pen, response.data.map(studentMerges => studentMerges.mergeStudentID));
+          ApiService.apiAxios
+            .get(Routes.sdc.SDC_SCHOOL_COLLECTION_STUDENT + '/byAssignedStudentID', {
+              params: {
+                pageNumber: 0,
+                pageSize: this.pageSize,
+                sort: {
+                  'sdcSchoolCollection.uploadDate': 'DESC'
+                },
+                assignedStudentID: [...this.existingMergedStudentIdsMap.get(student?.pen), student?.studentID],
+                tableFormat: true
+              }
+            })
+            .then(response => {
+              if (response?.data?.length > 0) {
+                response.data.forEach(sld => sld.selected = false);
+              }
+              this.storedSldData[student?.studentID] = response.data?.content;
+              this.updateSldRowDisplay(student?.studentID, true);
+              this.updateSldTableRows(student?.studentID, 10);
+            })
+            .catch(error => {
+              console.log(error);
+              this.setFailureAlert(this.studentDNEErrorMessage);
+            });
         })
         .catch(error => {
           console.log(error);
@@ -854,27 +885,21 @@ export default {
       if (!result) {
         return;
       }
-      
-      this.setStudentInProcessStatus(this.movedFromStudent.studentID);
+
       this.isProcessing = true;
-      const moveSldSagaData = this.checkedSldStudents.map(record => {
-        return _.pick(record, ['pen', 'distNo', 'schlNo', 'reportDate', 'studentId']);
-      });
+
       const moveSldRequest = {
-        moveSldSagaData, 
-        movedToPen: this.movedToStudent.pen,
-        studentID: this.movedFromStudent.studentID
+        sdcSchoolCollectionIdsToUpdate: this.checkedSldStudents.map(record => record.sdcSchoolCollectionStudentID),
+        toStudentPen: this.movedToStudent?.pen
       };
       ApiService.apiAxios
-        .post(Routes['penServices'].ROOT_ENDPOINT + '/' + this.movedFromStudent.studentID + '/move-sld', moveSldRequest)
-        .then(response => {
-          this.setSuccessAlert('Your request to move sld records is accepted.');
-          this.sagaId = response.data;
+        .post(Routes['sdc'].BASE_URL + '/move-sld', moveSldRequest)
+        .then(() => {
+          this.notifyMoveCompleteMessage();
         })
         .catch(error => {
           console.log(error);
           this.isProcessing = false;
-          this.clearStudentInProcessStatus(this.movedFromStudent.studentID);
           if (error?.response?.status === 409 && error?.response?.data?.message) {
             this.setFailureAlert(error?.response?.data?.message);
           } else {
@@ -916,28 +941,14 @@ export default {
     resetSldSelection(){
       this.checkedSldStudents.forEach(record => record.selected = false);
     },
-    handleMoveSldSagaCompleteMessage(notificationData) {
-      if(this.sagaId === notificationData.sagaId && notificationData.studentID === this.movedFromStudent?.studentID) {
-        this.notifyMoveSldSagaCompleteMessage();
-      } else {
-        this.showWarningAndDisableActionIfMovedSldStudentMatched(notificationData.studentID);
-      }
-    },
-    notifyMoveSldSagaCompleteMessage() {
+    notifyMoveCompleteMessage() {
       this.setSuccessAlert('Success! Your request to move sld records is completed.');
       this.isProcessing = false;
       this.studentRecords.forEach(student => {
-        this.getSldData(student.studentID);
+        this.getSldData(student);
       });
       this.resetSldSelection();
-    },
-    showWarningAndDisableActionIfMovedSldStudentMatched(studentID){
-      const student = this.studentRecords?.find(el => el?.studentID === studentID);
-      if (!this.isProcessing && student) {
-        const warningMessage = `SLD records for ${student.pen} is updated by other users, Please refresh the page.`;
-        this.setWarningAlert(warningMessage);
-        this.addStaleDataToMap({studentID, warningMessage});
-      }
+      this.$emit('refresh-sld-data');
     },
   },
 };
@@ -1041,10 +1052,6 @@ export default {
     font-size: 0.9rem;
   }
 
-  .sldTable .flex-row-div {
-    height: 21px !important;
-  }
-
   .sldTable .flex-column-div {
     display: flex;
     flex-direction: column;
diff --git a/frontend/src/components/common/CustomTable.vue b/frontend/src/components/common/CustomTable.vue
index 54bf76876..2c7b8e9bc 100644
--- a/frontend/src/components/common/CustomTable.vue
+++ b/frontend/src/components/common/CustomTable.vue
@@ -42,7 +42,7 @@
                 {{ column.subHeader.title }}
               </div>
             </div>
-            <div v-else-if="column.title !== 'select'">
+            <div v-else-if="!['select', 'toolTip'].includes(column.title)">
               <div class="header-text">
                 {{ column.title }}
               </div>
@@ -72,16 +72,30 @@
               hide-details="true"
               @click.prevent.stop="onClick(props)"
             />
+            <span
+              v-else-if="column.title === 'toolTip' && props.item.raw.toolTipText"
+            >
+              <slot
+                name="toolTip"
+                :tool-tip-text="props.item.raw.toolTipText"
+                :chip-text="data[index].toolTipChipText"
+              />
+            </span>
             <div
               v-else
             >
-              <span :class="highlightChanges && index !== data.length-1 && data[index][column.key] !== data[index+1]?.[column.key] ? `highlight`: ``">
-                <span v-if="column.key === 'studentPen'">
-
+              <span>
+                <span
+                  v-if="column.key === 'studentPen'"
+                  :class="highlightChanges && index !== data.length-1 && data[index][column.key] !== data[index+1]?.[column.key] ? `highlight`: ``"
+                >
                   {{ getAssignedPen(props.item.raw['assignedPen']) }}
                 </span>
 
-                <div v-else-if="column.key === 'schoolName'">
+                <div
+                  v-else-if="column.key === 'schoolName'"
+                  :class="highlightChanges && index !== data.length-1 && data[index][column.key] !== data[index+1]?.[column.key] ? `highlight`: ``"
+                >
                   <a
                     v-if="showLinks"
                     :href="schoolSafeURL(props.item.raw.schoolID, props.item.raw.sdcSchoolCollectionID)"
@@ -95,7 +109,10 @@
                     {{ props.item.raw['schoolName'] }}
                   </span>
                 </div>
-                <div v-else-if="column.key === 'districtName'">
+                <div
+                  v-else-if="column.key === 'districtName'"
+                  :class="highlightChanges && index !== data.length-1 && data[index][column.key] !== data[index+1]?.[column.key] ? `highlight`: ``"
+                >
                   <a
                     v-if="showLinks"
                     :href="districtSafeURL(props.item.raw.districtID, props.item.raw.sdcDistrictCollectionID)"
@@ -127,17 +144,23 @@
                 </span>
 
                 <div v-else-if="column.key === 'isAdult'">
-                  <span v-if="props.item.raw['isAdult'] !== null || props.item.raw['isAdult' !== undefined]">{{ props.item.raw['isAdult'] === "true" ? 'Yes' : 'No' }}</span>
+                  <span
+                    v-if="props.item.raw['isAdult'] !== null || props.item.raw['isAdult' !== undefined]"
+                    :class="highlightChanges && index !== data.length-1 && data[index][column.key] !== data[index+1]?.[column.key] ? `highlight`: ``"
+                  >
+                    {{ props.item.raw['isAdult'] === "true" ? 'Yes' : 'No' }}
+                  </span>
                 </div>
 
                 <div v-else-if="column.key === 'fte'">
-                  <span>{{ props.item.raw['fte'] === 0 ? 0 : props.item.raw['fte'] }}</span>
+                  <span :class="highlightChanges && index !== data.length-1 && data[index][column.key] !== data[index+1]?.[column.key] ? `highlight`: ``">{{ props.item.raw['fte'] === 0 ? 0 : props.item.raw['fte'] }}</span>
                 </div>
                 <div v-else-if="column.key === 'mappedIndigenousEnrolledProgram' || column.key === 'mappedLanguageEnrolledProgram'">
                   <template v-if="props.item.raw[column.key]">
                     <span
                       v-for="(progs, idx) in props.item.raw[column.key].split(',')"
                       :key="idx"
+                      :class="highlightChanges && index !== data.length-1 && data[index][column.key] !== data[index+1]?.[column.key] ? `highlight`: ``"
                     >
                       <div>{{ progs }}</div>
                     </span>
@@ -160,8 +183,13 @@
                     <template v-else>-</template>
                   </slot>
                 </span>
-                <span v-else-if="props.item.raw[column.key]">{{ props.item.raw[column.key] }}</span>
-                <span v-else-if="column.title !== 'select'">-</span>
+                <span
+                  v-else-if="props.item.raw[column.key]"
+                  :class="highlightChanges && index !== data.length-1 && data[index][column.key] !== data[index+1]?.[column.key] ? `highlight`: ``"
+                >
+                  {{ props.item.raw[column.key] }}
+                </span>
+                <span v-else-if="!['select', 'toolTip'].includes(column.title)">-</span>
               </span>
               <div
                 v-if="column.hasOwnProperty('subHeader')"
diff --git a/frontend/src/components/penreg/student/StudentSLDHistoryV2.vue b/frontend/src/components/penreg/student/StudentSLDHistoryV2.vue
index a8cc0a3bf..b7b4746e9 100644
--- a/frontend/src/components/penreg/student/StudentSLDHistoryV2.vue
+++ b/frontend/src/components/penreg/student/StudentSLDHistoryV2.vue
@@ -19,6 +19,7 @@
           v-model:selected-records="compareStudent"
           :clear-on-exit="false"
           :disabled="isStudentUpdated || !PROCESS_STUDENT_ROLE"
+          @refresh-sld-data="retrieveStudentSLDData"
         />
       </v-col>
     </v-row>
@@ -31,7 +32,24 @@
         :highlight-changes="true"
         :show-links="false"
         :clickable="false"
-      />
+      >
+        <template #toolTip="{ toolTipText, chipText }">
+          <v-tooltip>
+            <template #activator="{ props }">
+              <v-chip
+                color="deep-purple"
+                text-color="white"
+                small
+                class="px-2"
+                v-bind="props"
+              >
+                {{ chipText }}
+              </v-chip>
+            </template>
+            <span>{{ toolTipText }}</span>
+          </v-tooltip>
+        </template>
+      </CustomTable>
     </v-row>
   </div>
 </template>
@@ -83,7 +101,8 @@ export default {
       isStudentUpdated: false,
       pageNumber: 1,
       pageSize: 10,
-      totalElements: 0
+      totalElements: 0,
+      existingMergedStudentIds: []
     };
   },
   computed:{
@@ -124,25 +143,50 @@ export default {
     retrieveStudentSLDData() {
       this.loading = true;
       ApiService.apiAxios
-        .get(Routes.sdc.SDC_SCHOOL_COLLECTION_STUDENT + '/byAssignedStudentID', {
-          params: {
-            pageNumber: this.pageNumber - 1,
-            pageSize: this.pageSize,
-            sort: {
-              'sdcSchoolCollection.uploadDate': 'DESC'
-            },
-            assignedStudentID: this.student.studentID,
-            tableFormat: true
-          }
-        })
+        .get(Routes.penServices.ROOT_ENDPOINT + '/' + this.student.studentID + '/student-merge',
+          {
+            params: {
+              mergeDirection: 'FROM'
+            }
+          })
         .then(response => {
-          this.sldData = response?.data?.content;
-          this.totalElements = response?.data?.totalElements;
-        }).catch(error => {
+          this.existingMergedStudentIds = response.data.map(studentMerges => studentMerges.mergeStudentID);
+          ApiService.apiAxios
+            .get(Routes.sdc.SDC_SCHOOL_COLLECTION_STUDENT + '/byAssignedStudentID', {
+              params: {
+                pageNumber: this.pageNumber - 1,
+                pageSize: this.pageSize,
+                sort: {
+                  'sdcSchoolCollection.uploadDate': 'DESC'
+                },
+                assignedStudentID: [...this.existingMergedStudentIds, this.student.studentID],
+                tableFormat: true
+              }
+            })
+            .then(response => {
+              this.sldData = response?.data?.content;
+              this.sldData.map(data => {
+                console.log(data);
+                if(this.existingMergedStudentIds.includes(data.assignedStudentId)) {
+                  data.toolTipText = `Merged from ${data.assignedPen}`;
+                  data.toolTipChipText = 'M';
+                  if(!this.tableHeaders.find(x => x.title === 'toolTip')) {
+                    this.tableHeaders.unshift({ title: 'toolTip', value: 'toolTipText', key: 'toolTipText', sortable: false });
+                  }
+                }
+                return data;
+              });
+              this.totalElements = response?.data?.totalElements;
+            }).catch(error => {
+              this.setFailureAlert('Could not retrieve data from API, Please try again later.');
+              console.log(error);
+            }).finally(() => {
+              this.loading = false;
+            });
+        })
+        .catch(error => {
           this.setFailureAlert('Could not retrieve data from API, Please try again later.');
           console.log(error);
-        }).finally(() => {
-          this.loading = false;
         });
     },
   }
diff --git a/frontend/src/router.js b/frontend/src/router.js
index 04f61e568..e7102635e 100644
--- a/frontend/src/router.js
+++ b/frontend/src/router.js
@@ -73,7 +73,7 @@ const router = createRouter({
       meta: {
         pageTitle: PAGE_TITLES.COMPARE_STUDENTS,
         requiresAuth: true,
-        role: 'STUDENT_SEARCH_ADMIN'
+        role: 'PROCESS_STUDENT_ROLE'
       }
     },
     {