From 019d5e3bfab48159d9d313997b95208c7317fb9c Mon Sep 17 00:00:00 2001
From: Avisha Sodhi <38086281+SodhiA1@users.noreply.github.com>
Date: Wed, 13 Nov 2024 15:34:46 -0800
Subject: [PATCH] EGC-19: Initial Tile Design

---
 .../graduation/GraduationTableComponent.vue   | 117 +++-
 .../GradUploadDataComponent.vue               | 615 +++++++++---------
 .../projections/GradProjectionsTVR.vue        | 229 +++++++
 .../reports/GradReportsAndTranscripts.vue     | 226 +++++++
 frontend/src/router.js                        |  24 +
 frontend/src/utils/constants.js               |   4 +-
 6 files changed, 869 insertions(+), 346 deletions(-)
 create mode 100644 frontend/src/components/graduation/grad-data-collection/projections/GradProjectionsTVR.vue
 create mode 100644 frontend/src/components/graduation/grad-data-collection/reports/GradReportsAndTranscripts.vue

diff --git a/frontend/src/components/graduation/GraduationTableComponent.vue b/frontend/src/components/graduation/GraduationTableComponent.vue
index 806b1616..38ac7267 100644
--- a/frontend/src/components/graduation/GraduationTableComponent.vue
+++ b/frontend/src/components/graduation/GraduationTableComponent.vue
@@ -1,7 +1,6 @@
 <template>
-<v-container class="containerSetup"
-fluid>
-  <v-row class="mt-1 mb-1">
+  <v-container fluid>
+    <v-row class="mt-1 mb-1">
       <v-icon
         small
         color="#1976d2"
@@ -15,11 +14,11 @@ fluid>
     </v-row>
     <v-row
       justify="start"
-      class="card-container"
     >
       <v-col
         v-if="hasRequiredPermission('GRAD_SCH_EDIT') && isLoggedInSchoolUser && !disableGradFunctionality"
         cols="12"
+        md="6"
       >
         <v-card
           id="graduationCard"
@@ -57,6 +56,82 @@ fluid>
           </v-row>
         </v-card>
       </v-col>
+
+      <v-col
+        v-if="hasRequiredPermission('GRAD_SCH_EDIT') && isLoggedInSchoolUser && !disableGradFunctionality"
+        cols="12"
+        md="6"
+      >
+        <v-card
+          id="graduationCard"
+          class="mx-auto"
+          width="29em"
+          height="100%"
+          outlined
+          rounded
+          @click="openProjections()"
+        >
+          <v-row class="pl-4">
+            <v-col cols="3">
+              <div>
+                <v-icon
+                  icon="mdi-finance"
+                  aria-hidden="false"
+                  color="rgb(0, 51, 102)"
+                  size="100"
+                />
+              </div>
+            </v-col>
+            <v-col class="mt-2">
+              <v-row no-gutters>
+                <v-col>
+                  <h4 class="dashboard-title">
+                    {{ PAGE_TITLES.GRAD_PROJECTIONS }}
+                  </h4>
+                </v-col>
+              </v-row>
+            </v-col>
+          </v-row>
+        </v-card>
+      </v-col>
+
+      <v-col
+        v-if="hasRequiredPermission('GRAD_SCH_EDIT') && isLoggedInSchoolUser && !disableGradFunctionality"
+        cols="12"
+        md="6"
+      >
+        <v-card
+          id="graduationCard"
+          class="mx-auto"
+          width="29em"
+          height="100%"
+          outlined
+          rounded
+          @click="openReports()"
+        >
+          <v-row class="pl-4">
+            <v-col cols="3">
+              <div>
+                <v-icon
+                  icon="mdi-certificate-outline"
+                  aria-hidden="false"
+                  color="rgb(0, 51, 102)"
+                  size="100"
+                />
+              </div>
+            </v-col>
+            <v-col class="mt-2">
+              <v-row no-gutters>
+                <v-col>
+                  <h4 class="dashboard-title">
+                    {{ PAGE_TITLES.GRAD_REPORTS }}
+                  </h4>
+                </v-col>
+              </v-row>
+            </v-col>
+          </v-row>
+        </v-card>
+      </v-col>
     </v-row>
   </v-container>
 </template>
@@ -80,7 +155,7 @@ export default {
     return {
       PAGE_TITLES: PAGE_TITLES,
       disableGradFunctionality: null
-    }
+    };
   },
   computed: {
     ...mapState(authStore, ['isAuthenticated','userInfo']),
@@ -100,7 +175,13 @@ export default {
       this.$router.push({name: 'grad-upload', params: {schoolID: this.userInfo.activeInstituteIdentifier}});
     },
     backButtonClick() {
-        this.$router.push({name: 'home'});
+      this.$router.push({name: 'home'});
+    },
+    openProjections() {
+      this.$router.push({name: 'grad-projections', params: {schoolID: this.userInfo.activeInstituteIdentifier}});
+    },
+    openReports() {
+      this.$router.push({name: 'grad-reports', params: {schoolID: this.userInfo.activeInstituteIdentifier}});
     }
   }
 };
@@ -111,26 +192,8 @@ export default {
     word-break: break-word;
     font-size: 20px;
   }
-  .containerSetup{
-    padding-right: 24em !important;
-    padding-left: 24em !important;
-  }
 
-  .card-container {
-    justify-self: flex-start;
-  }
-
-  @media screen and (max-width: 1950px) {
-    .containerSetup{
-      padding-right: 20em !important;
-      padding-left: 20em !important;
-    }
-  }
-
-  @media screen and (max-width: 1800px) {
-    .containerSetup{
-      padding-right: 10em !important;
-      padding-left: 10em !important;
-    }
-  }
+  .v-container {
+  max-width: 60em !important;
+}
 </style>
diff --git a/frontend/src/components/graduation/grad-data-collection/GradUploadDataComponent.vue b/frontend/src/components/graduation/grad-data-collection/GradUploadDataComponent.vue
index f55d6672..58e06ed5 100644
--- a/frontend/src/components/graduation/grad-data-collection/GradUploadDataComponent.vue
+++ b/frontend/src/components/graduation/grad-data-collection/GradUploadDataComponent.vue
@@ -1,9 +1,8 @@
 <template>
   <v-container 
-    class="containerSetup"
     fluid
   >
-  <div class="mt-1 mb-1">
+    <div class="mt-1 mb-1">
       <v-icon
         small
         color="#1976d2"
@@ -14,7 +13,7 @@
         class="ml-1"
         @click="backButtonClick"
       >Return to GRAD Dashboard</a>
-  </div>
+    </div>
     <div v-if="initialLoad">
       <v-row>
         <v-col>
@@ -48,29 +47,28 @@
       </v-row>
 
       <v-data-table
-      :headers="headers"
-      :items="progressCounts"
-      items-per-page="10"
-    >
-      <template #item.percentageStudentsProcessed="{ item }">
-        <v-icon
-          v-if="item.percentageStudentsProcessed === '100'"
-          icon="mdi-check-circle-outline"
-          color="success"
-        />
-        <span v-if="item.percentageStudentsProcessed === '0'"> 0% </span>
-        <template v-if="item.percentageStudentsProcessed !== '0' && item.percentageStudentsProcessed !== '100'">
-          <v-progress-circular
-            :size="15"
-            :width="3"
-            color="primary"
-            indeterminate
+        :headers="headers"
+        :items="progressCounts"
+        items-per-page="10"
+      >
+        <template #item.percentageStudentsProcessed="{ item }">
+          <v-icon
+            v-if="item.percentageStudentsProcessed === '100'"
+            icon="mdi-check-circle-outline"
+            color="success"
           />
-          <span class="ml-2">{{ item.percentageStudentsProcessed }} %</span>
+          <span v-if="item.percentageStudentsProcessed === '0'"> 0% </span>
+          <template v-if="item.percentageStudentsProcessed !== '0' && item.percentageStudentsProcessed !== '100'">
+            <v-progress-circular
+              :size="15"
+              :width="3"
+              color="primary"
+              indeterminate
+            />
+            <span class="ml-2">{{ item.percentageStudentsProcessed }} %</span>
+          </template>
         </template>
-      </template>
-    </v-data-table>
-
+      </v-data-table>
     </div>
     <v-row justify="space-between">
       <!-- <PrimaryButton
@@ -97,108 +95,108 @@
       />
     </v-form>
     <v-overlay
-    v-model="isLoadingFiles"
-    class="align-center justify-center"
-    :persistent="true"
-  >
-    <v-card width="30em">
-      <v-card-title>Uploading Files</v-card-title>
-      <v-card-text>
-        <v-row>
-          <v-col>
-            <v-alert
-              density="compact"
-              type="info"
-              text="Please wait until all files have completed uploading before leaving the screen."
-              variant="tonal"
-            />
-          </v-col>
-        </v-row>
-        <v-row style="overflow-y: auto; max-height:30em">
-          <v-col>
-            <v-row
-              v-for="(file, index) in fileUploadList"
-              :key="index"
-              height="20em"
-              style="overflow: hidden; overflow-y: auto;"
-            >
-              <v-col>
-                <v-row
-                  v-if="file.status === fileUploadPending"
-                  class="mt-1 mx-1 fileUploadWarning"
-                >
-                  <v-col cols="1">
-                    <v-progress-circular
-                      color="#003366"
-                      size="15"
-                      indeterminate
-                    />
-                  </v-col>
-                  <v-col cols="11">
-                    <span>{{ file.name + ' - ' + fileUploadPending }}</span>
-                  </v-col>
-                </v-row>
-                <v-row
-                  v-else-if="file.status === fileUploadSuccess && file.warning === null && file.error === null"
-                  class="mt-1 mx-1 fileUploadSuccess"
-                >
-                  <v-col cols="1">
-                    <v-icon
-                      icon="mdi-file-document"
-                    />
-                  </v-col>
-                  <v-col>
-                    <span><b>{{ file.name }}</b> - {{ fileUploadSuccess }}</span>
-                  </v-col>
-                </v-row>
-                <v-row
-                  v-else-if="file.warning !== null"
-                  class="mt-1 mx-1 fileUploadWarning"
-                >
-                  <v-col cols="1">
-                    <v-icon
-                      icon="mdi-file-document"
-                    />
-                  </v-col>
-                  <v-col cols="11">
-                    <span><b>{{ file.name }}</b> - {{ file.warning }}</span>
-                  </v-col>
-                </v-row>
-                <v-row
-                  v-else-if="file.error !== null"
-                  class="mt-1 mx-1 fileUploadError"
-                >
-                  <v-col cols="1">
-                    <v-icon
-                      icon="mdi-file-document"
-                    />
-                  </v-col>
-                  <v-col cols="11">
-                    <span><b>{{ file.name }}</b> - {{ file.error }}</span>
-                  </v-col>
-                </v-row>
-              </v-col>
-            </v-row>
-          </v-col>
-        </v-row>
-      </v-card-text>
-      <v-card-actions class="d-flex justify-end">
-        <v-row>
-          <v-col class="d-flex justify-end">
-            <span class="mr-2 mt-1">{{ inputKey }} of {{ fileUploadList?.length }} Complete</span>
-            <v-btn
-              id="closeOverlayBtn"
-              color="#003366"
-              variant="elevated"
-              text="Close"
-              :disabled="uploadFileValue !== null"
-              @click="closeOverlay"
-            />
-          </v-col>
-        </v-row>
-      </v-card-actions>
-    </v-card>
-  </v-overlay>
+      v-model="isLoadingFiles"
+      class="align-center justify-center"
+      :persistent="true"
+    >
+      <v-card width="30em">
+        <v-card-title>Uploading Files</v-card-title>
+        <v-card-text>
+          <v-row>
+            <v-col>
+              <v-alert
+                density="compact"
+                type="info"
+                text="Please wait until all files have completed uploading before leaving the screen."
+                variant="tonal"
+              />
+            </v-col>
+          </v-row>
+          <v-row style="overflow-y: auto; max-height:30em">
+            <v-col>
+              <v-row
+                v-for="(file, index) in fileUploadList"
+                :key="index"
+                height="20em"
+                style="overflow: hidden; overflow-y: auto;"
+              >
+                <v-col>
+                  <v-row
+                    v-if="file.status === fileUploadPending"
+                    class="mt-1 mx-1 fileUploadWarning"
+                  >
+                    <v-col cols="1">
+                      <v-progress-circular
+                        color="#003366"
+                        size="15"
+                        indeterminate
+                      />
+                    </v-col>
+                    <v-col cols="11">
+                      <span>{{ file.name + ' - ' + fileUploadPending }}</span>
+                    </v-col>
+                  </v-row>
+                  <v-row
+                    v-else-if="file.status === fileUploadSuccess && file.warning === null && file.error === null"
+                    class="mt-1 mx-1 fileUploadSuccess"
+                  >
+                    <v-col cols="1">
+                      <v-icon
+                        icon="mdi-file-document"
+                      />
+                    </v-col>
+                    <v-col>
+                      <span><b>{{ file.name }}</b> - {{ fileUploadSuccess }}</span>
+                    </v-col>
+                  </v-row>
+                  <v-row
+                    v-else-if="file.warning !== null"
+                    class="mt-1 mx-1 fileUploadWarning"
+                  >
+                    <v-col cols="1">
+                      <v-icon
+                        icon="mdi-file-document"
+                      />
+                    </v-col>
+                    <v-col cols="11">
+                      <span><b>{{ file.name }}</b> - {{ file.warning }}</span>
+                    </v-col>
+                  </v-row>
+                  <v-row
+                    v-else-if="file.error !== null"
+                    class="mt-1 mx-1 fileUploadError"
+                  >
+                    <v-col cols="1">
+                      <v-icon
+                        icon="mdi-file-document"
+                      />
+                    </v-col>
+                    <v-col cols="11">
+                      <span><b>{{ file.name }}</b> - {{ file.error }}</span>
+                    </v-col>
+                  </v-row>
+                </v-col>
+              </v-row>
+            </v-col>
+          </v-row>
+        </v-card-text>
+        <v-card-actions class="d-flex justify-end">
+          <v-row>
+            <v-col class="d-flex justify-end">
+              <span class="mr-2 mt-1">{{ inputKey }} of {{ fileUploadList?.length }} Complete</span>
+              <v-btn
+                id="closeOverlayBtn"
+                color="#003366"
+                variant="elevated"
+                text="Close"
+                :disabled="uploadFileValue !== null"
+                @click="closeOverlay"
+              />
+            </v-col>
+          </v-row>
+        </v-card-actions>
+      </v-card>
+    </v-overlay>
     <ConfirmationDialog ref="confirmReplacementFile">
       <template #message>
         <p>Uploading a replacement file will remove all data associated with the existing file you have uploaded.</p>
@@ -207,56 +205,56 @@
       </template>
     </ConfirmationDialog>
   </v-container>
-  </template>
+</template>
   
-  <script>
-  import alertMixin from '../../../mixins/alertMixin';
-  import ApiService from '../../../common/apiService';
-  import {ApiRoutes} from '../../../utils/constants';
-  import {getFileNameWithMaxNameLength} from '../../../utils/file';
-  import { mapState, mapActions } from 'pinia';
-  import { sdcCollectionStore } from '../../../store/modules/sdcCollection';
-  import Spinner from '../../common/Spinner.vue';
-  import ConfirmationDialog from '../../util/ConfirmationDialog.vue';
-  import {authStore} from '../../../store/modules/auth';
-  import {FILE_UPLOAD_STATUS} from '../../../utils/constants/FileUploadStatus';
+<script>
+import alertMixin from '../../../mixins/alertMixin';
+import ApiService from '../../../common/apiService';
+import {ApiRoutes} from '../../../utils/constants';
+import {getFileNameWithMaxNameLength} from '../../../utils/file';
+import { mapState, mapActions } from 'pinia';
+import { sdcCollectionStore } from '../../../store/modules/sdcCollection';
+import Spinner from '../../common/Spinner.vue';
+import ConfirmationDialog from '../../util/ConfirmationDialog.vue';
+import {authStore} from '../../../store/modules/auth';
+import {FILE_UPLOAD_STATUS} from '../../../utils/constants/FileUploadStatus';
   
-  export default {
-    name: 'GradUploadDataComponent',
-    components: {
-      ConfirmationDialog,
-      Spinner
-    },
-    mixins: [alertMixin],
-    props: {
-      schoolID: {
+export default {
+  name: 'GradUploadDataComponent',
+  components: {
+    ConfirmationDialog,
+    Spinner
+  },
+  mixins: [alertMixin],
+  props: {
+    schoolID: {
       type: String,
       required: false,
       default: null
     },
-    },
-    emits: [],
-    data() {
-      return {
-        acceptableFileExtensions: ['.stdxam', '.stddem', '.stdcrs'],
-        requiredRules: [v => !!v || 'Required'],
-        uploadFileValue: null,
-        hasFileAttached: false,
-        fileLoaded: false,
-        progress: 0,
-        initialLoad: true,
-        interval: null,
-        inputKey: 0,
-        validForm: false,
-        isLoadingFiles: false,
-        fileUploadPending: FILE_UPLOAD_STATUS.PENDING,
-        fileUploadSuccess: FILE_UPLOAD_STATUS.UPLOADED,
-        fileUploadError: FILE_UPLOAD_STATUS.ERROR,
-        populatedSuccessMessage: null,
-        successfulUploadCount: 0,
-        fileUploadList: [],
-        progressCounts: [],
-        headers: [
+  },
+  emits: [],
+  data() {
+    return {
+      acceptableFileExtensions: ['.stdxam', '.stddem', '.stdcrs'],
+      requiredRules: [v => !!v || 'Required'],
+      uploadFileValue: null,
+      hasFileAttached: false,
+      fileLoaded: false,
+      progress: 0,
+      initialLoad: true,
+      interval: null,
+      inputKey: 0,
+      validForm: false,
+      isLoadingFiles: false,
+      fileUploadPending: FILE_UPLOAD_STATUS.PENDING,
+      fileUploadSuccess: FILE_UPLOAD_STATUS.UPLOADED,
+      fileUploadError: FILE_UPLOAD_STATUS.ERROR,
+      populatedSuccessMessage: null,
+      successfulUploadCount: 0,
+      fileUploadList: [],
+      progressCounts: [],
+      headers: [
         {
           title: 'File Name',
           align: 'start',
@@ -276,156 +274,156 @@
           value: item => item.percentageStudentsProcessed
         },
       ]
-      };
-    },
-    computed: {
-      ...mapState(authStore, ['userInfo']),
-    },
-    watch: {
-      uploadFileValue() {
-        if(this.uploadFileValue){
-          this.importFile();
-        }
-      },
-    },
-    async created() {
-      await this.fireFileProgress();
+    };
+  },
+  computed: {
+    ...mapState(authStore, ['userInfo']),
+  },
+  watch: {
+    uploadFileValue() {
+      if(this.uploadFileValue){
+        this.importFile();
+      }
     },
-    beforeUnmount() {
-      clearInterval(this.interval);
+  },
+  async created() {
+    await this.fireFileProgress();
+  },
+  beforeUnmount() {
+    clearInterval(this.interval);
+  },
+  methods: {
+    ...mapActions(sdcCollectionStore, ['setSchoolCollection']),
+    async fireFileProgress(){
+      await this.getFileProgress();
     },
-    methods: {
-      ...mapActions(sdcCollectionStore, ['setSchoolCollection']),
-      async fireFileProgress(){
-        await this.getFileProgress();
-      },
-      closeOverlay(){
+    closeOverlay(){
       this.isLoadingFiles = !this.isLoadingFiles;
       this.fileUploadList = [];
       this.uploadFileValue = null;
       this.inputKey=0;
     },
-     validateFileExtension(fileJSON) {
-        const extension = `.${fileJSON.name.split('.').slice(-1)}`;
-        const failMessage = 'File extension is invalid. Extension must be ".stddem" or ".stdxam" or ".stdcrs".';
+    validateFileExtension(fileJSON) {
+      const extension = `.${fileJSON.name.split('.').slice(-1)}`;
+      const failMessage = 'File extension is invalid. Extension must be ".stddem" or ".stdxam" or ".stdcrs".';
   
-        if(extension && (this.acceptableFileExtensions.find(ext => ext.toUpperCase() === extension.toUpperCase())) !== undefined) {
-          return true;
-        }
-        fileJSON.status = this.fileUploadError;
-        fileJSON.error = failMessage;
-      },
-      async startPollingStatus() {
-        this.interval = setInterval(this.getFileProgress, 30000);  // polling the api every 30 seconds
-      },
-      async validateForm() {
-        await this.$nextTick();
-        await this.$refs.documentForm.validate();
-      },
-      handleFileImport() {
-        this.populatedSuccessMessage = null;
-        this.successfulUploadCount = 0;
-        this.$refs.uploader.click();
-      },
-      async importFile() {
-        if(this.uploadFileValue.length > 0) {
-          this.isLoadingFiles = true;
+      if(extension && (this.acceptableFileExtensions.find(ext => ext.toUpperCase() === extension.toUpperCase())) !== undefined) {
+        return true;
+      }
+      fileJSON.status = this.fileUploadError;
+      fileJSON.error = failMessage;
+    },
+    async startPollingStatus() {
+      this.interval = setInterval(this.getFileProgress, 30000);  // polling the api every 30 seconds
+    },
+    async validateForm() {
+      await this.$nextTick();
+      await this.$refs.documentForm.validate();
+    },
+    handleFileImport() {
+      this.populatedSuccessMessage = null;
+      this.successfulUploadCount = 0;
+      this.$refs.uploader.click();
+    },
+    async importFile() {
+      if(this.uploadFileValue.length > 0) {
+        this.isLoadingFiles = true;
   
-          await this.validateForm();
-          if (!this.uploadFileValue[0] || !this.validForm) {
-            this.inputKey++;
-            this.isLoadingFiles = false;
-          } else {
-            let fileIndex = 0;
-            this.filePromises = this.uploadFileValue.map((fileValue) => {
-              return new Promise((resolve, reject) => {
-                let reader = new FileReader();
-                reader.readAsText(fileValue);
-                reader.onload = () => {
-                  let statusJson = {
-                    name: fileValue.name,
-                    index: fileIndex++,
-                    fileContents: reader.result,
-                    status: FILE_UPLOAD_STATUS.PENDING,
-                    error: null,
-                    warning: null
-                  };
-                  this.validateFileExtension(statusJson);
-                  this.fileUploadList.push(statusJson);
-                  resolve(statusJson);
+        await this.validateForm();
+        if (!this.uploadFileValue[0] || !this.validForm) {
+          this.inputKey++;
+          this.isLoadingFiles = false;
+        } else {
+          let fileIndex = 0;
+          this.filePromises = this.uploadFileValue.map((fileValue) => {
+            return new Promise((resolve, reject) => {
+              let reader = new FileReader();
+              reader.readAsText(fileValue);
+              reader.onload = () => {
+                let statusJson = {
+                  name: fileValue.name,
+                  index: fileIndex++,
+                  fileContents: reader.result,
+                  status: FILE_UPLOAD_STATUS.PENDING,
+                  error: null,
+                  warning: null
                 };
-                reader.onerror = (error) => {
-                  let statusJson = {
-                    name: fileValue.name,
-                    index: fileIndex++,
-                    fileContents: null,
-                    status: FILE_UPLOAD_STATUS.ERROR,
-                    error: error,
-                    warning: null
-                  };
-                  this.fileUploadList.push(statusJson);
-                  reject(statusJson);
+                this.validateFileExtension(statusJson);
+                this.fileUploadList.push(statusJson);
+                resolve(statusJson);
+              };
+              reader.onerror = (error) => {
+                let statusJson = {
+                  name: fileValue.name,
+                  index: fileIndex++,
+                  fileContents: null,
+                  status: FILE_UPLOAD_STATUS.ERROR,
+                  error: error,
+                  warning: null
                 };
-              });
+                this.fileUploadList.push(statusJson);
+                reject(statusJson);
+              };
             });
+          });
 
-            await Promise.all(this.filePromises);
+          await Promise.all(this.filePromises);
 
-            for await (const fileJSON of this.fileUploadList) {
-              if(fileJSON.error === null){
-                await new Promise(resolve => setTimeout(resolve, 3000));
-                await this.uploadFile(fileJSON, fileJSON.index);
-                this.inputKey++;
-              }
+          for await (const fileJSON of this.fileUploadList) {
+            if(fileJSON.error === null){
+              await new Promise(resolve => setTimeout(resolve, 3000));
+              await this.uploadFile(fileJSON, fileJSON.index);
+              this.inputKey++;
             }
-            this.uploadFileValue = null;
-            await this.getFileProgress();
           }
+          this.uploadFileValue = null;
+          await this.getFileProgress();
         }
-      },
-      async uploadFile(fileJSON, index) {
-        let document;
-        try{
-          document = {
-            fileName: getFileNameWithMaxNameLength(this.uploadFileValue[index].name),
-            fileContents: btoa(unescape(encodeURIComponent(fileJSON.fileContents))),
-            fileType: this.uploadFileValue[index].name.split('.')[1]
-          };
-          await ApiService.apiAxios.post(ApiRoutes.gdc.BASE_URL + '/school/' + this.schoolID + '/upload-file', document)
-            .then(() => {});
-          this.successfulUploadCount += 1;
-          fileJSON.status = this.fileUploadSuccess;
-        } catch (e) {
-          console.error(e);
-          fileJSON.error = e.response.data;
-          fileJSON.status = this.fileUploadError;
-        } 
-      },
+      }
+    },
+    async uploadFile(fileJSON, index) {
+      let document;
+      try{
+        document = {
+          fileName: getFileNameWithMaxNameLength(this.uploadFileValue[index].name),
+          fileContents: btoa(unescape(encodeURIComponent(fileJSON.fileContents))),
+          fileType: this.uploadFileValue[index].name.split('.')[1]
+        };
+        await ApiService.apiAxios.post(ApiRoutes.gdc.BASE_URL + '/school/' + this.schoolID + '/upload-file', document)
+          .then(() => {});
+        this.successfulUploadCount += 1;
+        fileJSON.status = this.fileUploadSuccess;
+      } catch (e) {
+        console.error(e);
+        fileJSON.error = e.response.data;
+        fileJSON.status = this.fileUploadError;
+      } 
+    },
 
 
-      async getFileProgress() {
-        try{
-          await ApiService.apiAxios.get(ApiRoutes.gdc.BASE_URL + '/school/' + this.schoolID + '/file-progress').then(response => {
-            if(response?.data?.counts) {
-              this.progressCounts = response?.data?.counts;
-              clearInterval(this.interval);
-              this.startPollingStatus();
-            }
+    async getFileProgress() {
+      try{
+        await ApiService.apiAxios.get(ApiRoutes.gdc.BASE_URL + '/school/' + this.schoolID + '/file-progress').then(response => {
+          if(response?.data?.counts) {
+            this.progressCounts = response?.data?.counts;
+            clearInterval(this.interval);
+            this.startPollingStatus();
+          }
             
-          });
-        } catch (e) {
-          clearInterval(this.interval);
-          console.error(e);
-        } finally {
-          this.initialLoad = false;
-        }
-      },
-      backButtonClick() {
-        this.$router.push({name: 'graduation', params: {schoolID: this.schoolID}});
+        });
+      } catch (e) {
+        clearInterval(this.interval);
+        console.error(e);
+      } finally {
+        this.initialLoad = false;
       }
+    },
+    backButtonClick() {
+      this.$router.push({name: 'graduation', params: {schoolID: this.schoolID}});
     }
-  };
-  </script>
+  }
+};
+</script>
   
   <style scoped>
   
@@ -450,25 +448,6 @@
      white-space: break-spaces;
    }
 
-   .containerSetup{
-    padding-right: 24em !important;
-    padding-left: 24em !important;
-  }
-
-  @media screen and (max-width: 1950px) {
-    .containerSetup{
-      padding-right: 20em !important;
-      padding-left: 20em !important;
-    }
-  }
-
-  @media screen and (max-width: 1800px) {
-    .containerSetup{
-      padding-right: 10em !important;
-      padding-left: 10em !important;
-    }
-  }
-
   .fileUploadError{
   background-color: #d5304a;
   color: white;
@@ -496,4 +475,4 @@
   color: white !important;
 }
   </style>
-  
\ No newline at end of file
+  
diff --git a/frontend/src/components/graduation/grad-data-collection/projections/GradProjectionsTVR.vue b/frontend/src/components/graduation/grad-data-collection/projections/GradProjectionsTVR.vue
new file mode 100644
index 00000000..e608a70e
--- /dev/null
+++ b/frontend/src/components/graduation/grad-data-collection/projections/GradProjectionsTVR.vue
@@ -0,0 +1,229 @@
+<template>
+  <v-container 
+    fluid
+  >
+    <div class="mt-1 mb-1">
+      <v-icon
+        small
+        color="#1976d2"
+      >
+        mdi-arrow-left
+      </v-icon>
+      <a
+        class="ml-1"
+        @click="backButtonClick"
+      >Return to GRAD Dashboard</a>
+    </div>
+    <div
+      class="border"
+    >
+      <v-row>
+        <v-col class="mb-3 d-flex justify-center">
+          <h1>Graduation Projections and TVRs</h1>
+        </v-col>
+      </v-row>
+
+      <v-tabs
+        v-model="tab"
+        color="#38598a"
+        show-arrows
+      >
+        <v-tab
+          v-for="name in tabs"
+          :key="name"
+          class="divider"
+          :value="name"
+        >
+          {{ name }}
+        </v-tab>    
+      </v-tabs>
+
+      <v-window v-model="tab">
+        <v-window-item
+          value="Transcript verification Reports (TVRs)"
+          transition="false"
+          reverse-transition="false"
+        >
+          <v-alert
+            text="For current students reported in final year of a graduation program (Grade 12 or AD)"
+            type="info"
+            variant="tonal"
+            class="mt-5"
+          />
+          <v-row class="pt-5">
+            <v-col cols="5">
+              <v-select
+                id="reports"
+                v-model="reportType"
+                :items="tvr"
+                item-value="endpoint"
+                item-title="title"
+                label="Reports"
+                variant="underlined"
+                @update:model-value="getTvrReport()"
+              />
+            </v-col>
+          </v-row>
+          <v-row v-if="tvrFlag">
+            <v-col>
+              <p>Report not available</p>
+            </v-col>
+          </v-row>
+        </v-window-item>
+
+        <v-window-item
+          value="Graduation Projections Summary Reports"
+          transition="false"
+          reverse-transition="false"
+        >
+          <v-row class="pt-5">
+            <v-col cols="5">
+              <v-select
+                id="reports"
+                v-model="summaryReportType"
+                :items="summary"
+                item-value="endpoint"
+                item-title="title"
+                label="Reports"
+                variant="underlined"
+                @update:model-value="getSummaryReport()"
+              />
+            </v-col>
+          </v-row>
+          <v-row v-if="summaryFlag">
+            <v-col>
+              <p>Report not available</p>
+            </v-col>
+          </v-row>
+        </v-window-item>
+
+        <v-window-item
+          value="Historical Graduation Projected Summary Reports"
+          transition="false"
+          reverse-transition="false"
+        >
+          <v-row class="pt-5">
+            <v-col cols="5">
+              <v-select
+                id="reports"
+                v-model="historyReportType"
+                :items="historical"
+                item-value="endpoint"
+                item-title="title"
+                label="Reports"
+                variant="underlined"
+                @update:model-value="getHistoricalReport()"
+              />
+            </v-col>
+          </v-row>
+          <v-row v-if="historyFlag">
+            <v-col>
+              <p>Report not available</p>
+            </v-col>
+          </v-row>
+        </v-window-item>
+      </v-window>
+    </div>
+  </v-container>
+</template>
+    
+<script>
+import alertMixin from '../../../../mixins/alertMixin';
+    
+export default {
+  name: 'GradProjectionsTVR',
+  components: {
+  },
+  mixins: [alertMixin],
+  props: {
+    schoolID: {
+      type: String,
+      required: false,
+      default: null
+    },
+  },
+  emits: [],
+  data() {
+    return {
+      tvrFlag: false,
+      summaryFlag: false,
+      historyFlag: false,
+      tab: null,
+      reportType: null,
+      summaryReportType: null,
+      historyReportType: null,
+      tabs: [
+        'Transcript verification Reports (TVRs)',
+        'Graduation Projections Summary Reports',
+        'Historical Graduation Projected Summary Reports'
+      ],
+      tvr: [
+        { name: 'tvrNonGrad', title: 'TVRs for Projected Non-Graduating Students', endpoint:'a'},
+        { name: 'tvrGrad', title: 'TVRs for Projected Graduating Students', endpoint:'b'},
+        { name: 'tvrByPEN', title: 'Individual TVRs available by PEN', endpoint:'c'}
+      ],
+      summary: [
+        { name: 'nonGradSummary', title: 'Projected Non-Graduates Summary Report', endpoint:'a'},
+        { name: 'gradSummary', title: 'Projected Graduates Summary Report', endpoint:'b'},
+      ],
+      historical: [
+        { name: 'histSummary', title: 'Archived Projected Non-Graduates Summary Report', endpoint:'a'},
+      ],
+    };
+  },
+  computed: {
+
+  },
+  watch: {
+
+  },
+  async created() {
+
+  },
+  beforeUnmount() {
+        
+  },
+  methods: {
+    backButtonClick() {
+      this.$router.push({name: 'graduation', params: {schoolID: this.schoolID}});
+    },
+    getTvrReport() {
+      this.tvrFlag = true;
+    },
+    getSummaryReport() {
+      this.summaryFlag = true;
+    },
+    getHistoricalReport() {
+      this.historyFlag = true;
+    }
+  }
+};
+</script>
+    
+    <style scoped>
+    
+      .border {
+        border: 2px solid grey;
+        border-radius: 5px;
+        padding: 35px;
+        margin: 2em;
+      }
+
+     :deep(.v-btn__content){
+       white-space: break-spaces;
+     }
+  
+  ::v-deep .v-theme--myCustomLightTheme.v-btn.v-btn--disabled:not(.v-btn--flat):not(.v-btn--text):not(.v-btn--outlined) span {
+    color: white !important;
+  }
+
+  .divider {
+  border-right: 1px solid lightgray;
+  border-radius: 0px;
+}
+
+.divider:last-child  {
+  border-right: 0
+}
+    </style>
+    
diff --git a/frontend/src/components/graduation/grad-data-collection/reports/GradReportsAndTranscripts.vue b/frontend/src/components/graduation/grad-data-collection/reports/GradReportsAndTranscripts.vue
new file mode 100644
index 00000000..ff59bce6
--- /dev/null
+++ b/frontend/src/components/graduation/grad-data-collection/reports/GradReportsAndTranscripts.vue
@@ -0,0 +1,226 @@
+<template>
+  <v-container 
+    fluid
+  >
+    <div class="mt-1 mb-1">
+      <v-icon
+        small
+        color="#1976d2"
+      >
+        mdi-arrow-left
+      </v-icon>
+      <a
+        class="ml-1"
+        @click="backButtonClick"
+      >Return to GRAD Dashboard</a>
+    </div>
+    <div
+      class="border"
+    >
+      <v-row>
+        <v-col class="mb-3 d-flex justify-center">
+          <h1>Graduation Reports and Transcripts</h1>
+        </v-col>
+      </v-row>
+
+      <v-tabs
+        v-model="tab"
+        color="#38598a"
+        show-arrows
+      >
+        <v-tab
+          v-for="name in tabs"
+          :key="name"
+          class="divider"
+          :value="name"
+        >
+          {{ name }}
+        </v-tab>    
+      </v-tabs>
+
+      <v-window v-model="tab">
+        <v-window-item
+          value="Student Transcripts"
+          transition="false"
+          reverse-transition="false"
+        >
+          <v-row class="pt-5">
+            <v-col cols="5">
+              <v-select
+                id="reports"
+                v-model="reportType"
+                :items="transcripts"
+                item-value="endpoint"
+                item-title="title"
+                label="Reports"
+                variant="underlined"
+                @update:model-value="getTranscripts()"
+              />
+            </v-col>
+          </v-row>
+          <v-row v-if="transcriptFlag">
+            <v-col>
+              <p>Report not available</p>
+            </v-col>
+          </v-row>
+        </v-window-item>
+
+        <v-window-item
+          value="Graduation Summary Reports"
+          transition="false"
+          reverse-transition="false"
+        >
+          <v-alert
+            text="Daily cumulative lists of students in the current cycle, either graduated or not yet graduated, based on the latest information submitted by the school."
+            type="info"
+            variant="tonal"
+            class="mt-5"
+          />
+          <v-row class="pt-5">
+            <v-col cols="5">
+              <v-select
+                id="reports"
+                v-model="summaryReportType"
+                :items="summary"
+                item-value="endpoint"
+                item-title="title"
+                label="Reports"
+                variant="underlined"
+                @update:model-value="getSummaryReport()"
+              />
+            </v-col>
+          </v-row>
+          <v-row v-if="summaryFlag">
+            <v-col>
+              <p>Report not available</p>
+            </v-col>
+          </v-row>
+        </v-window-item>
+
+        <v-window-item
+          value="Historical Graduation Summary Reports"
+          transition="false"
+          reverse-transition="false"
+        >
+          <v-alert
+            text="Lists of students in previous cycles, either graduated or not yet graduated, based on the final information submitted by the school during the cycle."
+            type="info"
+            variant="tonal"
+            class="mt-5"
+          />
+          <v-row class="pt-5">
+            <v-col cols="5">
+              <v-select
+                id="reports"
+                v-model="historyReportType"
+                :items="historical"
+                item-value="endpoint"
+                item-title="title"
+                label="Reports"
+                variant="underlined"
+                @update:model-value="getHistoricalReport()"
+              />
+            </v-col>
+          </v-row>
+          <v-row v-if="historyFlag">
+            <v-col>
+              <p>Report not available</p>
+            </v-col>
+          </v-row>
+        </v-window-item>
+      </v-window>
+    </div>
+  </v-container>
+</template>
+    
+<script>
+import alertMixin from '../../../../mixins/alertMixin';
+    
+export default {
+  name: 'GradReportsAndTranscripts',
+  components: {
+  },
+  mixins: [alertMixin],
+  props: {
+    schoolID: {
+      type: String,
+      required: false,
+      default: null
+    },
+  },
+  emits: [],
+  data() {
+    return {
+      transcriptFlag: false,
+      summaryFlag: false,
+      historyFlag: false,
+      tab: null,
+      reportType: null,
+      summaryReportType: null,
+      historyReportType: null,
+      tabs: [
+        'Student Transcripts',
+        'Graduation Summary Reports',
+        'Historical Graduation Summary Reports'
+      ],
+      transcripts: [
+        { name: 'transcripts', title: 'Students Transcripts', endpoint:'a'},
+        { name: 'xml', title: 'XML Previews', endpoint:'b'},
+      ],
+      summary: [
+        { name: 'GradSummary', title: 'Graduated Students', endpoint:'a'},
+        { name: 'nonGradSummary', title: 'Not-Yet Graduated Students', endpoint:'b'},
+      ],
+      historical: [
+        { name: 'histGrad', title: 'Graduated Students', endpoint:'a'},
+        { name: 'histNotGrad', title: 'Not-Yet Graduated Students', endpoint:'b'},
+      ],
+    };
+  },
+  computed: {
+
+  },
+  watch: {
+
+  },
+  async created() {
+
+  },
+  beforeUnmount() {
+        
+  },
+  methods: {
+    backButtonClick() {
+      this.$router.push({name: 'graduation', params: {schoolID: this.schoolID}});
+    },
+    getTranscripts() {
+      this.transcriptFlag = true;
+    },
+    getSummaryReport() {
+      this.summaryFlag = true;
+    },
+    getHistoricalReport() {
+      this.historyFlag = true;
+    }
+  }
+};
+</script>
+    
+    <style scoped>
+    
+      .border {
+        border: 2px solid grey;
+        border-radius: 5px;
+        padding: 35px;
+        margin: 2em;
+      }
+
+     :deep(.v-btn__content){
+       white-space: break-spaces;
+     }
+  
+  ::v-deep .v-theme--myCustomLightTheme.v-btn.v-btn--disabled:not(.v-btn--flat):not(.v-btn--text):not(.v-btn--outlined) span {
+    color: white !important;
+  }
+    </style>
+    
diff --git a/frontend/src/router.js b/frontend/src/router.js
index c7aa7ef0..6d5f06cc 100644
--- a/frontend/src/router.js
+++ b/frontend/src/router.js
@@ -34,6 +34,8 @@ import SDCDistrictCollectionView from './components/sdcCollection/sdcDistrictCol
 import {PERMISSION} from './utils/constants/Permission';
 import GraduationTableComponent from './components/graduation/GraduationTableComponent.vue';
 import GradUploadDataComponent from './components/graduation/grad-data-collection/GradUploadDataComponent.vue';
+import GradProjectionsTVR from './components/graduation/grad-data-collection/projections/GradProjectionsTVR.vue';
+import GradReportsAndTranscripts from './components/graduation/grad-data-collection/reports/GradReportsAndTranscripts.vue';
 
 // a comment for commit.
 const excludeInstituteNameFromPageTitleList=[PAGE_TITLES.SELECTION, PAGE_TITLES.ACTIVATE_USER];
@@ -340,6 +342,28 @@ const router = createRouter({
             requiresAuth: true,
             permission: PERMISSION.GRAD_SCH_EDIT
           },
+        },
+        {
+          path: 'graduation/:schoolID/projections',
+          name: 'grad-projections',
+          component: GradProjectionsTVR,
+          props: true,
+          meta: {
+            pageTitle: PAGE_TITLES.GRAD_DATA_COLLECTION,
+            requiresAuth: true,
+            permission: PERMISSION.GRAD_SCH_EDIT
+          },
+        },
+        {
+          path: 'graduation/:schoolID/reports',
+          name: 'grad-reports',
+          component: GradReportsAndTranscripts,
+          props: true,
+          meta: {
+            pageTitle: PAGE_TITLES.GRAD_DATA_COLLECTION,
+            requiresAuth: true,
+            permission: PERMISSION.GRAD_SCH_EDIT
+          },
         }
       ]
     },
diff --git a/frontend/src/utils/constants.js b/frontend/src/utils/constants.js
index 5060ba02..210640fc 100644
--- a/frontend/src/utils/constants.js
+++ b/frontend/src/utils/constants.js
@@ -151,7 +151,9 @@ export const PAGE_TITLES = Object.freeze({
   SDC:'Student Level Data (1701)',
   DATA_COLLECTION: 'Student Level Data Collection (1701)',
   GRADUATION: 'Graduation',
-  GRAD_DATA_COLLECTION: 'Graduation Records and Achievement Data Collection'
+  GRAD_DATA_COLLECTION: 'Graduation Records and Achievement Data Collection',
+  GRAD_PROJECTIONS: 'Graduation Projections and TVRs',
+  GRAD_REPORTS: 'Graduation Reports and Transcripts'
 });