diff --git a/VueApp/src/Effort/components/AddCourseEffortDialog.vue b/VueApp/src/Effort/components/AddCourseEffortDialog.vue
index 527ac8c0b..ddc30b3d4 100644
--- a/VueApp/src/Effort/components/AddCourseEffortDialog.vue
+++ b/VueApp/src/Effort/components/AddCourseEffortDialog.vue
@@ -145,27 +145,12 @@
                 </q-form>
             </q-card-section>
 
-            <q-card-actions align="right">
-                <q-btn
-                    flat
-                    label="Cancel"
-                    @click="handleClose"
-                />
-                <q-btn
-                    color="primary"
-                    label="Add Effort"
-                    :loading="isSaving"
-                    @click="createRecord"
-                >
-                    <template #loading>
-                        <q-spinner
-                            size="1em"
-                            class="q-mr-sm"
-                        />
-                        Add Effort
-                    </template>
-                </q-btn>
-            </q-card-actions>
+            <DialogSubmitActions
+                submit-label="Add Effort"
+                :is-saving="isSaving"
+                @cancel="handleClose"
+                @submit="createRecord"
+            />
         </q-card>
     </q-dialog>
 </template>
@@ -178,6 +163,7 @@ import { courseService } from "../services/course-service"
 import { recordService } from "../services/record-service"
 import type { CourseInstructorOptionDto, EffortTypeOptionDto, RoleOptionDto } from "../types"
 import StatusBanner from "@/components/StatusBanner.vue"
+import DialogSubmitActions from "./DialogSubmitActions.vue"
 import { filterEffortTypesByCourse } from "../utils/effort-type-filters"
 import { effortValueRules, requiredRule, notesMaxHint } from "../validation"
 import "../effort-dialogs.css"
diff --git a/VueApp/src/Effort/components/AsyncOperationDialog.vue b/VueApp/src/Effort/components/AsyncOperationDialog.vue
new file mode 100644
index 000000000..d3f69cb76
--- /dev/null
+++ b/VueApp/src/Effort/components/AsyncOperationDialog.vue
@@ -0,0 +1,137 @@
+<script setup lang="ts">
+withDefaults(
+    defineProps<{
+        modelValue: boolean
+        title: string
+        subtitle?: string
+        maxWidth?: string
+        isLoading: boolean
+        isCommitting: boolean
+        loadError?: string | null
+        progress?: number
+        progressTitle?: string
+        progressPhase?: string
+        progressDetail?: string
+        progressColor?: string
+        loadingMessage?: string
+    }>(),
+    {
+        subtitle: undefined,
+        maxWidth: "1000px",
+        loadError: null,
+        progress: 0,
+        progressTitle: "",
+        progressPhase: "",
+        progressDetail: "",
+        progressColor: "primary",
+        loadingMessage: "Generating preview...",
+    },
+)
+
+defineEmits<{
+    retry: []
+    close: []
+}>()
+</script>
+
+<template>
+    <q-dialog
+        :model-value="modelValue"
+        persistent
+        maximized-on-mobile
+        aria-labelledby="async-operation-dialog-title"
+        @keydown.escape="$emit('close')"
+    >
+        <q-card :style="`width: 100%; max-width: ${maxWidth}; position: relative`">
+            <q-btn
+                icon="close"
+                flat
+                round
+                dense
+                class="absolute-top-right q-ma-sm"
+                style="z-index: 1"
+                aria-label="Close dialog"
+                @click="$emit('close')"
+            />
+            <q-card-section class="q-pb-none q-pr-xl">
+                <div
+                    id="async-operation-dialog-title"
+                    class="text-h6"
+                >
+                    {{ title }}
+                </div>
+                <div
+                    v-if="subtitle"
+                    class="text-caption text-grey-7"
+                >
+                    {{ subtitle }}
+                </div>
+            </q-card-section>
+
+            <slot name="before-body" />
+
+            <!-- Loading State (Preview) -->
+            <q-card-section
+                v-if="isLoading"
+                class="text-center q-py-xl"
+            >
+                <q-spinner-dots
+                    size="50px"
+                    color="primary"
+                />
+                <div class="q-mt-md text-grey-7">{{ loadingMessage }}</div>
+            </q-card-section>
+
+            <!-- Committing State (Progress) -->
+            <q-card-section
+                v-else-if="isCommitting"
+                class="q-py-xl"
+            >
+                <div class="text-h6 q-mb-md text-center">{{ progressTitle }}</div>
+                <q-linear-progress
+                    :value="progress"
+                    size="25px"
+                    :color="progressColor"
+                    class="q-mb-md"
+                >
+                    <div class="absolute-full flex flex-center">
+                        <q-badge
+                            color="white"
+                            :text-color="progressColor"
+                            :label="`${Math.round(progress * 100)}%`"
+                        />
+                    </div>
+                </q-linear-progress>
+                <div class="text-center text-grey-7">{{ progressPhase }}</div>
+                <div
+                    v-if="progressDetail"
+                    class="text-center text-caption text-grey-6 q-mt-xs"
+                >
+                    {{ progressDetail }}
+                </div>
+            </q-card-section>
+
+            <!-- Error State -->
+            <q-card-section
+                v-else-if="loadError"
+                class="text-center q-py-xl"
+            >
+                <q-icon
+                    name="error"
+                    color="negative"
+                    size="48px"
+                />
+                <div class="q-mt-md text-negative">{{ loadError }}</div>
+                <q-btn
+                    label="Retry"
+                    color="primary"
+                    class="q-mt-md"
+                    @click="$emit('retry')"
+                />
+            </q-card-section>
+
+            <!-- Preview content -->
+            <slot v-else />
+        </q-card>
+    </q-dialog>
+</template>
diff --git a/VueApp/src/Effort/components/ClinicalImportDialog.vue b/VueApp/src/Effort/components/ClinicalImportDialog.vue
index d8d216598..15983b868 100644
--- a/VueApp/src/Effort/components/ClinicalImportDialog.vue
+++ b/VueApp/src/Effort/components/ClinicalImportDialog.vue
@@ -1,237 +1,162 @@
 <template>
-    <q-dialog
+    <AsyncOperationDialog
         :model-value="modelValue"
-        persistent
-        maximized-on-mobile
-        aria-labelledby="clinical-import-title"
-        @keydown.escape="handleClose"
+        :title="`Import Clinical Effort: ${props.termName}`"
+        subtitle="Import clinical rotation assignments from Clinical Scheduler"
+        :is-loading="isLoading"
+        :is-committing="isCommitting"
+        :load-error="loadError"
+        :progress="importProgress"
+        progress-title="Processing Clinical Import"
+        progress-color="info"
+        :progress-phase="importPhase"
+        :progress-detail="importDetail"
+        @retry="loadPreview"
+        @close="handleClose"
     >
-        <q-card style="width: 100%; max-width: 1000px; position: relative">
-            <q-btn
-                icon="close"
-                flat
-                round
-                dense
-                class="absolute-top-right q-ma-sm"
-                style="z-index: 1"
-                aria-label="Close dialog"
-                @click="handleClose"
-            />
-            <q-card-section class="q-pb-none q-pr-xl">
-                <div
-                    id="clinical-import-title"
-                    class="text-h6"
-                >
-                    Import Clinical Effort: {{ props.termName }}
+        <template v-if="preview">
+            <q-card-section class="q-pt-sm">
+                <!-- Import Mode Selector -->
+                <div class="q-mb-md">
+                    <div class="text-subtitle2 q-mb-sm">Import Mode</div>
+                    <q-option-group
+                        v-model="selectedMode"
+                        :options="modeOptions"
+                        color="info"
+                        :inline="$q.screen.gt.xs"
+                        @update:model-value="onModeChange"
+                    />
                 </div>
-                <div class="text-caption text-grey-7">Import clinical rotation assignments from Clinical Scheduler</div>
-            </q-card-section>
 
-            <!-- Loading State (Preview) -->
-            <q-card-section
-                v-if="isLoading"
-                class="text-center q-py-xl"
-            >
-                <q-spinner-dots
-                    size="50px"
-                    color="primary"
-                />
-                <div class="q-mt-md text-grey-7">Generating preview...</div>
-            </q-card-section>
+                <!-- Summary Banner -->
+                <StatusBanner type="info">
+                    <div class="row q-col-gutter-md">
+                        <div class="col-6 col-sm-3 text-center">
+                            <div class="text-h5 text-positive">{{ preview.addCount }}</div>
+                            <div class="text-caption">To add</div>
+                        </div>
+                        <div class="col-6 col-sm-3 text-center">
+                            <div class="text-h5 text-info">{{ preview.updateCount }}</div>
+                            <div class="text-caption">To update</div>
+                        </div>
+                        <div class="col-6 col-sm-3 text-center">
+                            <div
+                                class="text-h5"
+                                :class="preview.deleteCount > 0 ? 'text-negative' : ''"
+                            >
+                                {{ preview.deleteCount }}
+                            </div>
+                            <div class="text-caption">To delete</div>
+                        </div>
+                        <div class="col-6 col-sm-3 text-center">
+                            <div class="text-h5 text-grey-6">{{ preview.skipCount }}</div>
+                            <div class="text-caption">To skip</div>
+                        </div>
+                    </div>
+                    <div class="text-caption text-grey-7 q-mt-sm text-center">
+                        Data as of {{ formatPreviewDateTime(preview.previewGeneratedAt) }}
+                    </div>
+                </StatusBanner>
 
-            <!-- Committing State (Progress) -->
-            <q-card-section
-                v-else-if="isCommitting"
-                class="q-py-xl"
-            >
-                <div class="text-h6 q-mb-md text-center">Processing Clinical Import</div>
-                <q-linear-progress
-                    :value="importProgress"
-                    size="25px"
-                    color="info"
-                    class="q-mb-md"
+                <!-- Warnings Section -->
+                <StatusBanner
+                    v-if="preview.warnings.length > 0"
+                    type="warning"
                 >
-                    <div class="absolute-full flex flex-center">
-                        <q-badge
-                            color="white"
-                            text-color="info"
-                            :label="`${Math.round(importProgress * 100)}%`"
-                        />
+                    <div class="row items-center q-mb-xs">
+                        <span class="text-weight-medium">
+                            {{ preview.warnings.length }} {{ inflect("Warning", preview.warnings.length) }}
+                        </span>
                     </div>
-                </q-linear-progress>
-                <div class="text-center text-grey-7">{{ importPhase }}</div>
-                <div
-                    v-if="importDetail"
-                    class="text-center text-caption text-grey-7 q-mt-xs"
+                    <ul class="q-mb-none q-pl-lg">
+                        <li
+                            v-for="(warning, idx) in preview.warnings"
+                            :key="idx"
+                        >
+                            {{ warning }}
+                        </li>
+                    </ul>
+                </StatusBanner>
+
+                <!-- Delete Warning for Sync Mode with Empty Source -->
+                <StatusBanner
+                    v-if="selectedMode === 'Sync' && preview.addCount === 0 && preview.deleteCount > 0"
+                    type="error"
+                    icon="dangerous"
                 >
-                    {{ importDetail }}
-                </div>
+                    <div class="row items-center q-mb-xs">
+                        <span class="text-weight-medium text-negative"
+                            >Sync will delete ALL clinical effort records</span
+                        >
+                    </div>
+                    <div class="text-caption text-grey-8">
+                        The source returned 0 records. Syncing will delete all {{ preview.deleteCount }} existing
+                        clinical effort records for this term.
+                    </div>
+                </StatusBanner>
+
+                <!-- Delete Warning Banner -->
+                <StatusBanner
+                    v-else-if="preview.deleteCount > 0"
+                    type="error"
+                >
+                    <div class="row items-center q-mb-xs">
+                        <span class="text-weight-medium text-negative">
+                            {{ preview.deleteCount }} {{ inflect("record", preview.deleteCount) }} will be deleted
+                        </span>
+                    </div>
+                    <div class="text-caption text-grey-7">
+                        <template v-if="selectedMode === 'ClearReplace'">
+                            Clear & Replace mode will delete all existing clinical records before importing.
+                        </template>
+                        <template v-else>
+                            Sync mode will remove clinical records that no longer exist in the source.
+                        </template>
+                    </div>
+                </StatusBanner>
+
+                <!-- Nothing to Import Warning -->
+                <StatusBanner
+                    v-if="totalChanges === 0"
+                    type="warning"
+                >
+                    <div class="row items-center q-mb-xs">
+                        <span class="text-weight-medium">Nothing to import</span>
+                    </div>
+                    <div class="text-caption text-grey-7">
+                        There are no changes to make with the selected import mode.
+                    </div>
+                </StatusBanner>
+
+                <!-- Preview Table -->
+                <ClinicalEffortPreviewTable
+                    v-if="preview.assignments.length > 0"
+                    :rows="preview.assignments"
+                    title="Preview"
+                    show-status
+                    class="q-mb-md"
+                />
             </q-card-section>
 
-            <!-- Error State -->
-            <q-card-section
-                v-else-if="loadError"
-                class="text-center q-py-xl"
+            <!-- Actions -->
+            <q-card-actions
+                align="right"
+                class="q-px-md q-pb-md"
             >
-                <q-icon
-                    name="error"
-                    color="negative"
-                    size="48px"
+                <q-btn
+                    label="Cancel"
+                    flat
+                    @click="handleClose"
                 />
-                <div class="q-mt-md text-negative">{{ loadError }}</div>
                 <q-btn
-                    label="Retry"
-                    color="primary"
-                    class="q-mt-md"
-                    @click="loadPreview"
+                    label="Confirm Import"
+                    color="info"
+                    :disable="totalChanges === 0 || isCommitting"
+                    @click="confirmImport"
                 />
-            </q-card-section>
-
-            <!-- Preview Content -->
-            <template v-else-if="preview">
-                <q-card-section class="q-pt-sm">
-                    <!-- Import Mode Selector -->
-                    <div class="q-mb-md">
-                        <div class="text-subtitle2 q-mb-sm">Import Mode</div>
-                        <q-option-group
-                            v-model="selectedMode"
-                            :options="modeOptions"
-                            color="info"
-                            :inline="$q.screen.gt.xs"
-                            @update:model-value="onModeChange"
-                        />
-                    </div>
-
-                    <!-- Summary Banner -->
-                    <StatusBanner type="info">
-                        <div class="row q-col-gutter-md">
-                            <div class="col-6 col-sm-3 text-center">
-                                <div class="text-h5 text-positive">{{ preview.addCount }}</div>
-                                <div class="text-caption">To add</div>
-                            </div>
-                            <div class="col-6 col-sm-3 text-center">
-                                <div class="text-h5 text-info">{{ preview.updateCount }}</div>
-                                <div class="text-caption">To update</div>
-                            </div>
-                            <div class="col-6 col-sm-3 text-center">
-                                <div
-                                    class="text-h5"
-                                    :class="preview.deleteCount > 0 ? 'text-negative' : ''"
-                                >
-                                    {{ preview.deleteCount }}
-                                </div>
-                                <div class="text-caption">To delete</div>
-                            </div>
-                            <div class="col-6 col-sm-3 text-center">
-                                <div class="text-h5 text-grey-7">{{ preview.skipCount }}</div>
-                                <div class="text-caption">To skip</div>
-                            </div>
-                        </div>
-                        <div class="text-caption text-grey-7 q-mt-sm text-center">
-                            Data as of {{ formatPreviewDateTime(preview.previewGeneratedAt) }}
-                        </div>
-                    </StatusBanner>
-
-                    <!-- Warnings Section -->
-                    <StatusBanner
-                        v-if="preview.warnings.length > 0"
-                        type="warning"
-                    >
-                        <div class="row items-center q-mb-xs">
-                            <span class="text-weight-medium">
-                                {{ preview.warnings.length }} {{ inflect("Warning", preview.warnings.length) }}
-                            </span>
-                        </div>
-                        <ul class="q-mb-none q-pl-lg">
-                            <li
-                                v-for="(warning, idx) in preview.warnings"
-                                :key="idx"
-                            >
-                                {{ warning }}
-                            </li>
-                        </ul>
-                    </StatusBanner>
-
-                    <!-- Delete Warning for Sync Mode with Empty Source -->
-                    <StatusBanner
-                        v-if="selectedMode === 'Sync' && preview.addCount === 0 && preview.deleteCount > 0"
-                        type="error"
-                        icon="dangerous"
-                    >
-                        <div class="row items-center q-mb-xs">
-                            <span class="text-weight-medium text-negative"
-                                >Sync will delete ALL clinical effort records</span
-                            >
-                        </div>
-                        <div class="text-caption text-grey-7">
-                            The source returned 0 records. Syncing will delete all {{ preview.deleteCount }} existing
-                            clinical effort records for this term.
-                        </div>
-                    </StatusBanner>
-
-                    <!-- Delete Warning Banner -->
-                    <StatusBanner
-                        v-else-if="preview.deleteCount > 0"
-                        type="error"
-                    >
-                        <div class="row items-center q-mb-xs">
-                            <span class="text-weight-medium text-negative">
-                                {{ preview.deleteCount }} {{ inflect("record", preview.deleteCount) }} will be deleted
-                            </span>
-                        </div>
-                        <div class="text-caption text-grey-7">
-                            <template v-if="selectedMode === 'ClearReplace'">
-                                Clear & Replace mode will delete all existing clinical records before importing.
-                            </template>
-                            <template v-else>
-                                Sync mode will remove clinical records that no longer exist in the source.
-                            </template>
-                        </div>
-                    </StatusBanner>
-
-                    <!-- Nothing to Import Warning -->
-                    <StatusBanner
-                        v-if="totalChanges === 0"
-                        type="warning"
-                    >
-                        <div class="row items-center q-mb-xs">
-                            <span class="text-weight-medium">Nothing to import</span>
-                        </div>
-                        <div class="text-caption text-grey-7">
-                            There are no changes to make with the selected import mode.
-                        </div>
-                    </StatusBanner>
-
-                    <!-- Preview Table -->
-                    <ClinicalEffortPreviewTable
-                        v-if="preview.assignments.length > 0"
-                        :rows="preview.assignments"
-                        title="Preview"
-                        show-status
-                        class="q-mb-md"
-                    />
-                </q-card-section>
-
-                <!-- Actions -->
-                <q-card-actions
-                    align="right"
-                    class="q-px-md q-pb-md"
-                >
-                    <q-btn
-                        label="Cancel"
-                        flat
-                        @click="handleClose"
-                    />
-                    <q-btn
-                        label="Confirm Import"
-                        color="info"
-                        :disable="totalChanges === 0 || isCommitting"
-                        @click="confirmImport"
-                    />
-                </q-card-actions>
-            </template>
-        </q-card>
-    </q-dialog>
+            </q-card-actions>
+        </template>
+    </AsyncOperationDialog>
 </template>
 
 <script setup lang="ts">
@@ -241,6 +166,7 @@ import { clinicalService } from "../services/clinical-service"
 import type { ClinicalImportPreviewDto, ClinicalImportMode } from "../types"
 import { inflect } from "inflection"
 import StatusBanner from "@/components/StatusBanner.vue"
+import AsyncOperationDialog from "./AsyncOperationDialog.vue"
 import ClinicalEffortPreviewTable from "./ClinicalEffortPreviewTable.vue"
 
 const props = defineProps<{
diff --git a/VueApp/src/Effort/components/DialogSubmitActions.vue b/VueApp/src/Effort/components/DialogSubmitActions.vue
new file mode 100644
index 000000000..8385416b8
--- /dev/null
+++ b/VueApp/src/Effort/components/DialogSubmitActions.vue
@@ -0,0 +1,35 @@
+<script setup lang="ts">
+defineProps<{
+    submitLabel: string
+    isSaving: boolean
+}>()
+
+defineEmits<{
+    cancel: []
+    submit: []
+}>()
+</script>
+
+<template>
+    <q-card-actions align="right">
+        <q-btn
+            flat
+            label="Cancel"
+            @click="$emit('cancel')"
+        />
+        <q-btn
+            color="primary"
+            :label="submitLabel"
+            :loading="isSaving"
+            @click="$emit('submit')"
+        >
+            <template #loading>
+                <q-spinner
+                    size="1em"
+                    class="q-mr-sm"
+                />
+                {{ submitLabel }}
+            </template>
+        </q-btn>
+    </q-card-actions>
+</template>
diff --git a/VueApp/src/Effort/components/EffortRecordAddDialog.vue b/VueApp/src/Effort/components/EffortRecordAddDialog.vue
index 2c8f0700a..a1bc97a14 100644
--- a/VueApp/src/Effort/components/EffortRecordAddDialog.vue
+++ b/VueApp/src/Effort/components/EffortRecordAddDialog.vue
@@ -122,88 +122,27 @@
                         </template>
                     </q-select>
 
-                    <!-- Role Selection -->
-                    <q-select
-                        v-model="selectedRole"
-                        :options="roles"
-                        label="Role *"
-                        dense
-                        options-dense
-                        outlined
-                        option-value="id"
-                        option-label="description"
-                        emit-value
-                        map-options
-                        :loading="isLoadingOptions"
-                        :rules="[requiredRule('Role')]"
-                        lazy-rules="ondemand"
+                    <EffortRecordSharedFields
+                        v-model:selected-role="selectedRole"
+                        v-model:effort-value="effortValue"
+                        v-model:notes="notes"
+                        :roles="roles"
+                        :is-loading-options="isLoadingOptions"
+                        :effort-label="effortLabel"
+                        :show-notes="selectedCourseObj?.isGenericRCourse ?? false"
+                        :notes-hint="notesHint"
+                        :warning-message="warningMessage"
+                        :error-message="errorMessage"
                     />
-
-                    <!-- Effort Value -->
-                    <q-input
-                        v-model.number="effortValue"
-                        :label="effortLabel"
-                        type="number"
-                        dense
-                        outlined
-                        min="0"
-                        :rules="effortValueRules"
-                        lazy-rules="ondemand"
-                    />
-
-                    <!-- Notes (generic R-Course only) -->
-                    <q-input
-                        v-if="selectedCourseObj?.isGenericRCourse"
-                        v-model="notes"
-                        label="Notes"
-                        type="textarea"
-                        dense
-                        outlined
-                        maxlength="500"
-                        counter
-                        autogrow
-                        :hint="notesHint"
-                    />
-
-                    <!-- Warning Message -->
-                    <StatusBanner
-                        v-if="warningMessage"
-                        type="warning"
-                    >
-                        {{ warningMessage }}
-                    </StatusBanner>
-
-                    <!-- Error Message -->
-                    <StatusBanner
-                        v-if="errorMessage"
-                        type="error"
-                    >
-                        {{ errorMessage }}
-                    </StatusBanner>
                 </q-form>
             </q-card-section>
 
-            <q-card-actions align="right">
-                <q-btn
-                    flat
-                    label="Cancel"
-                    @click="handleClose"
-                />
-                <q-btn
-                    color="primary"
-                    label="Add Effort"
-                    :loading="isSaving"
-                    @click="createRecord"
-                >
-                    <template #loading>
-                        <q-spinner
-                            size="1em"
-                            class="q-mr-sm"
-                        />
-                        Add Effort
-                    </template>
-                </q-btn>
-            </q-card-actions>
+            <DialogSubmitActions
+                submit-label="Add Effort"
+                :is-saving="isSaving"
+                @cancel="handleClose"
+                @submit="createRecord"
+            />
         </q-card>
     </q-dialog>
 </template>
@@ -213,10 +152,12 @@ import { ref, computed, watch } from "vue"
 import type { QForm } from "quasar"
 import { useUnsavedChanges } from "@/composables/use-unsaved-changes"
 import StatusBanner from "@/components/StatusBanner.vue"
+import DialogSubmitActions from "./DialogSubmitActions.vue"
+import EffortRecordSharedFields from "./EffortRecordSharedFields.vue"
 import { recordService } from "../services/record-service"
 import type { CourseOptionDto, EffortTypeOptionDto, RoleOptionDto, InstructorEffortRecordDto } from "../types"
 import { filterEffortTypesByCourse } from "../utils/effort-type-filters"
-import { effortValueRules, requiredRule, notesMaxHint } from "../validation"
+import { requiredRule, notesMaxHint } from "../validation"
 import "../effort-forms.css"
 
 const props = defineProps<{
diff --git a/VueApp/src/Effort/components/EffortRecordEditDialog.vue b/VueApp/src/Effort/components/EffortRecordEditDialog.vue
index fcdaa09c3..ae8251b4b 100644
--- a/VueApp/src/Effort/components/EffortRecordEditDialog.vue
+++ b/VueApp/src/Effort/components/EffortRecordEditDialog.vue
@@ -66,88 +66,27 @@
                         lazy-rules="ondemand"
                     />
 
-                    <!-- Role Selection -->
-                    <q-select
-                        v-model="selectedRole"
-                        :options="roles"
-                        label="Role"
-                        dense
-                        options-dense
-                        outlined
-                        option-value="id"
-                        option-label="description"
-                        emit-value
-                        map-options
-                        :loading="isLoadingOptions"
-                        :rules="[requiredRule('Role')]"
-                        lazy-rules="ondemand"
+                    <EffortRecordSharedFields
+                        v-model:selected-role="selectedRole"
+                        v-model:effort-value="effortValue"
+                        v-model:notes="notes"
+                        :roles="roles"
+                        :is-loading-options="isLoadingOptions"
+                        :effort-label="effortLabel"
+                        :show-notes="props.record?.course.isGenericRCourse ?? false"
+                        :notes-hint="notesHint"
+                        :warning-message="warningMessage"
+                        :error-message="errorMessage"
                     />
-
-                    <!-- Effort Value -->
-                    <q-input
-                        v-model.number="effortValue"
-                        :label="effortLabel"
-                        type="number"
-                        dense
-                        outlined
-                        min="0"
-                        :rules="effortValueRules"
-                        lazy-rules="ondemand"
-                    />
-
-                    <!-- Notes (generic R-Course only) -->
-                    <q-input
-                        v-if="props.record?.course.isGenericRCourse"
-                        v-model="notes"
-                        label="Notes"
-                        type="textarea"
-                        dense
-                        outlined
-                        maxlength="500"
-                        counter
-                        autogrow
-                        :hint="notesHint"
-                    />
-
-                    <!-- Warning Message -->
-                    <StatusBanner
-                        v-if="warningMessage"
-                        type="warning"
-                    >
-                        {{ warningMessage }}
-                    </StatusBanner>
-
-                    <!-- Error Message -->
-                    <StatusBanner
-                        v-if="errorMessage"
-                        type="error"
-                    >
-                        {{ errorMessage }}
-                    </StatusBanner>
                 </q-form>
             </q-card-section>
 
-            <q-card-actions align="right">
-                <q-btn
-                    flat
-                    label="Cancel"
-                    @click="handleClose"
-                />
-                <q-btn
-                    color="primary"
-                    label="Save"
-                    :loading="isSaving"
-                    @click="updateRecord"
-                >
-                    <template #loading>
-                        <q-spinner
-                            size="1em"
-                            class="q-mr-sm"
-                        />
-                        Save
-                    </template>
-                </q-btn>
-            </q-card-actions>
+            <DialogSubmitActions
+                submit-label="Save"
+                :is-saving="isSaving"
+                @cancel="handleClose"
+                @submit="updateRecord"
+            />
         </q-card>
     </q-dialog>
 </template>
@@ -157,9 +96,11 @@ import { ref, computed, watch } from "vue"
 import { QForm } from "quasar"
 import { useUnsavedChanges } from "@/composables/use-unsaved-changes"
 import StatusBanner from "@/components/StatusBanner.vue"
+import DialogSubmitActions from "./DialogSubmitActions.vue"
+import EffortRecordSharedFields from "./EffortRecordSharedFields.vue"
 import { recordService } from "../services/record-service"
 import type { EffortTypeOptionDto, RoleOptionDto, InstructorEffortRecordDto } from "../types"
-import { effortValueRules, requiredRule, notesMaxHint } from "../validation"
+import { requiredRule, notesMaxHint } from "../validation"
 import "../effort-forms.css"
 
 const props = defineProps<{
diff --git a/VueApp/src/Effort/components/EffortRecordSharedFields.vue b/VueApp/src/Effort/components/EffortRecordSharedFields.vue
new file mode 100644
index 000000000..483479e99
--- /dev/null
+++ b/VueApp/src/Effort/components/EffortRecordSharedFields.vue
@@ -0,0 +1,80 @@
+<script setup lang="ts">
+import StatusBanner from "@/components/StatusBanner.vue"
+import type { RoleOptionDto } from "../types"
+import { effortValueRules, requiredRule } from "../validation"
+
+defineProps<{
+    roles: RoleOptionDto[]
+    isLoadingOptions: boolean
+    effortLabel: string
+    showNotes: boolean
+    notesHint: string
+    warningMessage?: string
+    errorMessage?: string
+}>()
+
+const selectedRole = defineModel<number | null>("selectedRole", { required: true })
+const effortValue = defineModel<number | null>("effortValue", { required: true })
+const notes = defineModel<string | null>("notes", { required: true })
+</script>
+
+<template>
+    <!-- Role Selection -->
+    <q-select
+        v-model="selectedRole"
+        :options="roles"
+        label="Role *"
+        dense
+        options-dense
+        outlined
+        option-value="id"
+        option-label="description"
+        emit-value
+        map-options
+        :loading="isLoadingOptions"
+        :rules="[requiredRule('Role')]"
+        lazy-rules="ondemand"
+    />
+
+    <!-- Effort Value -->
+    <q-input
+        v-model.number="effortValue"
+        :label="effortLabel"
+        type="number"
+        dense
+        outlined
+        min="0"
+        :rules="effortValueRules"
+        lazy-rules="ondemand"
+    />
+
+    <!-- Notes (generic R-Course only) -->
+    <q-input
+        v-if="showNotes"
+        v-model="notes"
+        label="Notes"
+        type="textarea"
+        dense
+        outlined
+        maxlength="500"
+        counter
+        autogrow
+        :hint="notesHint"
+    />
+
+    <!-- Warning Message -->
+    <StatusBanner
+        v-if="warningMessage"
+        type="warning"
+    >
+        {{ warningMessage }}
+    </StatusBanner>
+
+    <!-- Error Message -->
+    <StatusBanner
+        v-if="errorMessage"
+        type="error"
+    >
+        {{ errorMessage }}
+    </StatusBanner>
+</template>
diff --git a/VueApp/src/Effort/components/EffortReportPage.vue b/VueApp/src/Effort/components/EffortReportPage.vue
new file mode 100644
index 000000000..23c57f691
--- /dev/null
+++ b/VueApp/src/Effort/components/EffortReportPage.vue
@@ -0,0 +1,85 @@
+<script setup lang="ts">
+import ExportToolbar from "@/components/ExportToolbar.vue"
+import ReportFilterForm from "./ReportFilterForm.vue"
+import ReportLayout from "./ReportLayout.vue"
+import type { ReportFilterParams } from "../types"
+
+type FilterField = "department" | "faculty" | "role" | "title"
+
+defineProps<{
+    title: string
+    subtitle?: string
+    termCode: number
+    loading: boolean
+    hasReport: boolean
+    isEmpty: boolean
+    emptyMessage?: string
+    initialFilters?: ReportFilterParams
+    visibleFields?: FilterField[]
+    meritOnly?: boolean
+    onPdfExport: () => void | Promise<void>
+    onExcelExport: () => Promise<void>
+}>()
+
+defineEmits<{
+    (e: "generate", params: ReportFilterParams): void
+}>()
+</script>
+
+<template>
+    <div class="q-pa-md">
+        <h1>{{ title }}</h1>
+
+        <ReportFilterForm
+            :term-code="termCode"
+            :loading="loading"
+            :initial-filters="initialFilters"
+            :visible-fields="visibleFields"
+            :merit-only="meritOnly"
+            @generate="$emit('generate', $event)"
+        />
+
+        <div
+            v-if="loading"
+            role="status"
+            class="text-center q-my-lg"
+        >
+            <q-spinner-dots
+                size="3rem"
+                color="primary"
+            />
+            <div class="q-mt-md text-body1">Loading report...</div>
+        </div>
+
+        <ReportLayout v-else-if="hasReport">
+            <template #header>
+                <div class="col text-h6">
+                    <slot name="header">{{ subtitle ?? title }}</slot>
+                </div>
+                <div class="col-auto no-print">
+                    <ExportToolbar
+                        :pdf-export="onPdfExport"
+                        :excel-export="onExcelExport"
+                    />
+                </div>
+            </template>
+
+            <div
+                v-if="isEmpty"
+                role="status"
+                class="text-grey-7 text-center q-pa-lg"
+            >
+                {{ emptyMessage ?? "No data found for the selected filters." }}
+            </div>
+
+            <slot v-else />
+        </ReportLayout>
+
+        <div
+            v-else
+            class="text-grey-7 text-center q-pa-lg"
+        >
+            Select filters and click "Generate Report" to view data.
+        </div>
+    </div>
+</template>
diff --git a/VueApp/src/Effort/components/HarvestDialog.vue b/VueApp/src/Effort/components/HarvestDialog.vue
index fac227558..013f76476 100644
--- a/VueApp/src/Effort/components/HarvestDialog.vue
+++ b/VueApp/src/Effort/components/HarvestDialog.vue
@@ -1,601 +1,522 @@
 <template>
-    <q-dialog
+    <AsyncOperationDialog
         :model-value="modelValue"
-        persistent
-        maximized-on-mobile
-        aria-labelledby="harvest-dialog-title"
-        @keydown.escape="handleClose"
+        :title="`Harvest Term: ${props.termName}`"
+        subtitle="Import instructors and courses from CREST and Clinical Scheduler"
+        :is-loading="isLoading"
+        :is-committing="isCommitting"
+        :load-error="loadError"
+        :progress="harvestProgress"
+        progress-title="Processing Harvest"
+        :progress-phase="harvestPhase"
+        :progress-detail="harvestDetail"
+        @retry="loadPreview"
+        @close="handleClose"
     >
-        <q-card style="width: 100%; max-width: 1000px; position: relative">
-            <q-btn
-                icon="close"
-                flat
-                round
-                dense
-                class="absolute-top-right q-ma-sm"
-                style="z-index: 1"
-                aria-label="Close dialog"
-                @click="handleClose"
-            />
-            <q-card-section class="q-pb-none q-pr-xl">
-                <div
-                    id="harvest-dialog-title"
-                    class="text-h6"
-                >
-                    Harvest Term: {{ props.termName }}
-                </div>
-                <div class="text-caption text-grey-7">
-                    Import instructors and courses from CREST and Clinical Scheduler
-                </div>
-            </q-card-section>
-
-            <!-- Loading State (Preview) -->
-            <q-card-section
-                v-if="isLoading"
-                class="text-center q-py-xl"
-            >
-                <q-spinner-dots
-                    size="50px"
-                    color="primary"
-                />
-                <div class="q-mt-md text-grey-7">Generating preview...</div>
-            </q-card-section>
-
-            <!-- Committing State (Progress) -->
-            <q-card-section
-                v-else-if="isCommitting"
-                class="q-py-xl"
-            >
-                <div class="text-h6 q-mb-md text-center">Processing Harvest</div>
-                <q-linear-progress
-                    :value="harvestProgress"
-                    size="25px"
-                    color="primary"
-                    class="q-mb-md"
-                >
-                    <div class="absolute-full flex flex-center">
-                        <q-badge
-                            color="white"
-                            text-color="primary"
-                            :label="`${Math.round(harvestProgress * 100)}%`"
-                        />
-                    </div>
-                </q-linear-progress>
-                <div class="text-center text-grey-7">{{ harvestPhase }}</div>
-                <div
-                    v-if="harvestDetail"
-                    class="text-center text-caption text-grey-7 q-mt-xs"
-                >
-                    {{ harvestDetail }}
-                </div>
-            </q-card-section>
-
-            <!-- Error State -->
-            <q-card-section
-                v-else-if="loadError"
-                class="text-center q-py-xl"
-            >
-                <q-icon
-                    name="error"
-                    color="negative"
-                    size="48px"
-                />
-                <div class="q-mt-md text-negative">{{ loadError }}</div>
-                <q-btn
-                    label="Retry"
-                    color="primary"
-                    class="q-mt-md"
-                    @click="loadPreview"
-                />
-            </q-card-section>
-
-            <!-- Preview Content -->
-            <template v-else-if="preview">
-                <q-card-section class="q-pt-sm">
-                    <!-- Summary Banner -->
-                    <StatusBanner type="info">
-                        <div class="row q-col-gutter-md">
-                            <div class="col-6 col-sm-4 text-center">
-                                <div class="text-h5">{{ preview.summary.totalInstructors }}</div>
-                                <div class="text-caption">Instructors</div>
-                            </div>
-                            <div class="col-6 col-sm-4 text-center">
-                                <div class="text-h5">{{ preview.summary.totalCourses }}</div>
-                                <div class="text-caption">Courses</div>
-                            </div>
-                            <div class="col-6 col-sm-4 text-center">
-                                <div class="text-h5">{{ preview.summary.totalEffortRecords }}</div>
-                                <div class="text-caption">Effort Records</div>
-                            </div>
+        <template v-if="preview">
+            <q-card-section class="q-pt-sm">
+                <!-- Summary Banner -->
+                <StatusBanner type="info">
+                    <div class="row q-col-gutter-md">
+                        <div class="col-6 col-sm-4 text-center">
+                            <div class="text-h5">{{ preview.summary.totalInstructors }}</div>
+                            <div class="text-caption">Instructors</div>
                         </div>
-                    </StatusBanner>
-
-                    <!-- Warnings -->
-                    <StatusBanner
-                        v-if="preview.warnings.length > 0"
-                        type="warning"
-                    >
-                        <div class="row items-center q-mb-xs">
-                            <span class="text-weight-medium">
-                                {{ preview.warnings.length }} {{ inflect("Warning", preview.warnings.length) }}
-                            </span>
+                        <div class="col-6 col-sm-4 text-center">
+                            <div class="text-h5">{{ preview.summary.totalCourses }}</div>
+                            <div class="text-caption">Courses</div>
                         </div>
-                        <ul class="q-mb-none q-pl-lg">
-                            <li
-                                v-for="(warning, idx) in preview.warnings.slice(0, 5)"
-                                :key="idx"
-                            >
-                                <span v-if="warning.phase">{{ warning.phase }}: </span>{{ warning.message }}
-                                <div
-                                    v-if="warning.details"
-                                    class="text-caption text-grey-7"
-                                >
-                                    {{ warning.details }}
-                                </div>
-                            </li>
-                        </ul>
-                        <div
-                            v-if="preview.warnings.length > 5"
-                            class="text-caption text-grey-7"
-                        >
-                            ...and {{ preview.warnings.length - 5 }} more
+                        <div class="col-6 col-sm-4 text-center">
+                            <div class="text-h5">{{ preview.summary.totalEffortRecords }}</div>
+                            <div class="text-caption">Effort Records</div>
                         </div>
-                    </StatusBanner>
+                    </div>
+                </StatusBanner>
 
-                    <!-- Errors -->
-                    <StatusBanner
-                        v-if="preview.errors.length > 0"
-                        type="error"
-                    >
-                        <div class="row items-center q-mb-xs">
-                            <span class="text-weight-medium text-negative">
-                                {{ preview.errors.length }} {{ inflect("Error", preview.errors.length) }} - Harvest may
-                                fail
-                            </span>
-                        </div>
-                        <ul class="q-mb-none q-pl-lg">
-                            <li
-                                v-for="(error, idx) in preview.errors"
-                                :key="idx"
+                <!-- Warnings -->
+                <StatusBanner
+                    v-if="preview.warnings.length > 0"
+                    type="warning"
+                >
+                    <div class="row items-center q-mb-xs">
+                        <span class="text-weight-medium">
+                            {{ preview.warnings.length }} {{ inflect("Warning", preview.warnings.length) }}
+                        </span>
+                    </div>
+                    <ul class="q-mb-none q-pl-lg">
+                        <li
+                            v-for="(warning, idx) in preview.warnings.slice(0, 5)"
+                            :key="idx"
+                        >
+                            <span v-if="warning.phase">{{ warning.phase }}: </span>{{ warning.message }}
+                            <div
+                                v-if="warning.details"
+                                class="text-caption text-grey-7"
                             >
-                                {{ error.phase }}: {{ error.message }}
-                            </li>
-                        </ul>
-                    </StatusBanner>
-
-                    <!-- Removed Items Warning -->
-                    <StatusBanner
-                        v-if="hasRemovedItems"
-                        type="warning"
-                        icon="person_remove"
+                                {{ warning.details }}
+                            </div>
+                        </li>
+                    </ul>
+                    <div
+                        v-if="preview.warnings.length > 5"
+                        class="text-caption text-grey-7"
                     >
-                        <div class="row items-center q-mb-xs">
-                            <span class="text-weight-medium">Items that will be removed</span>
-                        </div>
-                        <div class="text-caption text-grey-7">
-                            The following items exist in the current term but are not in the harvest sources and will be
-                            deleted:
-                        </div>
-                        <div
-                            v-if="preview.removedInstructors.length > 0"
-                            class="q-mt-xs"
-                        >
-                            <strong>{{ preview.removedInstructors.length }}</strong>
-                            {{ inflect("instructor", preview.removedInstructors.length) }}
-                            <span class="text-caption text-grey-7">
-                                ({{
-                                    preview.removedInstructors
-                                        .slice(0, 5)
-                                        .map((i) => i.fullName)
-                                        .join(" / ")
-                                }}{{ preview.removedInstructors.length > 5 ? " / ..." : "" }})
-                            </span>
-                        </div>
-                        <div
-                            v-if="preview.removedCourses.length > 0"
-                            class="q-mt-xs"
+                        ...and {{ preview.warnings.length - 5 }} more
+                    </div>
+                </StatusBanner>
+
+                <!-- Errors -->
+                <StatusBanner
+                    v-if="preview.errors.length > 0"
+                    type="error"
+                >
+                    <div class="row items-center q-mb-xs">
+                        <span class="text-weight-medium text-negative">
+                            {{ preview.errors.length }} {{ inflect("Error", preview.errors.length) }} - Harvest may fail
+                        </span>
+                    </div>
+                    <ul class="q-mb-none q-pl-lg">
+                        <li
+                            v-for="(error, idx) in preview.errors"
+                            :key="idx"
                         >
-                            <strong>{{ preview.removedCourses.length }}</strong>
-                            {{ inflect("course", preview.removedCourses.length) }}
-                            <span class="text-caption text-grey-7">
-                                ({{
-                                    preview.removedCourses
-                                        .slice(0, 3)
-                                        .map((c) => `${c.subjCode.trim()} ${c.crseNumb.trim()}`)
-                                        .join(", ")
-                                }}{{ preview.removedCourses.length > 3 ? "..." : "" }})
-                            </span>
-                        </div>
-                    </StatusBanner>
-
-                    <!-- Tabs -->
-                    <q-tabs
-                        v-model="activeTab"
-                        dense
-                        align="left"
-                        class="text-grey-7 tabs-no-fade"
-                        active-color="primary"
-                        indicator-color="primary"
-                        narrow-indicator
+                            {{ error.phase }}: {{ error.message }}
+                        </li>
+                    </ul>
+                </StatusBanner>
+
+                <!-- Removed Items Warning -->
+                <StatusBanner
+                    v-if="hasRemovedItems"
+                    type="warning"
+                    icon="person_remove"
+                >
+                    <div class="row items-center q-mb-xs">
+                        <span class="text-weight-medium">Items that will be removed</span>
+                    </div>
+                    <div class="text-caption text-grey-7">
+                        The following items exist in the current term but are not in the harvest sources and will be
+                        deleted:
+                    </div>
+                    <div
+                        v-if="preview.removedInstructors.length > 0"
+                        class="q-mt-xs"
                     >
-                        <q-tab
-                            name="crest"
-                            label="CREST"
-                        />
-                        <q-tab
-                            name="noncrest"
-                            label="Non-CREST"
-                        />
-                        <q-tab
-                            name="clinical"
-                            label="Clinical"
-                        />
-                    </q-tabs>
+                        <strong>{{ preview.removedInstructors.length }}</strong>
+                        {{ inflect("instructor", preview.removedInstructors.length) }}
+                        <span class="text-caption text-grey-7">
+                            ({{
+                                preview.removedInstructors
+                                    .slice(0, 5)
+                                    .map((i) => i.fullName)
+                                    .join(" / ")
+                            }}{{ preview.removedInstructors.length > 5 ? " / ..." : "" }})
+                        </span>
+                    </div>
+                    <div
+                        v-if="preview.removedCourses.length > 0"
+                        class="q-mt-xs"
+                    >
+                        <strong>{{ preview.removedCourses.length }}</strong>
+                        {{ inflect("course", preview.removedCourses.length) }}
+                        <span class="text-caption text-grey-7">
+                            ({{
+                                preview.removedCourses
+                                    .slice(0, 3)
+                                    .map((c) => `${c.subjCode.trim()} ${c.crseNumb.trim()}`)
+                                    .join(", ")
+                            }}{{ preview.removedCourses.length > 3 ? "..." : "" }})
+                        </span>
+                    </div>
+                </StatusBanner>
+
+                <!-- Tabs -->
+                <q-tabs
+                    v-model="activeTab"
+                    dense
+                    align="left"
+                    class="text-grey-8 tabs-no-fade"
+                    active-color="primary"
+                    indicator-color="primary"
+                    narrow-indicator
+                >
+                    <q-tab
+                        name="crest"
+                        label="CREST"
+                    />
+                    <q-tab
+                        name="noncrest"
+                        label="Non-CREST"
+                    />
+                    <q-tab
+                        name="clinical"
+                        label="Clinical"
+                    />
+                </q-tabs>
 
-                    <q-separator />
+                <q-separator />
 
-                    <q-tab-panels
-                        v-model="activeTab"
-                        animated
-                        keep-alive
+                <q-tab-panels
+                    v-model="activeTab"
+                    animated
+                    keep-alive
+                >
+                    <!-- CREST Tab -->
+                    <q-tab-panel
+                        name="crest"
+                        class="q-pa-none q-pt-md"
                     >
-                        <!-- CREST Tab -->
-                        <q-tab-panel
-                            name="crest"
-                            class="q-pa-none q-pt-md"
-                        >
-                            <div class="row items-center justify-between q-mb-sm">
-                                <div class="text-subtitle2">Instructors ({{ preview.crestInstructors.length }})</div>
-                                <q-input
-                                    v-model="crestInstructorFilter"
-                                    placeholder="Search..."
-                                    dense
-                                    outlined
-                                    clearable
-                                    class="compact-search"
-                                >
-                                    <template #prepend>
-                                        <q-icon
-                                            name="search"
-                                            size="xs"
-                                        />
-                                    </template>
-                                </q-input>
-                            </div>
-                            <q-table
-                                :rows="preview.crestInstructors"
-                                :columns="instructorColumns"
-                                row-key="personId"
-                                :filter="crestInstructorFilter"
+                        <div class="row items-center justify-between q-mb-sm">
+                            <div class="text-subtitle2">Instructors ({{ preview.crestInstructors.length }})</div>
+                            <q-input
+                                v-model="crestInstructorFilter"
+                                placeholder="Search..."
                                 dense
-                                flat
-                                bordered
-                                v-model:pagination="crestInstructorPagination"
-                                class="q-mb-md"
+                                outlined
+                                clearable
+                                class="compact-search"
                             >
-                                <template #body-cell-status="slotProps">
-                                    <q-td :props="slotProps">
-                                        <StatusBadge
-                                            :color="getStatusColor(slotProps.value)"
-                                            :label="slotProps.value"
-                                        />
-                                    </q-td>
+                                <template #prepend>
+                                    <q-icon
+                                        name="search"
+                                        size="xs"
+                                    />
                                 </template>
-                            </q-table>
-
-                            <div class="row items-center justify-between q-mb-sm">
-                                <div class="text-subtitle2">Courses ({{ preview.crestCourses.length }})</div>
-                                <q-input
-                                    v-model="crestCourseFilter"
-                                    placeholder="Search..."
-                                    dense
-                                    outlined
-                                    clearable
-                                    class="compact-search"
-                                >
-                                    <template #prepend>
-                                        <q-icon
-                                            name="search"
-                                            size="xs"
-                                        />
-                                    </template>
-                                </q-input>
-                            </div>
-                            <q-table
-                                :rows="preview.crestCourses"
-                                :columns="courseColumns"
-                                row-key="crn"
-                                :filter="crestCourseFilter"
+                            </q-input>
+                        </div>
+                        <q-table
+                            :rows="preview.crestInstructors"
+                            :columns="instructorColumns"
+                            row-key="personId"
+                            :filter="crestInstructorFilter"
+                            dense
+                            flat
+                            bordered
+                            v-model:pagination="crestInstructorPagination"
+                            class="q-mb-md"
+                        >
+                            <template #body-cell-status="slotProps">
+                                <q-td :props="slotProps">
+                                    <q-badge
+                                        :color="getStatusColor(slotProps.value)"
+                                        :label="slotProps.value"
+                                    />
+                                </q-td>
+                            </template>
+                        </q-table>
+
+                        <div class="row items-center justify-between q-mb-sm">
+                            <div class="text-subtitle2">Courses ({{ preview.crestCourses.length }})</div>
+                            <q-input
+                                v-model="crestCourseFilter"
+                                placeholder="Search..."
                                 dense
-                                flat
-                                bordered
-                                v-model:pagination="crestCoursePagination"
-                                class="q-mb-md"
+                                outlined
+                                clearable
+                                class="compact-search"
                             >
-                                <template #body-cell-status="slotProps">
-                                    <q-td :props="slotProps">
-                                        <StatusBadge
-                                            :color="getStatusColor(slotProps.value)"
-                                            :label="slotProps.value"
-                                        />
-                                    </q-td>
+                                <template #prepend>
+                                    <q-icon
+                                        name="search"
+                                        size="xs"
+                                    />
                                 </template>
-                            </q-table>
-
-                            <div class="row items-center justify-between q-mb-sm">
-                                <div class="text-subtitle2">Effort Records ({{ preview.crestEffort.length }})</div>
-                                <q-input
-                                    v-model="crestEffortFilter"
-                                    placeholder="Search..."
-                                    dense
-                                    outlined
-                                    clearable
-                                    class="compact-search"
-                                >
-                                    <template #prepend>
-                                        <q-icon
-                                            name="search"
-                                            size="xs"
-                                        />
-                                    </template>
-                                </q-input>
-                            </div>
-                            <q-table
-                                :rows="preview.crestEffort"
-                                :columns="effortColumns"
-                                :row-key="(row) => `${row.mothraId}-${row.crn}-${row.effortType}`"
-                                :filter="crestEffortFilter"
+                            </q-input>
+                        </div>
+                        <q-table
+                            :rows="preview.crestCourses"
+                            :columns="courseColumns"
+                            row-key="crn"
+                            :filter="crestCourseFilter"
+                            dense
+                            flat
+                            bordered
+                            v-model:pagination="crestCoursePagination"
+                            class="q-mb-md"
+                        >
+                            <template #body-cell-status="slotProps">
+                                <q-td :props="slotProps">
+                                    <q-badge
+                                        :color="getStatusColor(slotProps.value)"
+                                        :label="slotProps.value"
+                                    />
+                                </q-td>
+                            </template>
+                        </q-table>
+
+                        <div class="row items-center justify-between q-mb-sm">
+                            <div class="text-subtitle2">Effort Records ({{ preview.crestEffort.length }})</div>
+                            <q-input
+                                v-model="crestEffortFilter"
+                                placeholder="Search..."
                                 dense
-                                flat
-                                bordered
-                                v-model:pagination="crestEffortPagination"
+                                outlined
+                                clearable
+                                class="compact-search"
                             >
-                                <template #body-cell-status="slotProps">
-                                    <q-td :props="slotProps">
-                                        <StatusBadge
-                                            :color="getStatusColor(slotProps.value)"
-                                            :label="slotProps.value"
-                                        />
-                                    </q-td>
+                                <template #prepend>
+                                    <q-icon
+                                        name="search"
+                                        size="xs"
+                                    />
                                 </template>
-                            </q-table>
-                        </q-tab-panel>
-
-                        <!-- Non-CREST Tab -->
-                        <q-tab-panel
-                            name="noncrest"
-                            class="q-pa-none q-pt-md"
+                            </q-input>
+                        </div>
+                        <q-table
+                            :rows="preview.crestEffort"
+                            :columns="effortColumns"
+                            :row-key="(row) => `${row.mothraId}-${row.crn}-${row.effortType}`"
+                            :filter="crestEffortFilter"
+                            dense
+                            flat
+                            bordered
+                            v-model:pagination="crestEffortPagination"
                         >
-                            <div class="row items-center justify-between q-mb-sm">
-                                <div class="text-subtitle2">Instructors ({{ preview.nonCrestInstructors.length }})</div>
-                                <q-input
-                                    v-model="nonCrestInstructorFilter"
-                                    placeholder="Search..."
-                                    dense
-                                    outlined
-                                    clearable
-                                    class="compact-search"
-                                >
-                                    <template #prepend>
-                                        <q-icon
-                                            name="search"
-                                            size="xs"
-                                        />
-                                    </template>
-                                </q-input>
-                            </div>
-                            <q-table
-                                :rows="preview.nonCrestInstructors"
-                                :columns="instructorColumns"
-                                row-key="personId"
-                                :filter="nonCrestInstructorFilter"
+                            <template #body-cell-status="slotProps">
+                                <q-td :props="slotProps">
+                                    <q-badge
+                                        :color="getStatusColor(slotProps.value)"
+                                        :label="slotProps.value"
+                                    />
+                                </q-td>
+                            </template>
+                        </q-table>
+                    </q-tab-panel>
+
+                    <!-- Non-CREST Tab -->
+                    <q-tab-panel
+                        name="noncrest"
+                        class="q-pa-none q-pt-md"
+                    >
+                        <div class="row items-center justify-between q-mb-sm">
+                            <div class="text-subtitle2">Instructors ({{ preview.nonCrestInstructors.length }})</div>
+                            <q-input
+                                v-model="nonCrestInstructorFilter"
+                                placeholder="Search..."
                                 dense
-                                flat
-                                bordered
-                                v-model:pagination="nonCrestInstructorPagination"
-                                class="q-mb-md"
+                                outlined
+                                clearable
+                                class="compact-search"
                             >
-                                <template #body-cell-status="slotProps">
-                                    <q-td :props="slotProps">
-                                        <StatusBadge
-                                            :color="getStatusColor(slotProps.value)"
-                                            :label="slotProps.value"
-                                        />
-                                    </q-td>
+                                <template #prepend>
+                                    <q-icon
+                                        name="search"
+                                        size="xs"
+                                    />
                                 </template>
-                            </q-table>
-
-                            <div class="row items-center justify-between q-mb-sm">
-                                <div class="text-subtitle2">Courses ({{ preview.nonCrestCourses.length }})</div>
-                                <q-input
-                                    v-model="nonCrestCourseFilter"
-                                    placeholder="Search..."
-                                    dense
-                                    outlined
-                                    clearable
-                                    class="compact-search"
-                                >
-                                    <template #prepend>
-                                        <q-icon
-                                            name="search"
-                                            size="xs"
-                                        />
-                                    </template>
-                                </q-input>
-                            </div>
-                            <q-table
-                                :rows="preview.nonCrestCourses"
-                                :columns="courseColumns"
-                                row-key="crn"
-                                :filter="nonCrestCourseFilter"
+                            </q-input>
+                        </div>
+                        <q-table
+                            :rows="preview.nonCrestInstructors"
+                            :columns="instructorColumns"
+                            row-key="personId"
+                            :filter="nonCrestInstructorFilter"
+                            dense
+                            flat
+                            bordered
+                            v-model:pagination="nonCrestInstructorPagination"
+                            class="q-mb-md"
+                        >
+                            <template #body-cell-status="slotProps">
+                                <q-td :props="slotProps">
+                                    <q-badge
+                                        :color="getStatusColor(slotProps.value)"
+                                        :label="slotProps.value"
+                                    />
+                                </q-td>
+                            </template>
+                        </q-table>
+
+                        <div class="row items-center justify-between q-mb-sm">
+                            <div class="text-subtitle2">Courses ({{ preview.nonCrestCourses.length }})</div>
+                            <q-input
+                                v-model="nonCrestCourseFilter"
+                                placeholder="Search..."
                                 dense
-                                flat
-                                bordered
-                                v-model:pagination="nonCrestCoursePagination"
-                                class="q-mb-md"
+                                outlined
+                                clearable
+                                class="compact-search"
                             >
-                                <template #body-cell-status="slotProps">
-                                    <q-td :props="slotProps">
-                                        <StatusBadge
-                                            :color="getStatusColor(slotProps.value)"
-                                            :label="slotProps.value"
-                                        />
-                                    </q-td>
+                                <template #prepend>
+                                    <q-icon
+                                        name="search"
+                                        size="xs"
+                                    />
                                 </template>
-                            </q-table>
-
-                            <div class="row items-center justify-between q-mb-sm">
-                                <div class="text-subtitle2">Effort Records ({{ preview.nonCrestEffort.length }})</div>
-                                <q-input
-                                    v-model="nonCrestEffortFilter"
-                                    placeholder="Search..."
-                                    dense
-                                    outlined
-                                    clearable
-                                    class="compact-search"
-                                >
-                                    <template #prepend>
-                                        <q-icon
-                                            name="search"
-                                            size="xs"
-                                        />
-                                    </template>
-                                </q-input>
-                            </div>
-                            <q-table
-                                :rows="preview.nonCrestEffort"
-                                :columns="effortColumns"
-                                :row-key="(row) => `${row.mothraId}-${row.crn}-${row.effortType}`"
-                                :filter="nonCrestEffortFilter"
+                            </q-input>
+                        </div>
+                        <q-table
+                            :rows="preview.nonCrestCourses"
+                            :columns="courseColumns"
+                            row-key="crn"
+                            :filter="nonCrestCourseFilter"
+                            dense
+                            flat
+                            bordered
+                            v-model:pagination="nonCrestCoursePagination"
+                            class="q-mb-md"
+                        >
+                            <template #body-cell-status="slotProps">
+                                <q-td :props="slotProps">
+                                    <q-badge
+                                        :color="getStatusColor(slotProps.value)"
+                                        :label="slotProps.value"
+                                    />
+                                </q-td>
+                            </template>
+                        </q-table>
+
+                        <div class="row items-center justify-between q-mb-sm">
+                            <div class="text-subtitle2">Effort Records ({{ preview.nonCrestEffort.length }})</div>
+                            <q-input
+                                v-model="nonCrestEffortFilter"
+                                placeholder="Search..."
                                 dense
-                                flat
-                                bordered
-                                v-model:pagination="nonCrestEffortPagination"
+                                outlined
+                                clearable
+                                class="compact-search"
                             >
-                                <template #body-cell-status="slotProps">
-                                    <q-td :props="slotProps">
-                                        <StatusBadge
-                                            :color="getStatusColor(slotProps.value)"
-                                            :label="slotProps.value"
-                                        />
-                                    </q-td>
+                                <template #prepend>
+                                    <q-icon
+                                        name="search"
+                                        size="xs"
+                                    />
                                 </template>
-                            </q-table>
-                        </q-tab-panel>
-
-                        <!-- Clinical Tab -->
-                        <q-tab-panel
-                            name="clinical"
-                            class="q-pa-none q-pt-md"
+                            </q-input>
+                        </div>
+                        <q-table
+                            :rows="preview.nonCrestEffort"
+                            :columns="effortColumns"
+                            :row-key="(row) => `${row.mothraId}-${row.crn}-${row.effortType}`"
+                            :filter="nonCrestEffortFilter"
+                            dense
+                            flat
+                            bordered
+                            v-model:pagination="nonCrestEffortPagination"
                         >
-                            <div class="row items-center justify-between q-mb-sm">
-                                <div class="text-subtitle2">Instructors ({{ preview.clinicalInstructors.length }})</div>
-                                <q-input
-                                    v-model="clinicalInstructorFilter"
-                                    placeholder="Search..."
-                                    dense
-                                    outlined
-                                    clearable
-                                    class="compact-search"
-                                >
-                                    <template #prepend>
-                                        <q-icon
-                                            name="search"
-                                            size="xs"
-                                        />
-                                    </template>
-                                </q-input>
-                            </div>
-                            <q-table
-                                :rows="preview.clinicalInstructors"
-                                :columns="instructorColumns"
-                                row-key="mothraId"
-                                :filter="clinicalInstructorFilter"
+                            <template #body-cell-status="slotProps">
+                                <q-td :props="slotProps">
+                                    <q-badge
+                                        :color="getStatusColor(slotProps.value)"
+                                        :label="slotProps.value"
+                                    />
+                                </q-td>
+                            </template>
+                        </q-table>
+                    </q-tab-panel>
+
+                    <!-- Clinical Tab -->
+                    <q-tab-panel
+                        name="clinical"
+                        class="q-pa-none q-pt-md"
+                    >
+                        <div class="row items-center justify-between q-mb-sm">
+                            <div class="text-subtitle2">Instructors ({{ preview.clinicalInstructors.length }})</div>
+                            <q-input
+                                v-model="clinicalInstructorFilter"
+                                placeholder="Search..."
                                 dense
-                                flat
-                                bordered
-                                v-model:pagination="clinicalInstructorPagination"
-                                class="q-mb-md"
+                                outlined
+                                clearable
+                                class="compact-search"
                             >
-                                <template #body-cell-status="slotProps">
-                                    <q-td :props="slotProps">
-                                        <StatusBadge
-                                            :color="getStatusColor(slotProps.value)"
-                                            :label="slotProps.value"
-                                        />
-                                    </q-td>
+                                <template #prepend>
+                                    <q-icon
+                                        name="search"
+                                        size="xs"
+                                    />
                                 </template>
-                            </q-table>
-
-                            <div class="row items-center justify-between q-mb-sm">
-                                <div class="text-subtitle2">Courses ({{ preview.clinicalCourses.length }})</div>
-                                <q-input
-                                    v-model="clinicalCourseFilter"
-                                    placeholder="Search..."
-                                    dense
-                                    outlined
-                                    clearable
-                                    class="compact-search"
-                                >
-                                    <template #prepend>
-                                        <q-icon
-                                            name="search"
-                                            size="xs"
-                                        />
-                                    </template>
-                                </q-input>
-                            </div>
-                            <q-table
-                                :rows="preview.clinicalCourses"
-                                :columns="courseColumns"
-                                :row-key="(row) => `${row.subjCode}-${row.crseNumb}-${row.seqNumb}`"
-                                :filter="clinicalCourseFilter"
+                            </q-input>
+                        </div>
+                        <q-table
+                            :rows="preview.clinicalInstructors"
+                            :columns="instructorColumns"
+                            row-key="mothraId"
+                            :filter="clinicalInstructorFilter"
+                            dense
+                            flat
+                            bordered
+                            v-model:pagination="clinicalInstructorPagination"
+                            class="q-mb-md"
+                        >
+                            <template #body-cell-status="slotProps">
+                                <q-td :props="slotProps">
+                                    <q-badge
+                                        :color="getStatusColor(slotProps.value)"
+                                        :label="slotProps.value"
+                                    />
+                                </q-td>
+                            </template>
+                        </q-table>
+
+                        <div class="row items-center justify-between q-mb-sm">
+                            <div class="text-subtitle2">Courses ({{ preview.clinicalCourses.length }})</div>
+                            <q-input
+                                v-model="clinicalCourseFilter"
+                                placeholder="Search..."
                                 dense
-                                flat
-                                bordered
-                                v-model:pagination="clinicalCoursePagination"
-                                class="q-mb-md"
+                                outlined
+                                clearable
+                                class="compact-search"
                             >
-                                <template #body-cell-status="slotProps">
-                                    <q-td :props="slotProps">
-                                        <StatusBadge
-                                            :color="getStatusColor(slotProps.value)"
-                                            :label="slotProps.value"
-                                        />
-                                    </q-td>
+                                <template #prepend>
+                                    <q-icon
+                                        name="search"
+                                        size="xs"
+                                    />
                                 </template>
-                            </q-table>
-
-                            <ClinicalEffortPreviewTable
-                                :rows="preview.clinicalEffort"
-                                title="Effort Records"
-                                show-status
-                                :pagination="{ rowsPerPage: 5 }"
-                            />
-                        </q-tab-panel>
-                    </q-tab-panels>
-                </q-card-section>
-
-                <!-- Actions -->
-                <q-card-actions
-                    align="right"
-                    class="q-px-md q-pb-md"
-                >
-                    <q-btn
-                        label="Cancel"
-                        flat
-                        @click="handleClose"
-                    />
-                    <q-btn
-                        label="Confirm Harvest"
-                        color="primary"
-                        :disable="preview.errors.length > 0 || isCommitting"
-                        @click="confirmHarvest"
-                    />
-                </q-card-actions>
-            </template>
-        </q-card>
-    </q-dialog>
+                            </q-input>
+                        </div>
+                        <q-table
+                            :rows="preview.clinicalCourses"
+                            :columns="courseColumns"
+                            :row-key="(row) => `${row.subjCode}-${row.crseNumb}-${row.seqNumb}`"
+                            :filter="clinicalCourseFilter"
+                            dense
+                            flat
+                            bordered
+                            v-model:pagination="clinicalCoursePagination"
+                            class="q-mb-md"
+                        >
+                            <template #body-cell-status="slotProps">
+                                <q-td :props="slotProps">
+                                    <q-badge
+                                        :color="getStatusColor(slotProps.value)"
+                                        :label="slotProps.value"
+                                    />
+                                </q-td>
+                            </template>
+                        </q-table>
+
+                        <ClinicalEffortPreviewTable
+                            :rows="preview.clinicalEffort"
+                            title="Effort Records"
+                            show-status
+                            :pagination="{ rowsPerPage: 5 }"
+                        />
+                    </q-tab-panel>
+                </q-tab-panels>
+            </q-card-section>
+
+            <!-- Actions -->
+            <q-card-actions
+                align="right"
+                class="q-px-md q-pb-md"
+            >
+                <q-btn
+                    label="Cancel"
+                    flat
+                    @click="handleClose"
+                />
+                <q-btn
+                    label="Confirm Harvest"
+                    color="primary"
+                    :disable="preview.errors.length > 0 || isCommitting"
+                    @click="confirmHarvest"
+                />
+            </q-card-actions>
+        </template>
+    </AsyncOperationDialog>
 </template>
 
 <script setup lang="ts">
@@ -605,7 +526,7 @@ import { harvestService } from "../services/harvest-service"
 import type { HarvestPreviewDto } from "../types"
 import type { QTableColumn } from "quasar"
 import StatusBanner from "@/components/StatusBanner.vue"
-import StatusBadge from "@/components/StatusBadge.vue"
+import AsyncOperationDialog from "./AsyncOperationDialog.vue"
 import { inflect } from "inflection"
 import ClinicalEffortPreviewTable from "./ClinicalEffortPreviewTable.vue"
 
diff --git a/VueApp/src/Effort/components/InstructorPageShell.vue b/VueApp/src/Effort/components/InstructorPageShell.vue
new file mode 100644
index 000000000..290032572
--- /dev/null
+++ b/VueApp/src/Effort/components/InstructorPageShell.vue
@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import StatusBanner from "@/components/StatusBanner.vue"
+
+defineProps<{
+    termCode: number
+    isLoading: boolean
+    loadError?: string
+}>()
+</script>
+
+<template>
+    <div class="q-pa-md">
+        <!-- Breadcrumb -->
+        <q-breadcrumbs class="q-mb-md">
+            <q-breadcrumbs-el
+                label="Instructors"
+                :to="{ name: 'InstructorList', params: { termCode } }"
+            />
+            <slot name="breadcrumbs" />
+        </q-breadcrumbs>
+
+        <!-- Loading state -->
+        <div
+            v-if="isLoading"
+            class="text-center q-my-lg"
+        >
+            <q-spinner-dots
+                size="3rem"
+                color="primary"
+            />
+            <div class="q-mt-md text-body1">Loading instructor...</div>
+        </div>
+
+        <!-- Error state -->
+        <StatusBanner
+            v-else-if="loadError"
+            type="error"
+        >
+            {{ loadError }}
+            <template #action>
+                <q-btn
+                    flat
+                    label="Go Back"
+                    :to="{ name: 'InstructorList', params: { termCode } }"
+                />
+            </template>
+        </StatusBanner>
+
+        <!-- Content -->
+        <template v-else>
+            <slot />
+        </template>
+    </div>
+</template>
diff --git a/VueApp/src/Effort/components/PercentAssignmentAddDialog.vue b/VueApp/src/Effort/components/PercentAssignmentAddDialog.vue
index 91d394908..39c5a8734 100644
--- a/VueApp/src/Effort/components/PercentAssignmentAddDialog.vue
+++ b/VueApp/src/Effort/components/PercentAssignmentAddDialog.vue
@@ -30,163 +30,15 @@
                     class="effort-form"
                     greedy
                 >
-                    <!-- Type Selection (grouped by class) -->
-                    <q-select
-                        v-model="form.percentAssignTypeId"
-                        :options="groupedTypeOptions"
-                        label="Type *"
-                        dense
-                        options-dense
-                        outlined
-                        emit-value
-                        map-options
-                        :rules="[requiredRule('Type')]"
-                        lazy-rules="ondemand"
-                    >
-                        <template #option="scope">
-                            <q-item-label
-                                v-if="scope.opt.isHeader"
-                                header
-                                class="text-weight-bold text-primary q-py-xs"
-                            >
-                                {{ scope.opt.label }}
-                            </q-item-label>
-                            <q-item
-                                v-else
-                                v-bind="scope.itemProps"
-                            >
-                                <q-item-section>
-                                    <q-item-label>{{ scope.opt.label }}</q-item-label>
-                                </q-item-section>
-                            </q-item>
-                        </template>
-                    </q-select>
-
-                    <!-- Modifier Selection -->
-                    <q-select
-                        v-model="form.modifier"
-                        :options="modifierOptions"
-                        label="Modifier"
-                        dense
-                        options-dense
-                        outlined
-                        emit-value
-                        map-options
-                        clearable
-                    />
-
-                    <!-- Unit Selection -->
-                    <q-select
-                        v-model="form.unitId"
-                        :options="unitOptions"
-                        label="Unit *"
-                        dense
-                        options-dense
-                        outlined
-                        emit-value
-                        map-options
-                        clearable
-                        :rules="[requiredRule('Unit')]"
-                        lazy-rules="ondemand"
-                    />
-
-                    <!-- Start Date (Month/Year) -->
-                    <div class="row q-col-gutter-sm">
-                        <div class="col">
-                            <q-select
-                                v-model="form.startMonth"
-                                :options="monthOptions"
-                                label="Start Month *"
-                                dense
-                                options-dense
-                                outlined
-                                emit-value
-                                map-options
-                                :rules="[requiredRule('Start month')]"
-                                lazy-rules="ondemand"
-                            />
-                        </div>
-                        <div class="col">
-                            <q-select
-                                v-model="form.startYear"
-                                :options="yearOptions"
-                                label="Start Year *"
-                                dense
-                                options-dense
-                                outlined
-                                emit-value
-                                map-options
-                                :rules="[requiredRule('Start year')]"
-                                lazy-rules="ondemand"
-                            />
-                        </div>
-                    </div>
-
-                    <!-- End Date (Month/Year) - Optional -->
-                    <div class="row q-col-gutter-sm">
-                        <div class="col">
-                            <q-select
-                                v-model="form.endMonth"
-                                :options="monthOptions"
-                                label="End Month"
-                                dense
-                                options-dense
-                                outlined
-                                emit-value
-                                map-options
-                                clearable
-                                :rules="endMonthRules"
-                                lazy-rules="ondemand"
-                            />
-                        </div>
-                        <div class="col">
-                            <q-select
-                                v-model="form.endYear"
-                                :options="yearOptions"
-                                label="End Year"
-                                dense
-                                options-dense
-                                outlined
-                                emit-value
-                                map-options
-                                clearable
-                                :rules="endYearRules"
-                                lazy-rules="ondemand"
-                            />
-                        </div>
-                    </div>
-
-                    <!-- Percent Input -->
-                    <q-input
-                        v-model.number="form.percentageValue"
-                        label="Percent *"
-                        type="number"
-                        dense
-                        outlined
-                        min="0"
-                        max="100"
-                        step="0.1"
-                        :rules="[percentRule]"
-                        lazy-rules="ondemand"
-                    />
-
-                    <!-- Comment Input -->
-                    <q-input
-                        v-model="form.comment"
-                        label="Comment"
-                        type="textarea"
-                        dense
-                        outlined
-                        maxlength="100"
-                        counter
-                        autogrow
-                    />
-
-                    <!-- Compensated Checkbox -->
-                    <q-checkbox
-                        v-model="form.compensated"
-                        label="Compensated"
-                        dense
+                    <PercentAssignmentFormFields
+                        v-model="form"
+                        :grouped-type-options="groupedTypeOptions"
+                        :modifier-options="modifierOptions"
+                        :unit-options="unitOptions"
+                        :month-options="monthOptions"
+                        :year-options="yearOptions"
+                        :end-month-rules="endMonthRules"
+                        :end-year-rules="endYearRules"
                     />
 
                     <!-- Warning Banner -->
@@ -215,27 +67,12 @@
                 </q-form>
             </q-card-section>
 
-            <q-card-actions align="right">
-                <q-btn
-                    flat
-                    label="Cancel"
-                    @click="handleClose"
-                />
-                <q-btn
-                    color="primary"
-                    label="Add"
-                    :loading="isSaving"
-                    @click="createPercentage"
-                >
-                    <template #loading>
-                        <q-spinner
-                            size="1em"
-                            class="q-mr-sm"
-                        />
-                        Add
-                    </template>
-                </q-btn>
-            </q-card-actions>
+            <DialogSubmitActions
+                submit-label="Add"
+                :is-saving="isSaving"
+                @cancel="handleClose"
+                @submit="createPercentage"
+            />
         </q-card>
     </q-dialog>
 </template>
@@ -245,9 +82,10 @@ import { ref, computed, watch } from "vue"
 import { QForm } from "quasar"
 import { useUnsavedChanges } from "@/composables/use-unsaved-changes"
 import StatusBanner from "@/components/StatusBanner.vue"
+import DialogSubmitActions from "./DialogSubmitActions.vue"
+import PercentAssignmentFormFields from "./PercentAssignmentFormFields.vue"
 import { percentageService } from "../services/percentage-service"
 import { usePercentageForm } from "../composables/use-percentage-form"
-import { requiredRule, percentRule } from "../validation"
 import "../effort-forms.css"
 import type { PercentageDto, PercentAssignTypeDto, UnitDto, CreatePercentageRequest } from "../types"
 
diff --git a/VueApp/src/Effort/components/PercentAssignmentEditDialog.vue b/VueApp/src/Effort/components/PercentAssignmentEditDialog.vue
index 64037c2f2..34f94eb04 100644
--- a/VueApp/src/Effort/components/PercentAssignmentEditDialog.vue
+++ b/VueApp/src/Effort/components/PercentAssignmentEditDialog.vue
@@ -30,163 +30,15 @@
                     class="effort-form"
                     greedy
                 >
-                    <!-- Type Selection (grouped by class) -->
-                    <q-select
-                        v-model="form.percentAssignTypeId"
-                        :options="groupedTypeOptions"
-                        label="Type *"
-                        dense
-                        options-dense
-                        outlined
-                        emit-value
-                        map-options
-                        :rules="[requiredRule('Type')]"
-                        lazy-rules="ondemand"
-                    >
-                        <template #option="scope">
-                            <q-item-label
-                                v-if="scope.opt.isHeader"
-                                header
-                                class="text-weight-bold text-primary q-py-xs"
-                            >
-                                {{ scope.opt.label }}
-                            </q-item-label>
-                            <q-item
-                                v-else
-                                v-bind="scope.itemProps"
-                            >
-                                <q-item-section>
-                                    <q-item-label>{{ scope.opt.label }}</q-item-label>
-                                </q-item-section>
-                            </q-item>
-                        </template>
-                    </q-select>
-
-                    <!-- Modifier Selection -->
-                    <q-select
-                        v-model="form.modifier"
-                        :options="modifierOptions"
-                        label="Modifier"
-                        dense
-                        options-dense
-                        outlined
-                        emit-value
-                        map-options
-                        clearable
-                    />
-
-                    <!-- Unit Selection -->
-                    <q-select
-                        v-model="form.unitId"
-                        :options="unitOptions"
-                        label="Unit *"
-                        dense
-                        options-dense
-                        outlined
-                        emit-value
-                        map-options
-                        clearable
-                        :rules="[requiredRule('Unit')]"
-                        lazy-rules="ondemand"
-                    />
-
-                    <!-- Start Date (Month/Year) -->
-                    <div class="row q-col-gutter-sm">
-                        <div class="col">
-                            <q-select
-                                v-model="form.startMonth"
-                                :options="monthOptions"
-                                label="Start Month *"
-                                dense
-                                options-dense
-                                outlined
-                                emit-value
-                                map-options
-                                :rules="[requiredRule('Start month')]"
-                                lazy-rules="ondemand"
-                            />
-                        </div>
-                        <div class="col">
-                            <q-select
-                                v-model="form.startYear"
-                                :options="yearOptions"
-                                label="Start Year *"
-                                dense
-                                options-dense
-                                outlined
-                                emit-value
-                                map-options
-                                :rules="[requiredRule('Start year')]"
-                                lazy-rules="ondemand"
-                            />
-                        </div>
-                    </div>
-
-                    <!-- End Date (Month/Year) - Optional -->
-                    <div class="row q-col-gutter-sm">
-                        <div class="col">
-                            <q-select
-                                v-model="form.endMonth"
-                                :options="monthOptions"
-                                label="End Month"
-                                dense
-                                options-dense
-                                outlined
-                                emit-value
-                                map-options
-                                clearable
-                                :rules="endMonthRules"
-                                lazy-rules="ondemand"
-                            />
-                        </div>
-                        <div class="col">
-                            <q-select
-                                v-model="form.endYear"
-                                :options="yearOptions"
-                                label="End Year"
-                                dense
-                                options-dense
-                                outlined
-                                emit-value
-                                map-options
-                                clearable
-                                :rules="endYearRules"
-                                lazy-rules="ondemand"
-                            />
-                        </div>
-                    </div>
-
-                    <!-- Percent Input -->
-                    <q-input
-                        v-model.number="form.percentageValue"
-                        label="Percent *"
-                        type="number"
-                        dense
-                        outlined
-                        min="0"
-                        max="100"
-                        step="0.1"
-                        :rules="[percentRule]"
-                        lazy-rules="ondemand"
-                    />
-
-                    <!-- Comment Input -->
-                    <q-input
-                        v-model="form.comment"
-                        label="Comment"
-                        type="textarea"
-                        dense
-                        outlined
-                        maxlength="100"
-                        counter
-                        autogrow
-                    />
-
-                    <!-- Compensated Checkbox -->
-                    <q-checkbox
-                        v-model="form.compensated"
-                        label="Compensated"
-                        dense
+                    <PercentAssignmentFormFields
+                        v-model="form"
+                        :grouped-type-options="groupedTypeOptions"
+                        :modifier-options="modifierOptions"
+                        :unit-options="unitOptions"
+                        :month-options="monthOptions"
+                        :year-options="yearOptions"
+                        :end-month-rules="endMonthRules"
+                        :end-year-rules="endYearRules"
                     />
 
                     <!-- Post-save Warning Banner -->
@@ -215,27 +67,12 @@
                 </q-form>
             </q-card-section>
 
-            <q-card-actions align="right">
-                <q-btn
-                    flat
-                    label="Cancel"
-                    @click="handleClose"
-                />
-                <q-btn
-                    color="primary"
-                    label="Save"
-                    :loading="isSaving"
-                    @click="savePercentage"
-                >
-                    <template #loading>
-                        <q-spinner
-                            size="1em"
-                            class="q-mr-sm"
-                        />
-                        Save
-                    </template>
-                </q-btn>
-            </q-card-actions>
+            <DialogSubmitActions
+                submit-label="Save"
+                :is-saving="isSaving"
+                @cancel="handleClose"
+                @submit="savePercentage"
+            />
         </q-card>
     </q-dialog>
 </template>
@@ -245,9 +82,10 @@ import { ref, computed, watch } from "vue"
 import { QForm } from "quasar"
 import { useUnsavedChanges } from "@/composables/use-unsaved-changes"
 import StatusBanner from "@/components/StatusBanner.vue"
+import DialogSubmitActions from "./DialogSubmitActions.vue"
+import PercentAssignmentFormFields from "./PercentAssignmentFormFields.vue"
 import { percentageService } from "../services/percentage-service"
 import { usePercentageForm } from "../composables/use-percentage-form"
-import { requiredRule, percentRule } from "../validation"
 import "../effort-forms.css"
 import type { PercentageDto, PercentAssignTypeDto, UnitDto, UpdatePercentageRequest } from "../types"
 
diff --git a/VueApp/src/Effort/components/PercentAssignmentFormFields.vue b/VueApp/src/Effort/components/PercentAssignmentFormFields.vue
new file mode 100644
index 000000000..12fec1d1a
--- /dev/null
+++ b/VueApp/src/Effort/components/PercentAssignmentFormFields.vue
@@ -0,0 +1,180 @@
+<script setup lang="ts">
+import type { ValidationRule } from "quasar"
+import type { PercentageFormState, TypeOption } from "../composables/use-percentage-form"
+import { requiredRule, percentRule } from "../validation"
+
+type SelectOption<T> = { label: string; value: T }
+
+defineProps<{
+    groupedTypeOptions: TypeOption[]
+    modifierOptions: SelectOption<string | null>[]
+    unitOptions: SelectOption<number>[]
+    monthOptions: SelectOption<number>[]
+    yearOptions: SelectOption<number>[]
+    endMonthRules: ValidationRule[]
+    endYearRules: ValidationRule[]
+}>()
+
+const form = defineModel<PercentageFormState>({ required: true })
+</script>
+
+<template>
+    <!-- Type Selection (grouped by class) -->
+    <q-select
+        v-model="form.percentAssignTypeId"
+        :options="groupedTypeOptions"
+        label="Type *"
+        dense
+        options-dense
+        outlined
+        emit-value
+        map-options
+        :rules="[requiredRule('Type')]"
+        lazy-rules="ondemand"
+    >
+        <template #option="scope">
+            <q-item-label
+                v-if="scope.opt.isHeader"
+                header
+                class="text-weight-bold text-primary q-py-xs"
+            >
+                {{ scope.opt.label }}
+            </q-item-label>
+            <q-item
+                v-else
+                v-bind="scope.itemProps"
+            >
+                <q-item-section>
+                    <q-item-label>{{ scope.opt.label }}</q-item-label>
+                </q-item-section>
+            </q-item>
+        </template>
+    </q-select>
+
+    <!-- Modifier Selection -->
+    <q-select
+        v-model="form.modifier"
+        :options="modifierOptions"
+        label="Modifier"
+        dense
+        options-dense
+        outlined
+        emit-value
+        map-options
+        clearable
+    />
+
+    <!-- Unit Selection -->
+    <q-select
+        v-model="form.unitId"
+        :options="unitOptions"
+        label="Unit *"
+        dense
+        options-dense
+        outlined
+        emit-value
+        map-options
+        clearable
+        :rules="[requiredRule('Unit')]"
+        lazy-rules="ondemand"
+    />
+
+    <!-- Start Date (Month/Year) -->
+    <div class="row q-col-gutter-sm">
+        <div class="col">
+            <q-select
+                v-model="form.startMonth"
+                :options="monthOptions"
+                label="Start Month *"
+                dense
+                options-dense
+                outlined
+                emit-value
+                map-options
+                :rules="[requiredRule('Start month')]"
+                lazy-rules="ondemand"
+            />
+        </div>
+        <div class="col">
+            <q-select
+                v-model="form.startYear"
+                :options="yearOptions"
+                label="Start Year *"
+                dense
+                options-dense
+                outlined
+                emit-value
+                map-options
+                :rules="[requiredRule('Start year')]"
+                lazy-rules="ondemand"
+            />
+        </div>
+    </div>
+
+    <!-- End Date (Month/Year) - Optional -->
+    <div class="row q-col-gutter-sm">
+        <div class="col">
+            <q-select
+                v-model="form.endMonth"
+                :options="monthOptions"
+                label="End Month"
+                dense
+                options-dense
+                outlined
+                emit-value
+                map-options
+                clearable
+                :rules="endMonthRules"
+                lazy-rules="ondemand"
+            />
+        </div>
+        <div class="col">
+            <q-select
+                v-model="form.endYear"
+                :options="yearOptions"
+                label="End Year"
+                dense
+                options-dense
+                outlined
+                emit-value
+                map-options
+                clearable
+                :rules="endYearRules"
+                lazy-rules="ondemand"
+            />
+        </div>
+    </div>
+
+    <!-- Percent Input -->
+    <q-input
+        v-model.number="form.percentageValue"
+        label="Percent *"
+        type="number"
+        dense
+        outlined
+        min="0"
+        max="100"
+        step="0.1"
+        :rules="[percentRule]"
+        lazy-rules="ondemand"
+    />
+
+    <!-- Comment Input -->
+    <q-input
+        v-model="form.comment"
+        label="Comment"
+        type="textarea"
+        dense
+        outlined
+        maxlength="100"
+        counter
+        autogrow
+    />
+
+    <!-- Compensated Checkbox -->
+    <q-checkbox
+        v-model="form.compensated"
+        label="Compensated"
+        dense
+    />
+</template>
diff --git a/VueApp/src/Effort/components/PercentRolloverDialog.vue b/VueApp/src/Effort/components/PercentRolloverDialog.vue
index 37653f24c..8dbe4acba 100644
--- a/VueApp/src/Effort/components/PercentRolloverDialog.vue
+++ b/VueApp/src/Effort/components/PercentRolloverDialog.vue
@@ -1,33 +1,20 @@
 <template>
-    <q-dialog
+    <AsyncOperationDialog
         :model-value="modelValue"
-        persistent
-        maximized-on-mobile
-        aria-labelledby="percent-rollover-title"
-        @keydown.escape="handleClose"
+        title="Percent Assignment Rollover"
+        subtitle="Roll forward percent assignments to the new academic year"
+        max-width="900px"
+        :is-loading="isLoading"
+        :is-committing="isCommitting"
+        :load-error="loadError"
+        :progress="rolloverProgress"
+        progress-title="Processing Rollover"
+        :progress-phase="rolloverPhase"
+        :progress-detail="rolloverDetail"
+        @retry="loadPreview"
+        @close="handleClose"
     >
-        <q-card style="width: 100%; max-width: 900px; position: relative">
-            <q-btn
-                icon="close"
-                flat
-                round
-                dense
-                class="absolute-top-right q-ma-sm"
-                style="z-index: 1"
-                aria-label="Close dialog"
-                @click="handleClose"
-            />
-            <q-card-section class="q-pb-none q-pr-xl">
-                <div
-                    id="percent-rollover-title"
-                    class="text-h6"
-                >
-                    Percent Assignment Rollover
-                </div>
-                <div class="text-caption text-grey-7">Roll forward percent assignments to the new academic year</div>
-            </q-card-section>
-
-            <!-- June/July Warning -->
+        <template #before-body>
             <q-card-section
                 v-if="isOutsideIdealMonths && !isLoading"
                 class="q-py-sm"
@@ -40,215 +27,154 @@
                     </div>
                 </StatusBanner>
             </q-card-section>
-
-            <!-- Loading State (Preview) -->
-            <q-card-section
-                v-if="isLoading"
-                class="text-center q-py-xl"
-            >
-                <q-spinner-dots
-                    size="50px"
-                    color="primary"
-                />
-                <div class="q-mt-md text-grey-7">Generating preview...</div>
-            </q-card-section>
-
-            <!-- Committing State (Progress) -->
-            <q-card-section
-                v-else-if="isCommitting"
-                class="q-py-xl"
-            >
-                <div class="text-h6 q-mb-md text-center">Processing Rollover</div>
-                <q-linear-progress
-                    :value="rolloverProgress"
-                    size="25px"
-                    color="primary"
-                    class="q-mb-md"
-                >
-                    <div class="absolute-full flex flex-center">
-                        <q-badge
-                            color="white"
-                            text-color="primary"
-                            :label="`${Math.round(rolloverProgress * 100)}%`"
-                        />
-                    </div>
-                </q-linear-progress>
-                <div class="text-center text-grey-7">{{ rolloverPhase }}</div>
-                <div
-                    v-if="rolloverDetail"
-                    class="text-center text-caption text-grey-8 q-mt-xs"
-                >
-                    {{ rolloverDetail }}
-                </div>
-            </q-card-section>
-
-            <!-- Error State -->
-            <q-card-section
-                v-else-if="loadError"
-                class="text-center q-py-xl"
-            >
-                <q-icon
-                    name="error"
-                    color="negative"
-                    size="48px"
-                />
-                <div class="q-mt-md text-negative">{{ loadError }}</div>
-                <q-btn
-                    label="Retry"
-                    color="primary"
-                    class="q-mt-md"
-                    @click="loadPreview"
-                />
-            </q-card-section>
-
-            <!-- Preview Content -->
-            <template v-else-if="preview">
-                <q-card-section class="q-pt-sm">
-                    <!-- Summary Banner -->
-                    <StatusBanner type="info">
-                        <div class="row q-col-gutter-md">
-                            <div class="col-4 text-center">
-                                <div class="text-h5">{{ preview.assignments.length }}</div>
-                                <div class="text-caption">To Roll Forward</div>
-                            </div>
-                            <div class="col-4 text-center">
-                                <div class="text-h5">{{ preview.existingAssignments.length }}</div>
-                                <div class="text-caption">Already Rolled</div>
-                            </div>
-                            <div class="col-4 text-center">
-                                <div class="text-h5">{{ preview.excludedByAudit?.length ?? 0 }}</div>
-                                <div class="text-caption">Excluded</div>
-                            </div>
+        </template>
+
+        <template v-if="preview">
+            <q-card-section class="q-pt-sm">
+                <!-- Summary Banner -->
+                <StatusBanner type="info">
+                    <div class="row q-col-gutter-md">
+                        <div class="col-4 text-center">
+                            <div class="text-h5">{{ preview.assignments.length }}</div>
+                            <div class="text-caption">To Roll Forward</div>
                         </div>
-                        <div class="text-caption q-mt-sm text-center">
-                            Rolling from {{ preview.sourceAcademicYearDisplay }} to
-                            {{ preview.targetAcademicYearDisplay }}
+                        <div class="col-4 text-center">
+                            <div class="text-h5">{{ preview.existingAssignments.length }}</div>
+                            <div class="text-caption">Already Rolled</div>
                         </div>
-                    </StatusBanner>
-
-                    <!-- Warning when nothing to rollover -->
-                    <StatusBanner
-                        v-if="preview.assignments.length === 0"
-                        type="warning"
-                    >
-                        <div class="text-weight-medium">No assignments to roll forward</div>
-                        <div class="text-caption">
-                            There are no percent assignments ending on {{ formatDate(preview.oldEndDate) }} that need to
-                            be rolled forward.
+                        <div class="col-4 text-center">
+                            <div class="text-h5">{{ preview.excludedByAudit?.length ?? 0 }}</div>
+                            <div class="text-caption">Excluded</div>
                         </div>
-                    </StatusBanner>
+                    </div>
+                    <div class="text-caption text-grey-7 q-mt-sm text-center">
+                        Rolling from {{ preview.sourceAcademicYearDisplay }} to
+                        {{ preview.targetAcademicYearDisplay }}
+                    </div>
+                </StatusBanner>
+
+                <!-- Warning when nothing to rollover -->
+                <StatusBanner
+                    v-if="preview.assignments.length === 0"
+                    type="warning"
+                >
+                    <div class="text-weight-medium">No assignments to roll forward</div>
+                    <div class="text-caption text-grey-7">
+                        There are no percent assignments ending on {{ formatDate(preview.oldEndDate) }} that need to be
+                        rolled forward.
+                    </div>
+                </StatusBanner>
 
-                    <!-- Will be Rolled Forward Section (cyan, expanded by default) -->
-                    <q-expansion-item
-                        v-if="preview.assignments.length > 0"
-                        default-opened
-                        class="q-mb-md"
-                    >
-                        <template #header>
-                            <div class="row items-center full-width">
-                                <q-icon
-                                    name="event_repeat"
-                                    color="info"
-                                    size="24px"
-                                    class="q-mr-sm"
-                                />
-                                <div>
-                                    <div class="text-weight-medium">Will be rolled forward</div>
-                                    <div class="text-caption text-grey-7">
-                                        {{ preview.assignments.length }}
-                                        {{ inflect("assignment", preview.assignments.length) }} ending
-                                        {{ formatDate(preview.oldEndDate) }} will be extended to
-                                        {{ formatDate(preview.newEndDate) }}
-                                    </div>
+                <!-- Will be Rolled Forward Section (cyan, expanded by default) -->
+                <q-expansion-item
+                    v-if="preview.assignments.length > 0"
+                    default-opened
+                    class="q-mb-md"
+                >
+                    <template #header>
+                        <div class="row items-center full-width">
+                            <q-icon
+                                name="event_repeat"
+                                color="info"
+                                size="24px"
+                                class="q-mr-sm"
+                            />
+                            <div>
+                                <div class="text-weight-medium">Will be rolled forward</div>
+                                <div class="text-caption text-grey-7">
+                                    {{ preview.assignments.length }}
+                                    {{ inflect("assignment", preview.assignments.length) }} ending
+                                    {{ formatDate(preview.oldEndDate) }} will be extended to
+                                    {{ formatDate(preview.newEndDate) }}
                                 </div>
                             </div>
-                        </template>
-                        <div class="bg-ucdavis-blue-10 q-pa-sm">
-                            <RolloverAssignmentTable :rows="preview.assignments" />
                         </div>
-                    </q-expansion-item>
+                    </template>
+                    <div class="bg-cyan-1 q-pa-sm">
+                        <RolloverAssignmentTable :rows="preview.assignments" />
+                    </div>
+                </q-expansion-item>
 
-                    <!-- Already Rolled Section (grey, collapsed by default, shows first 10 with Show all option) -->
-                    <q-expansion-item
-                        v-if="preview.existingAssignments.length > 0"
-                        class="q-mb-md"
-                    >
-                        <template #header>
-                            <div class="row items-center full-width">
-                                <q-icon
-                                    name="check_circle"
-                                    color="grey-6"
-                                    size="24px"
-                                    class="q-mr-sm"
-                                />
-                                <div>
-                                    <div class="text-weight-medium text-grey-8">Already rolled</div>
-                                    <div class="text-caption text-grey-8">
-                                        {{ preview.existingAssignments.length }}
-                                        {{ inflect("assignment", preview.existingAssignments.length) }} already have a
-                                        successor in {{ preview.targetAcademicYearDisplay }}
-                                    </div>
+                <!-- Already Rolled Section (grey, collapsed by default, shows first 10 with Show all option) -->
+                <q-expansion-item
+                    v-if="preview.existingAssignments.length > 0"
+                    class="q-mb-md"
+                >
+                    <template #header>
+                        <div class="row items-center full-width">
+                            <q-icon
+                                name="check_circle"
+                                color="grey-6"
+                                size="24px"
+                                class="q-mr-sm"
+                            />
+                            <div>
+                                <div class="text-weight-medium text-grey-7">Already rolled</div>
+                                <div class="text-caption text-grey-6">
+                                    {{ preview.existingAssignments.length }}
+                                    {{ inflect("assignment", preview.existingAssignments.length) }} already have a
+                                    successor in {{ preview.targetAcademicYearDisplay }}
                                 </div>
                             </div>
-                        </template>
-                        <div class="bg-grey-2 q-pa-sm">
-                            <RolloverAssignmentTable :rows="preview.existingAssignments" />
                         </div>
-                    </q-expansion-item>
+                    </template>
+                    <div class="bg-grey-2 q-pa-sm">
+                        <RolloverAssignmentTable :rows="preview.existingAssignments" />
+                    </div>
+                </q-expansion-item>
 
-                    <!-- Excluded by Audit Section (orange, collapsed by default) -->
-                    <q-expansion-item
-                        v-if="preview.excludedByAudit?.length > 0"
-                        class="q-mb-md"
-                    >
-                        <template #header>
-                            <div class="row items-center full-width">
-                                <q-icon
-                                    name="block"
-                                    color="warning"
-                                    size="24px"
-                                    class="q-mr-sm"
-                                />
-                                <div>
-                                    <div class="text-weight-medium">Excluded - Post-Harvest Changes</div>
-                                    <div class="text-caption text-grey-8">
-                                        {{ preview.excludedByAudit.length }}
-                                        {{ inflect("assignment", preview.excludedByAudit.length) }} excluded due to
-                                        manual edits/deletes after harvest
-                                    </div>
+                <!-- Excluded by Audit Section (orange, collapsed by default) -->
+                <q-expansion-item
+                    v-if="preview.excludedByAudit?.length > 0"
+                    class="q-mb-md"
+                >
+                    <template #header>
+                        <div class="row items-center full-width">
+                            <q-icon
+                                name="block"
+                                color="warning"
+                                size="24px"
+                                class="q-mr-sm"
+                            />
+                            <div>
+                                <div class="text-weight-medium text-orange-9">Excluded - Post-Harvest Changes</div>
+                                <div class="text-caption text-grey-7">
+                                    {{ preview.excludedByAudit.length }}
+                                    {{ inflect("assignment", preview.excludedByAudit.length) }} excluded due to manual
+                                    edits/deletes after harvest
                                 </div>
                             </div>
-                        </template>
-                        <div class="bg-ucdavis-gold-10 q-pa-sm">
-                            <StatusBanner type="warning">
-                                These assignments will not be rolled forward because someone manually edited or deleted
-                                a percent assignment of the same type for this instructor after the term was harvested.
-                            </StatusBanner>
-                            <RolloverAssignmentTable :rows="preview.excludedByAudit" />
                         </div>
-                    </q-expansion-item>
-                </q-card-section>
+                    </template>
+                    <div class="bg-orange-1 q-pa-sm">
+                        <StatusBanner type="warning">
+                            These assignments will not be rolled forward because someone manually edited or deleted a
+                            percent assignment of the same type for this instructor after the term was harvested.
+                        </StatusBanner>
+                        <RolloverAssignmentTable :rows="preview.excludedByAudit" />
+                    </div>
+                </q-expansion-item>
+            </q-card-section>
 
-                <!-- Actions -->
-                <q-card-actions
-                    align="right"
-                    class="q-px-md q-pb-md"
-                >
-                    <q-btn
-                        label="Cancel"
-                        flat
-                        @click="handleClose"
-                    />
-                    <q-btn
-                        label="Confirm Rollover"
-                        color="primary"
-                        :disable="preview.assignments.length === 0 || isCommitting"
-                        @click="confirmRollover"
-                    />
-                </q-card-actions>
-            </template>
-        </q-card>
-    </q-dialog>
+            <!-- Actions -->
+            <q-card-actions
+                align="right"
+                class="q-px-md q-pb-md"
+            >
+                <q-btn
+                    label="Cancel"
+                    flat
+                    @click="handleClose"
+                />
+                <q-btn
+                    label="Confirm Rollover"
+                    color="primary"
+                    :disable="preview.assignments.length === 0 || isCommitting"
+                    @click="confirmRollover"
+                />
+            </q-card-actions>
+        </template>
+    </AsyncOperationDialog>
 </template>
 
 <script setup lang="ts">
@@ -257,6 +183,7 @@ import { useQuasar } from "quasar"
 import { rolloverService } from "../services/rollover-service"
 import type { PercentRolloverPreviewDto } from "../types"
 import StatusBanner from "@/components/StatusBanner.vue"
+import AsyncOperationDialog from "./AsyncOperationDialog.vue"
 import { inflect } from "inflection"
 import { useDateFunctions } from "@/composables/DateFunctions"
 import RolloverAssignmentTable from "./RolloverAssignmentTable.vue"
diff --git a/VueApp/src/Effort/components/TermTable.vue b/VueApp/src/Effort/components/TermTable.vue
new file mode 100644
index 000000000..a1e8368d7
--- /dev/null
+++ b/VueApp/src/Effort/components/TermTable.vue
@@ -0,0 +1,95 @@
+<script setup lang="ts">
+import { useDateFunctions } from "@/composables/DateFunctions"
+import type { TermDto } from "../types"
+import type { QTableColumn } from "quasar"
+
+defineProps<{
+    title: string
+    rows: TermDto[]
+    columns: QTableColumn[]
+    emptyMessage?: string
+}>()
+
+const { formatDate } = useDateFunctions()
+</script>
+
+<template>
+    <div class="q-mb-lg">
+        <h2 class="text-h6 q-mb-sm q-mt-none">{{ title }}</h2>
+        <!-- Desktop: Table -->
+        <q-table
+            :rows="rows"
+            :columns="columns"
+            row-key="termCode"
+            dense
+            flat
+            bordered
+            :pagination="{ rowsPerPage: 0 }"
+            hide-pagination
+            class="gt-xs"
+        >
+            <template #body-cell-termName="props">
+                <q-td :props="props">
+                    <router-link
+                        :to="`/Effort/${props.row.termCode}`"
+                        class="text-primary"
+                    >
+                        {{ props.row.termName }}
+                    </router-link>
+                </q-td>
+            </template>
+            <template #body-cell-harvestedDate="props">
+                <q-td :props="props">{{ formatDate(props.row.harvestedDate) }}</q-td>
+            </template>
+            <template #body-cell-openedDate="props">
+                <q-td :props="props">{{ formatDate(props.row.openedDate) }}</q-td>
+            </template>
+            <template #body-cell-expectedCloseDate="props">
+                <q-td :props="props">{{ formatDate(props.row.expectedCloseDate) }}</q-td>
+            </template>
+            <template #body-cell-closedDate="props">
+                <q-td :props="props">{{ formatDate(props.row.closedDate) }}</q-td>
+            </template>
+            <template
+                v-if="emptyMessage"
+                #no-data
+            >
+                <div class="text-grey q-pa-sm">{{ emptyMessage }}</div>
+            </template>
+        </q-table>
+
+        <!-- Mobile: List -->
+        <div class="lt-sm">
+            <div class="text-subtitle2 q-mb-xs">{{ title }}</div>
+            <q-list
+                bordered
+                separator
+                dense
+            >
+                <q-item
+                    v-for="term in rows"
+                    :key="term.termCode"
+                    v-ripple
+                    clickable
+                    :to="`/Effort/${term.termCode}`"
+                >
+                    <q-item-section>
+                        <q-item-label>{{ term.termName }}</q-item-label>
+                        <q-item-label caption>
+                            <slot
+                                name="caption"
+                                :term="term"
+                            />
+                        </q-item-label>
+                    </q-item-section>
+                    <q-item-section side>
+                        <q-icon name="chevron_right" />
+                    </q-item-section>
+                </q-item>
+                <q-item v-if="rows.length === 0 && emptyMessage">
+                    <q-item-section class="text-grey">{{ emptyMessage }}</q-item-section>
+                </q-item>
+            </q-list>
+        </div>
+    </div>
+</template>
diff --git a/VueApp/src/Effort/composables/use-percentage-form.ts b/VueApp/src/Effort/composables/use-percentage-form.ts
index 2db42c53c..22a3d79ce 100644
--- a/VueApp/src/Effort/composables/use-percentage-form.ts
+++ b/VueApp/src/Effort/composables/use-percentage-form.ts
@@ -194,3 +194,4 @@ type PercentageFormState = {
 }
 
 export { usePercentageForm }
+export type { PercentageFormState, TypeOption }
diff --git a/VueApp/src/Effort/pages/DeptSummary.vue b/VueApp/src/Effort/pages/DeptSummary.vue
index 9a341b152..c9990c7f9 100644
--- a/VueApp/src/Effort/pages/DeptSummary.vue
+++ b/VueApp/src/Effort/pages/DeptSummary.vue
@@ -1,168 +1,125 @@
 <template>
-    <div class="q-pa-md">
-        <h1>Teaching Activity Report - Department Summary</h1>
-
-        <ReportFilterForm
-            :term-code="termCode"
-            :loading="loading"
-            :initial-filters="initialFilters"
-            @generate="generateReport"
-        />
-
-        <!-- Loading state -->
-        <div
-            v-if="loading"
-            role="status"
-            class="text-center q-my-lg"
-        >
-            <q-spinner-dots
-                size="3rem"
-                color="primary"
-            />
-            <div class="q-mt-md text-body1">Loading report...</div>
-        </div>
-
-        <!-- Report content -->
-        <ReportLayout v-else-if="report">
-            <template #header>
-                <div class="col text-h6">Teaching Activity - Department Summary</div>
-                <div class="col-auto no-print">
-                    <ExportToolbar
-                        :pdf-export="handlePrint"
-                        :excel-export="handleExcelDownload"
-                    />
-                </div>
-            </template>
-
-            <template v-if="report.departments.length === 0">
-                <div
-                    role="status"
-                    class="text-grey-7 text-center q-pa-lg"
-                >
-                    No data found for the selected filters.
-                </div>
-            </template>
-
-            <template v-else>
-                <ReportDeptTabs :departments="report.departments">
-                    <template #default="{ dept }">
-                        <table class="report-table">
-                            <caption class="sr-only">
-                                Department summary of effort by instructor
-                            </caption>
-                            <thead>
-                                <tr>
-                                    <th
-                                        scope="col"
-                                        class="col-instructor"
-                                    >
-                                        Instructor
-                                    </th>
-                                    <th
-                                        v-for="type in orderedEffortTypes"
-                                        :key="type"
-                                        scope="col"
-                                        class="col-effort"
-                                        :class="{ 'col-spacer': isSpacerColumn(type) }"
-                                    >
-                                        <abbr :title="getEffortTypeLabel(type)">{{ type }}</abbr>
-                                    </th>
-                                </tr>
-                            </thead>
-                            <tbody>
-                                <tr
-                                    v-for="instructor in dept.instructors"
-                                    :key="instructor.mothraId"
+    <EffortReportPage
+        title="Teaching Activity Report - Department Summary"
+        subtitle="Teaching Activity - Department Summary"
+        :term-code="termCode"
+        :loading="loading"
+        :has-report="report !== null"
+        :is-empty="report !== null && report.departments.length === 0"
+        :initial-filters="initialFilters"
+        :on-pdf-export="handlePrint"
+        :on-excel-export="handleExcelDownload"
+        @generate="generateReport"
+    >
+        <template v-if="report">
+            <ReportDeptTabs :departments="report.departments">
+                <template #default="{ dept }">
+                    <table class="report-table">
+                        <caption class="sr-only">
+                            Department summary of effort by instructor
+                        </caption>
+                        <thead>
+                            <tr>
+                                <th
+                                    scope="col"
+                                    class="col-instructor"
                                 >
-                                    <td class="instructor-cell">{{ instructor.instructor }}</td>
-                                    <td
-                                        v-for="type in orderedEffortTypes"
-                                        :key="type"
-                                        :class="{ 'col-spacer': isSpacerColumn(type) }"
-                                    >
-                                        {{ getTotalValue(instructor.effortByType ?? {}, type) }}
-                                    </td>
-                                </tr>
-
-                                <!-- Re-display effort type headers before department totals -->
-                                <tr class="header-repeat">
-                                    <th scope="col"></th>
-                                    <th
-                                        v-for="type in orderedEffortTypes"
-                                        :key="type"
-                                        scope="col"
-                                        class="col-effort"
-                                        :class="{ 'col-spacer': isSpacerColumn(type) }"
-                                    >
-                                        <abbr :title="getEffortTypeLabel(type)">{{ type }}</abbr>
-                                    </th>
-                                </tr>
+                                    Instructor
+                                </th>
+                                <th
+                                    v-for="type in orderedEffortTypes"
+                                    :key="type"
+                                    scope="col"
+                                    class="col-effort"
+                                    :class="{ 'col-spacer': isSpacerColumn(type) }"
+                                >
+                                    <abbr :title="getEffortTypeLabel(type)">{{ type }}</abbr>
+                                </th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr
+                                v-for="instructor in dept.instructors"
+                                :key="instructor.mothraId"
+                            >
+                                <td class="instructor-cell">{{ instructor.instructor }}</td>
+                                <td
+                                    v-for="type in orderedEffortTypes"
+                                    :key="type"
+                                    :class="{ 'col-spacer': isSpacerColumn(type) }"
+                                >
+                                    {{ getTotalValue(instructor.effortByType ?? {}, type) }}
+                                </td>
+                            </tr>
 
-                                <!-- Department totals row -->
-                                <tr class="dept-totals-row bg-grey-4">
-                                    <th
-                                        scope="row"
-                                        class="subt"
-                                    >
-                                        Department Totals:
-                                    </th>
-                                    <td
-                                        v-for="type in orderedEffortTypes"
-                                        :key="type"
-                                        class="total"
-                                        :class="{ 'col-spacer': isSpacerColumn(type) }"
-                                    >
-                                        {{ getTotalValue(dept.departmentTotals, type) }}
-                                    </td>
-                                </tr>
+                            <!-- Re-display effort type headers before department totals -->
+                            <tr class="header-repeat">
+                                <th scope="col"></th>
+                                <th
+                                    v-for="type in orderedEffortTypes"
+                                    :key="type"
+                                    scope="col"
+                                    class="col-effort"
+                                    :class="{ 'col-spacer': isSpacerColumn(type) }"
+                                >
+                                    <abbr :title="getEffortTypeLabel(type)">{{ type }}</abbr>
+                                </th>
+                            </tr>
 
-                                <!-- Number Faculty row -->
-                                <tr class="faculty-row">
-                                    <td>
-                                        <span class="faculty-label">Number Faculty:</span>
-                                        <span class="faculty-count">{{ dept.facultyCount }}</span>
-                                    </td>
-                                </tr>
+                            <!-- Department totals row -->
+                            <tr class="dept-totals-row bg-grey-4">
+                                <th
+                                    scope="row"
+                                    class="subt"
+                                >
+                                    Department Totals:
+                                </th>
+                                <td
+                                    v-for="type in orderedEffortTypes"
+                                    :key="type"
+                                    class="total"
+                                    :class="{ 'col-spacer': isSpacerColumn(type) }"
+                                >
+                                    {{ getTotalValue(dept.departmentTotals, type) }}
+                                </td>
+                            </tr>
 
-                                <!-- Faculty w/ CLI + averages row -->
-                                <tr class="faculty-row bg-grey-3">
-                                    <td>
-                                        <span class="faculty-label">Faculty w/ CLI assigned:</span>
-                                        <span class="faculty-count">{{ dept.facultyWithCliCount }}</span>
-                                        <span class="avg-text">Average</span>
-                                    </td>
-                                    <td
-                                        v-for="type in orderedEffortTypes"
-                                        :key="type"
-                                        class="total"
-                                        :class="{ 'col-spacer': isSpacerColumn(type) }"
-                                    >
-                                        {{ getAverageValue(dept.departmentAverages, type) }}
-                                    </td>
-                                </tr>
-                            </tbody>
-                        </table>
-                    </template>
-                </ReportDeptTabs>
-            </template>
-        </ReportLayout>
+                            <!-- Number Faculty row -->
+                            <tr class="faculty-row">
+                                <td>
+                                    <span class="faculty-label">Number Faculty:</span>
+                                    <span class="faculty-count">{{ dept.facultyCount }}</span>
+                                </td>
+                            </tr>
 
-        <!-- No report generated yet -->
-        <div
-            v-else-if="!loading"
-            class="text-grey-7 text-center q-pa-lg"
-        >
-            Select filters and click "Generate Report" to view data.
-        </div>
-    </div>
+                            <!-- Faculty w/ CLI + averages row -->
+                            <tr class="faculty-row bg-grey-3">
+                                <td>
+                                    <span class="faculty-label">Faculty w/ CLI assigned:</span>
+                                    <span class="faculty-count">{{ dept.facultyWithCliCount }}</span>
+                                    <span class="avg-text">Average</span>
+                                </td>
+                                <td
+                                    v-for="type in orderedEffortTypes"
+                                    :key="type"
+                                    class="total"
+                                    :class="{ 'col-spacer': isSpacerColumn(type) }"
+                                >
+                                    {{ getAverageValue(dept.departmentAverages, type) }}
+                                </td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </template>
+            </ReportDeptTabs>
+        </template>
+    </EffortReportPage>
 </template>
 
 <script setup lang="ts">
 import { reportService } from "../services/report-service"
 import { useReportPage } from "../composables/use-report-page"
-import ExportToolbar from "@/components/ExportToolbar.vue"
-import ReportFilterForm from "../components/ReportFilterForm.vue"
-import ReportLayout from "../components/ReportLayout.vue"
+import EffortReportPage from "../components/EffortReportPage.vue"
 import ReportDeptTabs from "../components/ReportDeptTabs.vue"
 import type { DeptSummaryReport } from "../types"
 import "../report-tables.css"
diff --git a/VueApp/src/Effort/pages/EvalDetail.vue b/VueApp/src/Effort/pages/EvalDetail.vue
index d290c1ffa..b501b0576 100644
--- a/VueApp/src/Effort/pages/EvalDetail.vue
+++ b/VueApp/src/Effort/pages/EvalDetail.vue
@@ -1,166 +1,123 @@
 <template>
-    <div class="q-pa-md">
-        <h1>Evaluation Report - Detail</h1>
-
-        <ReportFilterForm
-            :term-code="termCode"
-            :loading="loading"
-            :initial-filters="initialFilters"
-            :visible-fields="['department', 'faculty', 'role']"
-            @generate="generateReport"
-        />
-
-        <!-- Loading state -->
-        <div
-            v-if="loading"
-            role="status"
-            class="text-center q-my-lg"
-        >
-            <q-spinner-dots
-                size="3rem"
-                color="primary"
-            />
-            <div class="q-mt-md text-body1">Loading report...</div>
-        </div>
-
-        <!-- Report content -->
-        <ReportLayout v-else-if="report">
-            <template #header>
-                <div class="col text-h6">Evaluation - Detail</div>
-                <div class="col-auto no-print">
-                    <ExportToolbar
-                        :pdf-export="handlePrint"
-                        :excel-export="handleExcelDownload"
-                    />
-                </div>
-            </template>
-
-            <template v-if="report.departments.length === 0">
-                <div
-                    role="status"
-                    class="text-grey-7 text-center q-pa-lg"
-                >
-                    No data found for the selected filters.
-                </div>
-            </template>
-
-            <template v-else>
-                <ReportDeptTabs :departments="report.departments">
-                    <template #default="{ dept }">
-                        <table class="report-table">
-                            <caption class="sr-only">
-                                Evaluation detail by instructor and course
-                            </caption>
-                            <thead>
-                                <tr>
-                                    <th
-                                        scope="col"
-                                        class="col-instructor"
-                                    >
-                                        Instructor
-                                    </th>
-                                    <th
-                                        scope="col"
-                                        class="col-role"
-                                    >
-                                        Role
-                                    </th>
-                                    <th
-                                        scope="col"
-                                        class="col-term"
-                                    >
-                                        Term
-                                    </th>
-                                    <th scope="col">Course</th>
-                                    <th
-                                        scope="col"
-                                        class="col-numeric"
-                                    >
-                                        Average
-                                    </th>
-                                    <th
-                                        scope="col"
-                                        class="col-numeric"
-                                    >
-                                        Median
-                                    </th>
-                                </tr>
-                            </thead>
-                            <tbody>
-                                <template
-                                    v-for="instructor in dept.instructors"
-                                    :key="instructor.mothraId"
+    <EffortReportPage
+        title="Evaluation Report - Detail"
+        subtitle="Evaluation - Detail"
+        :term-code="termCode"
+        :loading="loading"
+        :has-report="report !== null"
+        :is-empty="report !== null && report.departments.length === 0"
+        :initial-filters="initialFilters"
+        :visible-fields="['department', 'faculty', 'role']"
+        :on-pdf-export="handlePrint"
+        :on-excel-export="handleExcelDownload"
+        @generate="generateReport"
+    >
+        <template v-if="report">
+            <ReportDeptTabs :departments="report.departments">
+                <template #default="{ dept }">
+                    <table class="report-table">
+                        <caption class="sr-only">
+                            Evaluation detail by instructor and course
+                        </caption>
+                        <thead>
+                            <tr>
+                                <th
+                                    scope="col"
+                                    class="col-instructor"
+                                >
+                                    Instructor
+                                </th>
+                                <th
+                                    scope="col"
+                                    class="col-role"
                                 >
-                                    <!-- Course rows with instructor name rowspanned -->
-                                    <tr
-                                        v-for="(course, courseIdx) in instructor.courses"
-                                        :key="`${instructor.mothraId}_${course.crn}_${course.termCode}`"
+                                    Role
+                                </th>
+                                <th
+                                    scope="col"
+                                    class="col-term"
+                                >
+                                    Term
+                                </th>
+                                <th scope="col">Course</th>
+                                <th
+                                    scope="col"
+                                    class="col-numeric"
+                                >
+                                    Average
+                                </th>
+                                <th
+                                    scope="col"
+                                    class="col-numeric"
+                                >
+                                    Median
+                                </th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <template
+                                v-for="instructor in dept.instructors"
+                                :key="instructor.mothraId"
+                            >
+                                <!-- Course rows with instructor name rowspanned -->
+                                <tr
+                                    v-for="(course, courseIdx) in instructor.courses"
+                                    :key="`${instructor.mothraId}_${course.crn}_${course.termCode}`"
+                                >
+                                    <td
+                                        v-if="courseIdx === 0"
+                                        :rowspan="instructor.courses.length"
+                                        class="instructor-cell"
                                     >
-                                        <td
-                                            v-if="courseIdx === 0"
-                                            :rowspan="instructor.courses.length"
-                                            class="instructor-cell"
-                                        >
-                                            {{ instructor.instructor }}
-                                        </td>
-                                        <td class="col-role">{{ course.role }}</td>
-                                        <td class="col-term">{{ course.termName }}</td>
-                                        <td>{{ course.course }}</td>
-                                        <td class="col-numeric">{{ formatDecimal(course.average) }}</td>
-                                        <td class="col-numeric">{{ formatNullableDecimal(course.median) }}</td>
-                                    </tr>
-
-                                    <!-- Instructor subtotal row -->
-                                    <tr class="totals-row bg-grey-1">
-                                        <th
-                                            scope="row"
-                                            colspan="4"
-                                            class="subt"
-                                        >
-                                            Instructor Average
-                                        </th>
-                                        <td class="col-numeric total">
-                                            {{ formatDecimal(instructor.instructorAverage) }}
-                                        </td>
-                                        <td></td>
-                                    </tr>
-                                </template>
+                                        {{ instructor.instructor }}
+                                    </td>
+                                    <td class="col-role">{{ course.role }}</td>
+                                    <td class="col-term">{{ course.termName }}</td>
+                                    <td>{{ course.course }}</td>
+                                    <td class="col-numeric">{{ formatDecimal(course.average) }}</td>
+                                    <td class="col-numeric">{{ formatNullableDecimal(course.median) }}</td>
+                                </tr>
 
-                                <!-- Department average row -->
-                                <tr class="dept-totals-row bg-grey-4">
+                                <!-- Instructor subtotal row -->
+                                <tr class="totals-row bg-grey-1">
                                     <th
                                         scope="row"
                                         colspan="4"
                                         class="subt"
                                     >
-                                        Department Average
+                                        Instructor Average
                                     </th>
-                                    <td class="col-numeric total">{{ formatDecimal(dept.departmentAverage) }}</td>
+                                    <td class="col-numeric total">
+                                        {{ formatDecimal(instructor.instructorAverage) }}
+                                    </td>
                                     <td></td>
                                 </tr>
-                            </tbody>
-                        </table>
-                    </template>
-                </ReportDeptTabs>
-            </template>
-        </ReportLayout>
+                            </template>
 
-        <!-- No report generated yet -->
-        <div
-            v-else-if="!loading"
-            class="text-grey-7 text-center q-pa-lg"
-        >
-            Select filters and click "Generate Report" to view data.
-        </div>
-    </div>
+                            <!-- Department average row -->
+                            <tr class="dept-totals-row bg-grey-4">
+                                <th
+                                    scope="row"
+                                    colspan="4"
+                                    class="subt"
+                                >
+                                    Department Average
+                                </th>
+                                <td class="col-numeric total">{{ formatDecimal(dept.departmentAverage) }}</td>
+                                <td></td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </template>
+            </ReportDeptTabs>
+        </template>
+    </EffortReportPage>
 </template>
 
 <script setup lang="ts">
 import { reportService } from "../services/report-service"
 import { useReportPage } from "../composables/use-report-page"
-import ExportToolbar from "@/components/ExportToolbar.vue"
-import ReportFilterForm from "../components/ReportFilterForm.vue"
-import ReportLayout from "../components/ReportLayout.vue"
+import EffortReportPage from "../components/EffortReportPage.vue"
 import ReportDeptTabs from "../components/ReportDeptTabs.vue"
 import type { EvalDetailReport } from "../types"
 import "../report-tables.css"
diff --git a/VueApp/src/Effort/pages/EvalSummary.vue b/VueApp/src/Effort/pages/EvalSummary.vue
index 08fa86531..b0796f614 100644
--- a/VueApp/src/Effort/pages/EvalSummary.vue
+++ b/VueApp/src/Effort/pages/EvalSummary.vue
@@ -1,109 +1,66 @@
 <template>
-    <div class="q-pa-md">
-        <h1>Evaluation Report - Summary</h1>
-
-        <ReportFilterForm
-            :term-code="termCode"
-            :loading="loading"
-            :initial-filters="initialFilters"
-            :visible-fields="['department', 'faculty', 'role']"
-            @generate="generateReport"
-        />
-
-        <!-- Loading state -->
-        <div
-            v-if="loading"
-            role="status"
-            class="text-center q-my-lg"
-        >
-            <q-spinner-dots
-                size="3rem"
-                color="primary"
-            />
-            <div class="q-mt-md text-body1">Loading report...</div>
-        </div>
-
-        <!-- Report content -->
-        <ReportLayout v-else-if="report">
-            <template #header>
-                <div class="col text-h6">Evaluation - Summary</div>
-                <div class="col-auto no-print">
-                    <ExportToolbar
-                        :pdf-export="handlePrint"
-                        :excel-export="handleExcelDownload"
-                    />
-                </div>
-            </template>
-
-            <template v-if="report.departments.length === 0">
-                <div
-                    role="status"
-                    class="text-grey-7 text-center q-pa-lg"
-                >
-                    No data found for the selected filters.
-                </div>
-            </template>
-
-            <template v-else>
-                <ReportDeptTabs :departments="report.departments">
-                    <template #default="{ dept }">
-                        <table class="report-table">
-                            <caption class="sr-only">
-                                Evaluation summary by instructor
-                            </caption>
-                            <thead>
-                                <tr>
-                                    <th scope="col">Instructor</th>
-                                    <th
-                                        scope="col"
-                                        class="col-numeric"
-                                    >
-                                        Average
-                                    </th>
-                                </tr>
-                            </thead>
-                            <tbody>
-                                <tr
-                                    v-for="instructor in dept.instructors"
-                                    :key="instructor.mothraId"
+    <EffortReportPage
+        title="Evaluation Report - Summary"
+        subtitle="Evaluation - Summary"
+        :term-code="termCode"
+        :loading="loading"
+        :has-report="report !== null"
+        :is-empty="report !== null && report.departments.length === 0"
+        :initial-filters="initialFilters"
+        :visible-fields="['department', 'faculty', 'role']"
+        :on-pdf-export="handlePrint"
+        :on-excel-export="handleExcelDownload"
+        @generate="generateReport"
+    >
+        <template v-if="report">
+            <ReportDeptTabs :departments="report.departments">
+                <template #default="{ dept }">
+                    <table class="report-table">
+                        <caption class="sr-only">
+                            Evaluation summary by instructor
+                        </caption>
+                        <thead>
+                            <tr>
+                                <th scope="col">Instructor</th>
+                                <th
+                                    scope="col"
+                                    class="col-numeric"
                                 >
-                                    <td>{{ instructor.instructor }}</td>
-                                    <td class="col-numeric">{{ formatDecimal(instructor.weightedAverage) }}</td>
-                                </tr>
-
-                                <!-- Department average row -->
-                                <tr class="dept-totals-row bg-grey-4">
-                                    <th
-                                        scope="row"
-                                        class="subt"
-                                    >
-                                        Department Average
-                                    </th>
-                                    <td class="col-numeric total">{{ formatDecimal(dept.departmentAverage) }}</td>
-                                </tr>
-                            </tbody>
-                        </table>
-                    </template>
-                </ReportDeptTabs>
-            </template>
-        </ReportLayout>
+                                    Average
+                                </th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr
+                                v-for="instructor in dept.instructors"
+                                :key="instructor.mothraId"
+                            >
+                                <td>{{ instructor.instructor }}</td>
+                                <td class="col-numeric">{{ formatDecimal(instructor.weightedAverage) }}</td>
+                            </tr>
 
-        <!-- No report generated yet -->
-        <div
-            v-else-if="!loading"
-            class="text-grey-7 text-center q-pa-lg"
-        >
-            Select filters and click "Generate Report" to view data.
-        </div>
-    </div>
+                            <!-- Department average row -->
+                            <tr class="dept-totals-row bg-grey-4">
+                                <th
+                                    scope="row"
+                                    class="subt"
+                                >
+                                    Department Average
+                                </th>
+                                <td class="col-numeric total">{{ formatDecimal(dept.departmentAverage) }}</td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </template>
+            </ReportDeptTabs>
+        </template>
+    </EffortReportPage>
 </template>
 
 <script setup lang="ts">
 import { reportService } from "../services/report-service"
 import { useReportPage } from "../composables/use-report-page"
-import ExportToolbar from "@/components/ExportToolbar.vue"
-import ReportFilterForm from "../components/ReportFilterForm.vue"
-import ReportLayout from "../components/ReportLayout.vue"
+import EffortReportPage from "../components/EffortReportPage.vue"
 import ReportDeptTabs from "../components/ReportDeptTabs.vue"
 import type { EvalSummaryReport } from "../types"
 import "../report-tables.css"
diff --git a/VueApp/src/Effort/pages/InstructorDetail.vue b/VueApp/src/Effort/pages/InstructorDetail.vue
index 4a6c1e3da..9374de07c 100644
--- a/VueApp/src/Effort/pages/InstructorDetail.vue
+++ b/VueApp/src/Effort/pages/InstructorDetail.vue
@@ -1,43 +1,15 @@
 <template>
-    <div class="q-pa-md">
-        <!-- Breadcrumb -->
-        <q-breadcrumbs class="q-mb-md">
-            <q-breadcrumbs-el
-                label="Instructors"
-                :to="{ name: 'InstructorList', params: { termCode } }"
-            />
+    <InstructorPageShell
+        :term-code="termCodeNum"
+        :is-loading="isLoading"
+        :load-error="loadError ?? undefined"
+    >
+        <template #breadcrumbs>
             <q-breadcrumbs-el :label="instructor?.fullName ?? 'Instructor'" />
-        </q-breadcrumbs>
-
-        <!-- Loading state -->
-        <div
-            v-if="isLoading"
-            class="text-center q-my-lg"
-        >
-            <q-spinner-dots
-                size="3rem"
-                color="primary"
-            />
-            <div class="q-mt-md text-body1">Loading instructor...</div>
-        </div>
-
-        <!-- Error state -->
-        <StatusBanner
-            v-else-if="loadError"
-            type="error"
-        >
-            {{ loadError }}
-            <template #action>
-                <q-btn
-                    flat
-                    label="Go Back"
-                    :to="{ name: 'InstructorList', params: { termCode } }"
-                />
-            </template>
-        </StatusBanner>
+        </template>
 
         <!-- Instructor content -->
-        <template v-else-if="instructor">
+        <template v-if="instructor">
             <!-- Instructor Header -->
             <div class="q-mb-md">
                 <h1 class="q-my-none q-mb-sm">
@@ -95,35 +67,35 @@
                 :show-parent-course="true"
             />
         </template>
-
-        <!-- Add Effort Dialog -->
-        <EffortRecordAddDialog
-            v-model="showAddDialog"
-            :person-id="personId"
-            :term-code="termCodeNum"
-            :is-verified="instructor?.isVerified"
-            :pre-selected-course-id="preSelectedCourseId"
-            :existing-records="effortRecords"
-            @created="onRecordCreated"
-        />
-
-        <!-- Edit Effort Dialog -->
-        <EffortRecordEditDialog
-            v-model="showEditDialog"
-            :record="selectedRecord"
-            :term-code="termCodeNum"
-            :is-verified="instructor?.isVerified"
-            @updated="onRecordUpdated"
-        />
-
-        <!-- Course Import Dialog -->
-        <CourseImportDialog
-            v-model="showImportDialog"
-            :term-code="termCodeNum"
-            :term-name="currentTermName"
-            @imported="onCourseImportedWithNotify"
-        />
-    </div>
+    </InstructorPageShell>
+
+    <!-- Add Effort Dialog -->
+    <EffortRecordAddDialog
+        v-model="showAddDialog"
+        :person-id="personId"
+        :term-code="termCodeNum"
+        :is-verified="instructor?.isVerified"
+        :pre-selected-course-id="preSelectedCourseId"
+        :existing-records="effortRecords"
+        @created="onRecordCreated"
+    />
+
+    <!-- Edit Effort Dialog -->
+    <EffortRecordEditDialog
+        v-model="showEditDialog"
+        :record="selectedRecord"
+        :term-code="termCodeNum"
+        :is-verified="instructor?.isVerified"
+        @updated="onRecordUpdated"
+    />
+
+    <!-- Course Import Dialog -->
+    <CourseImportDialog
+        v-model="showImportDialog"
+        :term-code="termCodeNum"
+        :term-name="currentTermName"
+        @imported="onCourseImportedWithNotify"
+    />
 </template>
 
 <script setup lang="ts">
@@ -136,7 +108,7 @@ import { termService } from "../services/term-service"
 import { useEffortPermissions } from "../composables/use-effort-permissions"
 import { useEffortRecordManagement, formatEffortDate } from "../composables/use-effort-record-management"
 import type { PersonDto, TermDto, InstructorEffortRecordDto } from "../types"
-import StatusBanner from "@/components/StatusBanner.vue"
+import InstructorPageShell from "../components/InstructorPageShell.vue"
 import EffortRecordAddDialog from "../components/EffortRecordAddDialog.vue"
 import EffortRecordEditDialog from "../components/EffortRecordEditDialog.vue"
 import CourseImportDialog from "../components/CourseImportDialog.vue"
diff --git a/VueApp/src/Effort/pages/InstructorEdit.vue b/VueApp/src/Effort/pages/InstructorEdit.vue
index ada8834ba..90c40371d 100644
--- a/VueApp/src/Effort/pages/InstructorEdit.vue
+++ b/VueApp/src/Effort/pages/InstructorEdit.vue
@@ -1,47 +1,19 @@
 <template>
-    <div class="q-pa-md">
-        <!-- Breadcrumb -->
-        <q-breadcrumbs class="q-mb-md">
-            <q-breadcrumbs-el
-                label="Instructors"
-                :to="{ name: 'InstructorList', params: { termCode } }"
-            />
+    <InstructorPageShell
+        :term-code="termCodeNum"
+        :is-loading="isLoading"
+        :load-error="loadError ?? undefined"
+    >
+        <template #breadcrumbs>
             <q-breadcrumbs-el
                 :label="instructor?.fullName ?? 'Instructor'"
                 :to="{ name: 'InstructorDetail', params: { termCode, personId } }"
             />
             <q-breadcrumbs-el label="Edit" />
-        </q-breadcrumbs>
-
-        <!-- Loading state -->
-        <div
-            v-if="isLoading"
-            class="text-center q-my-lg"
-        >
-            <q-spinner-dots
-                size="3rem"
-                color="primary"
-            />
-            <div class="q-mt-md text-body1">Loading instructor...</div>
-        </div>
-
-        <!-- Error state -->
-        <StatusBanner
-            v-else-if="loadError"
-            type="error"
-        >
-            {{ loadError }}
-            <template #action>
-                <q-btn
-                    flat
-                    label="Go Back"
-                    :to="{ name: 'InstructorList', params: { termCode } }"
-                />
-            </template>
-        </StatusBanner>
+        </template>
 
         <!-- Instructor content -->
-        <template v-else-if="instructor">
+        <template v-if="instructor">
             <!-- Instructor Header -->
             <q-card
                 flat
@@ -236,56 +208,56 @@
                 />
             </div>
         </template>
-
-        <!-- Add Percent Dialog -->
-        <PercentAssignmentAddDialog
-            v-model="showAddPercentDialog"
-            :person-id="instructor?.personId ?? 0"
-            :percent-assign-types="percentAssignTypes"
-            :units="units"
-            @created="onPercentCreated"
-        />
-
-        <!-- Edit Percent Dialog -->
-        <PercentAssignmentEditDialog
-            v-model="showEditPercentDialog"
-            :percentage="selectedPercentage"
-            :percent-assign-types="percentAssignTypes"
-            :units="units"
-            @saved="onPercentUpdated"
-        />
-
-        <!-- Delete Percent Confirmation Dialog -->
-        <q-dialog
-            v-model="showDeletePercentConfirm"
-            aria-label="Delete percentage assignment confirmation"
-        >
-            <q-card>
-                <q-card-section class="row items-center">
-                    <q-icon
-                        name="warning"
-                        color="warning"
-                        size="md"
-                        class="q-mr-md"
-                    />
-                    <span>Are you sure you want to delete this percentage assignment?</span>
-                </q-card-section>
-                <q-card-actions align="right">
-                    <q-btn
-                        v-close-popup
-                        flat
-                        label="Cancel"
-                    />
-                    <q-btn
-                        flat
-                        label="Delete"
-                        color="negative"
-                        @click="deletePercent"
-                    />
-                </q-card-actions>
-            </q-card>
-        </q-dialog>
-    </div>
+    </InstructorPageShell>
+
+    <!-- Add Percent Dialog -->
+    <PercentAssignmentAddDialog
+        v-model="showAddPercentDialog"
+        :person-id="instructor?.personId ?? 0"
+        :percent-assign-types="percentAssignTypes"
+        :units="units"
+        @created="onPercentCreated"
+    />
+
+    <!-- Edit Percent Dialog -->
+    <PercentAssignmentEditDialog
+        v-model="showEditPercentDialog"
+        :percentage="selectedPercentage"
+        :percent-assign-types="percentAssignTypes"
+        :units="units"
+        @saved="onPercentUpdated"
+    />
+
+    <!-- Delete Percent Confirmation Dialog -->
+    <q-dialog
+        v-model="showDeletePercentConfirm"
+        aria-label="Delete percentage assignment confirmation"
+    >
+        <q-card>
+            <q-card-section class="row items-center">
+                <q-icon
+                    name="warning"
+                    color="warning"
+                    size="md"
+                    class="q-mr-md"
+                />
+                <span>Are you sure you want to delete this percentage assignment?</span>
+            </q-card-section>
+            <q-card-actions align="right">
+                <q-btn
+                    v-close-popup
+                    flat
+                    label="Cancel"
+                />
+                <q-btn
+                    flat
+                    label="Delete"
+                    color="negative"
+                    @click="deletePercent"
+                />
+            </q-card-actions>
+        </q-card>
+    </q-dialog>
 </template>
 
 <script setup lang="ts">
@@ -313,6 +285,7 @@ import type {
     UnitDto,
 } from "../types"
 import StatusBanner from "@/components/StatusBanner.vue"
+import InstructorPageShell from "../components/InstructorPageShell.vue"
 import PercentAssignmentTable from "../components/PercentAssignmentTable.vue"
 import PercentAssignmentAddDialog from "../components/PercentAssignmentAddDialog.vue"
 import PercentAssignmentEditDialog from "../components/PercentAssignmentEditDialog.vue"
diff --git a/VueApp/src/Effort/pages/MeritAverage.vue b/VueApp/src/Effort/pages/MeritAverage.vue
index 0ad2d4b00..df93266eb 100644
--- a/VueApp/src/Effort/pages/MeritAverage.vue
+++ b/VueApp/src/Effort/pages/MeritAverage.vue
@@ -1,170 +1,87 @@
 <template>
-    <div class="q-pa-md">
-        <h1>Merit &amp; Promotion Report - Average</h1>
+    <EffortReportPage
+        title="Merit &amp; Promotion Report - Average"
+        subtitle="Merit &amp; Promotion - Average"
+        :term-code="termCode"
+        :loading="loading"
+        :has-report="report !== null"
+        :is-empty="report !== null && report.jobGroups.length === 0"
+        :initial-filters="initialFilters"
+        :visible-fields="['department', 'faculty']"
+        :merit-only="true"
+        :on-pdf-export="handlePrint"
+        :on-excel-export="handleExcelDownload"
+        @generate="generateReport"
+    >
+        <template v-if="report">
+            <div
+                v-for="jobGroup in report.jobGroups"
+                :key="jobGroup.jobGroupDescription"
+                class="job-group-section"
+            >
+                <h2 class="job-group-header">{{ jobGroup.jobGroupDescription }}</h2>
 
-        <ReportFilterForm
-            :term-code="termCode"
-            :loading="loading"
-            :initial-filters="initialFilters"
-            :visible-fields="['department', 'faculty']"
-            :merit-only="true"
-            @generate="generateReport"
-        />
-
-        <!-- Loading state -->
-        <div
-            v-if="loading"
-            role="status"
-            class="text-center q-my-lg"
-        >
-            <q-spinner-dots
-                size="3rem"
-                color="primary"
-            />
-            <div class="q-mt-md text-body1">Loading report...</div>
-        </div>
-
-        <!-- Report content -->
-        <ReportLayout v-else-if="report">
-            <template #header>
-                <div class="col text-h6">Merit &amp; Promotion - Average</div>
-                <div class="col-auto no-print">
-                    <ExportToolbar
-                        :pdf-export="handlePrint"
-                        :excel-export="handleExcelDownload"
-                    />
-                </div>
-            </template>
-
-            <template v-if="report.jobGroups.length === 0">
-                <div
-                    role="status"
-                    class="text-grey-7 text-center q-pa-lg"
-                >
-                    No data found for the selected filters.
-                </div>
-            </template>
-
-            <template v-else>
-                <div
-                    v-for="jobGroup in report.jobGroups"
-                    :key="jobGroup.jobGroupDescription"
-                    class="job-group-section"
-                >
-                    <h2 class="job-group-header">{{ jobGroup.jobGroupDescription }}</h2>
-
-                    <ReportDeptTabs :departments="jobGroup.departments">
-                        <template #default="{ dept }">
-                            <table class="report-table">
-                                <caption class="sr-only">
-                                    Merit average of effort by instructor
-                                </caption>
-                                <thead>
-                                    <tr>
-                                        <th
-                                            scope="col"
-                                            class="col-instructor"
-                                            colspan="2"
-                                        >
-                                            Instructor
-                                        </th>
-                                        <th
-                                            v-for="type in orderedEffortTypes"
-                                            :key="type"
-                                            scope="col"
-                                            class="col-effort"
-                                            :class="{ 'col-spacer': isSpacerColumn(type) }"
-                                        >
-                                            <abbr :title="getEffortTypeLabel(type)">{{ type }}</abbr>
-                                        </th>
-                                    </tr>
-                                </thead>
-                                <tbody>
-                                    <template
-                                        v-for="instructor in dept.instructors"
-                                        :key="instructor.mothraId"
+                <ReportDeptTabs :departments="jobGroup.departments">
+                    <template #default="{ dept }">
+                        <table class="report-table">
+                            <caption class="sr-only">
+                                Merit average of effort by instructor
+                            </caption>
+                            <thead>
+                                <tr>
+                                    <th
+                                        scope="col"
+                                        class="col-instructor"
+                                        colspan="2"
+                                    >
+                                        Instructor
+                                    </th>
+                                    <th
+                                        v-for="type in orderedEffortTypes"
+                                        :key="type"
+                                        scope="col"
+                                        class="col-effort"
+                                        :class="{ 'col-spacer': isSpacerColumn(type) }"
+                                    >
+                                        <abbr :title="getEffortTypeLabel(type)">{{ type }}</abbr>
+                                    </th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                <template
+                                    v-for="instructor in dept.instructors"
+                                    :key="instructor.mothraId"
+                                >
+                                    <!-- Per-term rows with instructor name rowspanned -->
+                                    <tr
+                                        v-for="(term, termIdx) in instructor.terms"
+                                        :key="`${instructor.mothraId}_${term.termCode}`"
                                     >
-                                        <!-- Per-term rows with instructor name rowspanned -->
-                                        <tr
-                                            v-for="(term, termIdx) in instructor.terms"
-                                            :key="`${instructor.mothraId}_${term.termCode}`"
+                                        <td
+                                            v-if="termIdx === 0"
+                                            :rowspan="instructor.terms.length"
+                                            class="instructor-cell"
                                         >
-                                            <td
-                                                v-if="termIdx === 0"
-                                                :rowspan="instructor.terms.length"
-                                                class="instructor-cell"
-                                            >
-                                                {{ instructor.instructor }}
-                                            </td>
-                                            <td class="term-cell">{{ term.termName }}</td>
-                                            <td
-                                                v-for="type in orderedEffortTypes"
-                                                :key="type"
-                                                :class="{ 'col-spacer': isSpacerColumn(type) }"
-                                            >
-                                                {{ getTotalValue(term.effortByType ?? {}, type) }}
-                                            </td>
-                                        </tr>
-
-                                        <!-- Instructor totals row -->
-                                        <tr class="totals-row bg-grey-1">
-                                            <th
-                                                scope="row"
-                                                colspan="2"
-                                                class="subt"
-                                            >
-                                                INSTRUCTOR TOTALS:
-                                            </th>
-                                            <td
-                                                v-for="type in orderedEffortTypes"
-                                                :key="type"
-                                                class="total"
-                                                :class="{ 'col-spacer': isSpacerColumn(type) }"
-                                            >
-                                                {{ getTotalValue(instructor.effortByType ?? {}, type) }}
-                                            </td>
-                                        </tr>
-                                    </template>
-
-                                    <!-- Faculty Count Total row -->
-                                    <tr class="counts-row">
-                                        <td colspan="100%">Faculty Count Total: {{ dept.facultyCount }}</td>
-                                    </tr>
-
-                                    <!-- Faculty with assigned CLI row -->
-                                    <tr class="counts-row">
-                                        <td colspan="100%">
-                                            Faculty with assigned CLI: {{ dept.facultyWithCliCount }}
+                                            {{ instructor.instructor }}
                                         </td>
-                                    </tr>
-
-                                    <!-- Group totals row -->
-                                    <tr class="dept-totals-row bg-grey-4">
-                                        <th
-                                            scope="row"
-                                            colspan="2"
-                                            class="subt"
-                                        >
-                                            Totals:
-                                        </th>
+                                        <td class="term-cell">{{ term.termName }}</td>
                                         <td
                                             v-for="type in orderedEffortTypes"
                                             :key="type"
-                                            class="total"
                                             :class="{ 'col-spacer': isSpacerColumn(type) }"
                                         >
-                                            {{ getTotalValue(dept.groupTotals, type) }}
+                                            {{ getTotalValue(term.effortByType ?? {}, type) }}
                                         </td>
                                     </tr>
 
-                                    <!-- Group averages row -->
-                                    <tr class="dept-averages-row bg-grey-3">
+                                    <!-- Instructor totals row -->
+                                    <tr class="totals-row bg-grey-1">
                                         <th
                                             scope="row"
                                             colspan="2"
                                             class="subt"
                                         >
-                                            Averages:
+                                            INSTRUCTOR TOTALS:
                                         </th>
                                         <td
                                             v-for="type in orderedEffortTypes"
@@ -172,33 +89,71 @@
                                             class="total"
                                             :class="{ 'col-spacer': isSpacerColumn(type) }"
                                         >
-                                            {{ getAverageValue(dept.groupAverages, type) }}
+                                            {{ getTotalValue(instructor.effortByType ?? {}, type) }}
                                         </td>
                                     </tr>
-                                </tbody>
-                            </table>
-                        </template>
-                    </ReportDeptTabs>
-                </div>
-            </template>
-        </ReportLayout>
+                                </template>
+
+                                <!-- Faculty Count Total row -->
+                                <tr class="counts-row">
+                                    <td colspan="100%">Faculty Count Total: {{ dept.facultyCount }}</td>
+                                </tr>
 
-        <!-- No report generated yet -->
-        <div
-            v-else-if="!loading"
-            class="text-grey-7 text-center q-pa-lg"
-        >
-            Select filters and click "Generate Report" to view data.
-        </div>
-    </div>
+                                <!-- Faculty with assigned CLI row -->
+                                <tr class="counts-row">
+                                    <td colspan="100%">Faculty with assigned CLI: {{ dept.facultyWithCliCount }}</td>
+                                </tr>
+
+                                <!-- Group totals row -->
+                                <tr class="dept-totals-row bg-grey-4">
+                                    <th
+                                        scope="row"
+                                        colspan="2"
+                                        class="subt"
+                                    >
+                                        Totals:
+                                    </th>
+                                    <td
+                                        v-for="type in orderedEffortTypes"
+                                        :key="type"
+                                        class="total"
+                                        :class="{ 'col-spacer': isSpacerColumn(type) }"
+                                    >
+                                        {{ getTotalValue(dept.groupTotals, type) }}
+                                    </td>
+                                </tr>
+
+                                <!-- Group averages row -->
+                                <tr class="dept-averages-row bg-grey-3">
+                                    <th
+                                        scope="row"
+                                        colspan="2"
+                                        class="subt"
+                                    >
+                                        Averages:
+                                    </th>
+                                    <td
+                                        v-for="type in orderedEffortTypes"
+                                        :key="type"
+                                        class="total"
+                                        :class="{ 'col-spacer': isSpacerColumn(type) }"
+                                    >
+                                        {{ getAverageValue(dept.groupAverages, type) }}
+                                    </td>
+                                </tr>
+                            </tbody>
+                        </table>
+                    </template>
+                </ReportDeptTabs>
+            </div>
+        </template>
+    </EffortReportPage>
 </template>
 
 <script setup lang="ts">
 import { reportService } from "../services/report-service"
 import { useReportPage } from "../composables/use-report-page"
-import ExportToolbar from "@/components/ExportToolbar.vue"
-import ReportFilterForm from "../components/ReportFilterForm.vue"
-import ReportLayout from "../components/ReportLayout.vue"
+import EffortReportPage from "../components/EffortReportPage.vue"
 import ReportDeptTabs from "../components/ReportDeptTabs.vue"
 import type { MeritAverageReport } from "../types"
 import "../report-tables.css"
diff --git a/VueApp/src/Effort/pages/MeritDetail.vue b/VueApp/src/Effort/pages/MeritDetail.vue
index 8392ba3b3..2b7e2b020 100644
--- a/VueApp/src/Effort/pages/MeritDetail.vue
+++ b/VueApp/src/Effort/pages/MeritDetail.vue
@@ -1,165 +1,99 @@
 <template>
-    <div class="q-pa-md">
-        <h1>Merit &amp; Promotion Report - Detail</h1>
-
-        <ReportFilterForm
-            :term-code="termCode"
-            :loading="loading"
-            :initial-filters="initialFilters"
-            :visible-fields="['department', 'faculty', 'role']"
-            :merit-only="true"
-            @generate="generateReport"
-        />
-
-        <!-- Loading state -->
-        <div
-            v-if="loading"
-            role="status"
-            class="text-center q-my-lg"
-        >
-            <q-spinner-dots
-                size="3rem"
-                color="primary"
-            />
-            <div class="q-mt-md text-body1">Loading report...</div>
-        </div>
-
-        <!-- Report content -->
-        <ReportLayout v-else-if="report">
-            <template #header>
-                <div class="col text-h6">Merit &amp; Promotion - Detail</div>
-                <div class="col-auto no-print">
-                    <ExportToolbar
-                        :pdf-export="handlePrint"
-                        :excel-export="handleExcelDownload"
-                    />
-                </div>
-            </template>
-
-            <template v-if="report.departments.length === 0">
-                <div
-                    role="status"
-                    class="text-grey-7 text-center q-pa-lg"
-                >
-                    No data found for the selected filters.
-                </div>
-            </template>
-
-            <template v-else>
-                <ReportDeptTabs :departments="report.departments">
-                    <template #default="{ dept }">
-                        <table class="report-table">
-                            <caption class="sr-only">
-                                Merit detail of effort by instructor
-                            </caption>
-                            <thead>
-                                <tr>
-                                    <th
-                                        scope="col"
-                                        class="col-qtr"
-                                    >
-                                        Qtr
-                                    </th>
-                                    <th
-                                        scope="col"
-                                        class="col-role"
-                                    >
-                                        Role
-                                    </th>
-                                    <th
-                                        scope="col"
-                                        class="col-instructor"
-                                    >
-                                        Instructor
-                                    </th>
-                                    <th
-                                        scope="col"
-                                        class="col-course"
-                                    >
-                                        Course
-                                    </th>
-                                    <th
-                                        v-for="type in orderedEffortTypes"
-                                        :key="type"
-                                        scope="col"
-                                        class="col-effort"
-                                        :class="{ 'col-spacer': isSpacerColumn(type) }"
-                                    >
-                                        <abbr :title="getEffortTypeLabel(type)">{{ type }}</abbr>
-                                    </th>
-                                </tr>
-                            </thead>
-                            <tbody>
-                                <template
-                                    v-for="instructor in dept.instructors"
-                                    :key="instructor.mothraId"
+    <EffortReportPage
+        title="Merit &amp; Promotion Report - Detail"
+        subtitle="Merit &amp; Promotion - Detail"
+        :term-code="termCode"
+        :loading="loading"
+        :has-report="report !== null"
+        :is-empty="report !== null && report.departments.length === 0"
+        :initial-filters="initialFilters"
+        :visible-fields="['department', 'faculty', 'role']"
+        :merit-only="true"
+        :on-pdf-export="handlePrint"
+        :on-excel-export="handleExcelDownload"
+        @generate="generateReport"
+    >
+        <template v-if="report">
+            <ReportDeptTabs :departments="report.departments">
+                <template #default="{ dept }">
+                    <table class="report-table">
+                        <caption class="sr-only">
+                            Merit detail of effort by instructor
+                        </caption>
+                        <thead>
+                            <tr>
+                                <th
+                                    scope="col"
+                                    class="col-qtr"
+                                >
+                                    Qtr
+                                </th>
+                                <th
+                                    scope="col"
+                                    class="col-role"
+                                >
+                                    Role
+                                </th>
+                                <th
+                                    scope="col"
+                                    class="col-instructor"
+                                >
+                                    Instructor
+                                </th>
+                                <th
+                                    scope="col"
+                                    class="col-course"
                                 >
-                                    <!-- Course rows with instructor rowspan on first row -->
-                                    <tr
-                                        v-for="(course, courseIdx) in instructor.courses"
-                                        :key="`${course.termCode}_${course.courseId}_${course.roleId}`"
+                                    Course
+                                </th>
+                                <th
+                                    v-for="type in orderedEffortTypes"
+                                    :key="type"
+                                    scope="col"
+                                    class="col-effort"
+                                    :class="{ 'col-spacer': isSpacerColumn(type) }"
+                                >
+                                    <abbr :title="getEffortTypeLabel(type)">{{ type }}</abbr>
+                                </th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <template
+                                v-for="instructor in dept.instructors"
+                                :key="instructor.mothraId"
+                            >
+                                <!-- Course rows with instructor rowspan on first row -->
+                                <tr
+                                    v-for="(course, courseIdx) in instructor.courses"
+                                    :key="`${course.termCode}_${course.courseId}_${course.roleId}`"
+                                >
+                                    <td>{{ course.termCode }}</td>
+                                    <td>{{ course.roleId }}</td>
+                                    <td
+                                        v-if="courseIdx === 0"
+                                        :rowspan="instructor.courses.length"
+                                        class="instructor-cell"
                                     >
-                                        <td>{{ course.termCode }}</td>
-                                        <td>{{ course.roleId }}</td>
-                                        <td
-                                            v-if="courseIdx === 0"
-                                            :rowspan="instructor.courses.length"
-                                            class="instructor-cell"
-                                        >
-                                            {{ instructor.instructor }}
-                                        </td>
-                                        <td>{{ course.course }}</td>
-                                        <td
-                                            v-for="type in orderedEffortTypes"
-                                            :key="type"
-                                            :class="{ 'col-spacer': isSpacerColumn(type) }"
-                                        >
-                                            {{ getTotalValue(course.effortByType ?? {}, type) }}
-                                        </td>
-                                    </tr>
-
-                                    <!-- Instructor totals row -->
-                                    <tr class="totals-row bg-grey-1">
-                                        <th
-                                            scope="row"
-                                            colspan="4"
-                                            class="subt"
-                                        >
-                                            Instructor Totals:
-                                        </th>
-                                        <td
-                                            v-for="type in orderedEffortTypes"
-                                            :key="type"
-                                            class="total"
-                                            :class="{ 'col-spacer': isSpacerColumn(type) }"
-                                        >
-                                            {{ getTotalValue(instructor.instructorTotals, type) }}
-                                        </td>
-                                    </tr>
-                                </template>
-
-                                <!-- Re-display effort type headers before department totals -->
-                                <tr class="header-repeat">
-                                    <th colspan="4"></th>
-                                    <th
+                                        {{ instructor.instructor }}
+                                    </td>
+                                    <td>{{ course.course }}</td>
+                                    <td
                                         v-for="type in orderedEffortTypes"
                                         :key="type"
-                                        scope="col"
-                                        class="col-effort"
                                         :class="{ 'col-spacer': isSpacerColumn(type) }"
                                     >
-                                        <abbr :title="getEffortTypeLabel(type)">{{ type }}</abbr>
-                                    </th>
+                                        {{ getTotalValue(course.effortByType ?? {}, type) }}
+                                    </td>
                                 </tr>
 
-                                <!-- Department totals row -->
-                                <tr class="dept-totals-row bg-grey-4">
+                                <!-- Instructor totals row -->
+                                <tr class="totals-row bg-grey-1">
                                     <th
                                         scope="row"
                                         colspan="4"
                                         class="subt"
                                     >
-                                        Department Totals:
+                                        Instructor Totals:
                                     </th>
                                     <td
                                         v-for="type in orderedEffortTypes"
@@ -167,32 +101,55 @@
                                         class="total"
                                         :class="{ 'col-spacer': isSpacerColumn(type) }"
                                     >
-                                        {{ getTotalValue(dept.departmentTotals, type) }}
+                                        {{ getTotalValue(instructor.instructorTotals, type) }}
                                     </td>
                                 </tr>
-                            </tbody>
-                        </table>
-                    </template>
-                </ReportDeptTabs>
-            </template>
-        </ReportLayout>
+                            </template>
 
-        <!-- No report generated yet -->
-        <div
-            v-else-if="!loading"
-            class="text-grey-7 text-center q-pa-lg"
-        >
-            Select filters and click "Generate Report" to view data.
-        </div>
-    </div>
+                            <!-- Re-display effort type headers before department totals -->
+                            <tr class="header-repeat">
+                                <th colspan="4"></th>
+                                <th
+                                    v-for="type in orderedEffortTypes"
+                                    :key="type"
+                                    scope="col"
+                                    class="col-effort"
+                                    :class="{ 'col-spacer': isSpacerColumn(type) }"
+                                >
+                                    <abbr :title="getEffortTypeLabel(type)">{{ type }}</abbr>
+                                </th>
+                            </tr>
+
+                            <!-- Department totals row -->
+                            <tr class="dept-totals-row bg-grey-4">
+                                <th
+                                    scope="row"
+                                    colspan="4"
+                                    class="subt"
+                                >
+                                    Department Totals:
+                                </th>
+                                <td
+                                    v-for="type in orderedEffortTypes"
+                                    :key="type"
+                                    class="total"
+                                    :class="{ 'col-spacer': isSpacerColumn(type) }"
+                                >
+                                    {{ getTotalValue(dept.departmentTotals, type) }}
+                                </td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </template>
+            </ReportDeptTabs>
+        </template>
+    </EffortReportPage>
 </template>
 
 <script setup lang="ts">
 import { reportService } from "../services/report-service"
 import { useReportPage } from "../composables/use-report-page"
-import ExportToolbar from "@/components/ExportToolbar.vue"
-import ReportFilterForm from "../components/ReportFilterForm.vue"
-import ReportLayout from "../components/ReportLayout.vue"
+import EffortReportPage from "../components/EffortReportPage.vue"
 import ReportDeptTabs from "../components/ReportDeptTabs.vue"
 import type { MeritDetailReport } from "../types"
 import "../report-tables.css"
@@ -218,5 +175,3 @@ const {
     hasData: (r) => r.departments.length > 0,
 })
 </script>
-
-<style scoped></style>
diff --git a/VueApp/src/Effort/pages/MeritSummary.vue b/VueApp/src/Effort/pages/MeritSummary.vue
index 439bb875d..08a79a1c7 100644
--- a/VueApp/src/Effort/pages/MeritSummary.vue
+++ b/VueApp/src/Effort/pages/MeritSummary.vue
@@ -1,148 +1,105 @@
 <template>
-    <div class="q-pa-md">
-        <h1>Merit &amp; Promotion Report - Summary</h1>
+    <EffortReportPage
+        title="Merit &amp; Promotion Report - Summary"
+        subtitle="Merit &amp; Promotion - Summary"
+        :term-code="termCode"
+        :loading="loading"
+        :has-report="report !== null"
+        :is-empty="report !== null && report.jobGroups.length === 0"
+        :initial-filters="initialFilters"
+        :visible-fields="['department']"
+        :merit-only="true"
+        :on-pdf-export="handlePrint"
+        :on-excel-export="handleExcelDownload"
+        @generate="generateReport"
+    >
+        <template v-if="report">
+            <div
+                v-for="jobGroup in report.jobGroups"
+                :key="jobGroup.jobGroupDescription"
+                class="job-group-section"
+            >
+                <h2 class="job-group-header">{{ jobGroup.jobGroupDescription }}</h2>
 
-        <ReportFilterForm
-            :term-code="termCode"
-            :loading="loading"
-            :initial-filters="initialFilters"
-            :visible-fields="['department']"
-            :merit-only="true"
-            @generate="generateReport"
-        />
+                <ReportDeptTabs :departments="jobGroup.departments">
+                    <template #default="{ dept }">
+                        <table class="report-table">
+                            <caption class="sr-only">
+                                Merit summary of effort
+                            </caption>
+                            <thead>
+                                <tr>
+                                    <th
+                                        scope="col"
+                                        class="col-label"
+                                    ></th>
+                                    <th
+                                        v-for="type in orderedEffortTypes"
+                                        :key="type"
+                                        scope="col"
+                                        class="col-effort"
+                                        :class="{ 'col-spacer': isSpacerColumn(type) }"
+                                    >
+                                        <abbr :title="getEffortTypeLabel(type)">{{ type }}</abbr>
+                                    </th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                <!-- Department totals row -->
+                                <tr class="totals-row bg-grey-1">
+                                    <th
+                                        scope="row"
+                                        class="subt"
+                                    >
+                                        Totals:
+                                    </th>
+                                    <td
+                                        v-for="type in orderedEffortTypes"
+                                        :key="type"
+                                        class="total"
+                                        :class="{ 'col-spacer': isSpacerColumn(type) }"
+                                    >
+                                        {{ getTotalValue(dept.departmentTotals, type) }}
+                                    </td>
+                                </tr>
 
-        <!-- Loading state -->
-        <div
-            v-if="loading"
-            role="status"
-            class="text-center q-my-lg"
-        >
-            <q-spinner-dots
-                size="3rem"
-                color="primary"
-            />
-            <div class="q-mt-md text-body1">Loading report...</div>
-        </div>
+                                <!-- Number Faculty row -->
+                                <tr class="faculty-row">
+                                    <td>
+                                        <span class="faculty-label">Number Faculty:</span>
+                                        <span class="faculty-count">{{ dept.facultyCount }}</span>
+                                    </td>
+                                </tr>
 
-        <!-- Report content -->
-        <ReportLayout v-else-if="report">
-            <template #header>
-                <div class="col text-h6">Merit &amp; Promotion - Summary</div>
-                <div class="col-auto no-print">
-                    <ExportToolbar
-                        :pdf-export="handlePrint"
-                        :excel-export="handleExcelDownload"
-                    />
-                </div>
-            </template>
-
-            <template v-if="report.jobGroups.length === 0">
-                <div
-                    role="status"
-                    class="text-grey-7 text-center q-pa-lg"
-                >
-                    No data found for the selected filters.
-                </div>
-            </template>
-
-            <template v-else>
-                <div
-                    v-for="jobGroup in report.jobGroups"
-                    :key="jobGroup.jobGroupDescription"
-                    class="job-group-section"
-                >
-                    <h2 class="job-group-header">{{ jobGroup.jobGroupDescription }}</h2>
-
-                    <ReportDeptTabs :departments="jobGroup.departments">
-                        <template #default="{ dept }">
-                            <table class="report-table">
-                                <caption class="sr-only">
-                                    Merit summary of effort
-                                </caption>
-                                <thead>
-                                    <tr>
-                                        <th
-                                            scope="col"
-                                            class="col-label"
-                                        ></th>
-                                        <th
-                                            v-for="type in orderedEffortTypes"
-                                            :key="type"
-                                            scope="col"
-                                            class="col-effort"
-                                            :class="{ 'col-spacer': isSpacerColumn(type) }"
-                                        >
-                                            <abbr :title="getEffortTypeLabel(type)">{{ type }}</abbr>
-                                        </th>
-                                    </tr>
-                                </thead>
-                                <tbody>
-                                    <!-- Department totals row -->
-                                    <tr class="totals-row bg-grey-1">
-                                        <th
-                                            scope="row"
-                                            class="subt"
-                                        >
-                                            Totals:
-                                        </th>
-                                        <td
-                                            v-for="type in orderedEffortTypes"
-                                            :key="type"
-                                            class="total"
-                                            :class="{ 'col-spacer': isSpacerColumn(type) }"
-                                        >
-                                            {{ getTotalValue(dept.departmentTotals, type) }}
-                                        </td>
-                                    </tr>
-
-                                    <!-- Number Faculty row -->
-                                    <tr class="faculty-row">
-                                        <td>
-                                            <span class="faculty-label">Number Faculty:</span>
-                                            <span class="faculty-count">{{ dept.facultyCount }}</span>
-                                        </td>
-                                    </tr>
-
-                                    <!-- Faculty w/ CLI assigned + averages row -->
-                                    <tr class="faculty-row bg-grey-3">
-                                        <td>
-                                            <span class="faculty-label">Faculty w/ CLI assigned:</span>
-                                            <span class="faculty-count">{{ dept.facultyWithCliCount }}</span>
-                                            <span class="avg-text">Average</span>
-                                        </td>
-                                        <td
-                                            v-for="type in orderedEffortTypes"
-                                            :key="type"
-                                            class="total"
-                                            :class="{ 'col-spacer': isSpacerColumn(type) }"
-                                        >
-                                            {{ getAverageValue(dept.departmentAverages, type) }}
-                                        </td>
-                                    </tr>
-                                </tbody>
-                            </table>
-                        </template>
-                    </ReportDeptTabs>
-                </div>
-            </template>
-        </ReportLayout>
-
-        <!-- No report generated yet -->
-        <div
-            v-else-if="!loading"
-            class="text-grey-7 text-center q-pa-lg"
-        >
-            Select filters and click "Generate Report" to view data.
-        </div>
-    </div>
+                                <!-- Faculty w/ CLI assigned + averages row -->
+                                <tr class="faculty-row bg-grey-3">
+                                    <td>
+                                        <span class="faculty-label">Faculty w/ CLI assigned:</span>
+                                        <span class="faculty-count">{{ dept.facultyWithCliCount }}</span>
+                                        <span class="avg-text">Average</span>
+                                    </td>
+                                    <td
+                                        v-for="type in orderedEffortTypes"
+                                        :key="type"
+                                        class="total"
+                                        :class="{ 'col-spacer': isSpacerColumn(type) }"
+                                    >
+                                        {{ getAverageValue(dept.departmentAverages, type) }}
+                                    </td>
+                                </tr>
+                            </tbody>
+                        </table>
+                    </template>
+                </ReportDeptTabs>
+            </div>
+        </template>
+    </EffortReportPage>
 </template>
 
 <script setup lang="ts">
 import { reportService } from "../services/report-service"
 import { useReportPage } from "../composables/use-report-page"
-import ExportToolbar from "@/components/ExportToolbar.vue"
-import ReportFilterForm from "../components/ReportFilterForm.vue"
-import ReportLayout from "../components/ReportLayout.vue"
+import EffortReportPage from "../components/EffortReportPage.vue"
 import ReportDeptTabs from "../components/ReportDeptTabs.vue"
 import type { MeritSummaryReport } from "../types"
 import "../report-tables.css"
diff --git a/VueApp/src/Effort/pages/SchoolSummary.vue b/VueApp/src/Effort/pages/SchoolSummary.vue
index 465960b65..0bffded93 100644
--- a/VueApp/src/Effort/pages/SchoolSummary.vue
+++ b/VueApp/src/Effort/pages/SchoolSummary.vue
@@ -1,195 +1,164 @@
 <template>
-    <div class="q-pa-md">
-        <h1>Teaching Activity Report - School Summary</h1>
-
-        <ReportFilterForm
-            :term-code="termCode"
-            :loading="loading"
-            :initial-filters="initialFilters"
-            @generate="generateReport"
-        />
-
-        <!-- Loading state -->
-        <div
-            v-if="loading"
-            role="status"
-            class="text-center q-my-lg"
+    <EffortReportPage
+        title="Teaching Activity Report - School Summary"
+        :term-code="termCode"
+        :loading="loading"
+        :has-report="report !== null"
+        :is-empty="report !== null && report.departments.length === 0"
+        :initial-filters="initialFilters"
+        :on-pdf-export="handlePrint"
+        :on-excel-export="handleExcelDownload"
+        @generate="generateReport"
+    >
+        <template
+            v-if="report"
+            #header
+            >{{ report.termName }} - School Summary</template
         >
-            <q-spinner-dots
-                size="3rem"
-                color="primary"
-            />
-            <div class="q-mt-md text-body1">Loading report...</div>
-        </div>
-
-        <!-- Report content -->
-        <ReportLayout v-else-if="report">
-            <template #header>
-                <div class="col text-h6">{{ report.termName }} - School Summary</div>
-                <div class="col-auto no-print">
-                    <ExportToolbar
-                        :pdf-export="handlePrint"
-                        :excel-export="handleExcelDownload"
-                    />
-                </div>
-            </template>
 
-            <template v-if="report.departments.length === 0">
-                <div
-                    role="status"
-                    class="text-grey-7 text-center q-pa-lg"
-                >
-                    No data found for the selected filters.
-                </div>
-            </template>
-
-            <template v-else>
-                <div
-                    class="dept-section"
-                    tabindex="0"
-                >
-                    <table class="report-table">
-                        <caption class="sr-only">
-                            School-wide summary of effort by department
-                        </caption>
-                        <thead>
-                            <tr>
-                                <th
-                                    scope="col"
-                                    class="col-department"
-                                >
-                                    Department
-                                </th>
-                                <th
-                                    v-for="type in orderedEffortTypes"
-                                    :key="type"
-                                    scope="col"
-                                    class="col-effort"
-                                    :class="{ 'col-spacer': isSpacerColumn(type) }"
-                                >
-                                    <abbr :title="getEffortTypeLabel(type)">{{ type }}</abbr>
-                                </th>
-                            </tr>
-                        </thead>
-                        <tbody>
-                            <template
-                                v-for="(dept, deptIdx) in report.departments"
-                                :key="dept.department"
+        <template v-if="report">
+            <div class="dept-section">
+                <table class="report-table">
+                    <caption class="sr-only">
+                        School-wide summary of effort by department
+                    </caption>
+                    <thead>
+                        <tr>
+                            <th
+                                scope="col"
+                                class="col-department"
                             >
-                                <!-- Department totals row (border-top separates from previous dept) -->
-                                <tr :class="{ 'dept-boundary': deptIdx > 0 }">
-                                    <td class="dept-name-cell">{{ dept.department }}</td>
-                                    <td
-                                        v-for="type in orderedEffortTypes"
-                                        :key="type"
-                                        :class="{ 'col-spacer': isSpacerColumn(type) }"
-                                    >
-                                        {{ getTotalValue(dept.effortTotals, type) }}
-                                    </td>
-                                </tr>
-                                <!-- # Faculty row -->
-                                <tr class="faculty-row">
-                                    <td>
-                                        <span class="faculty-label"># Faculty</span>
-                                        <span class="faculty-count">{{ dept.facultyCount }}</span>
-                                    </td>
-                                </tr>
-                                <!-- # Faculty with CLI + averages row -->
-                                <tr class="faculty-row bg-grey-3">
-                                    <td>
-                                        <span class="faculty-label"># Faculty with CLI</span>
-                                        <span class="faculty-count">{{ dept.facultyWithCliCount }}</span>
-                                        <span class="avg-text">Average</span>
-                                    </td>
-                                    <td
-                                        v-for="type in orderedEffortTypes"
-                                        :key="type"
-                                        class="avg-value"
-                                        :class="{ 'col-spacer': isSpacerColumn(type) }"
-                                    >
-                                        {{ getAverageValue(dept.averages, type) }}
-                                    </td>
-                                </tr>
-                            </template>
-
-                            <!-- Re-display effort type headers before grand totals -->
-                            <tr class="header-repeat">
-                                <th scope="col"></th>
-                                <th
-                                    v-for="type in orderedEffortTypes"
-                                    :key="type"
-                                    scope="col"
-                                    class="col-effort"
-                                    :class="{ 'col-spacer': isSpacerColumn(type) }"
-                                >
-                                    <abbr :title="getEffortTypeLabel(type)">{{ type }}</abbr>
-                                </th>
-                            </tr>
-
-                            <!-- Grand Total row -->
-                            <tr class="grand-totals-row bg-grey-4">
-                                <th
-                                    scope="row"
-                                    class="subt"
-                                >
-                                    Grand Total
-                                </th>
+                                Department
+                            </th>
+                            <th
+                                v-for="type in orderedEffortTypes"
+                                :key="type"
+                                scope="col"
+                                class="col-effort"
+                                :class="{ 'col-spacer': isSpacerColumn(type) }"
+                            >
+                                <abbr :title="getEffortTypeLabel(type)">{{ type }}</abbr>
+                            </th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <template
+                            v-for="(dept, deptIdx) in report.departments"
+                            :key="dept.department"
+                        >
+                            <!-- Department totals row -->
+                            <tr>
+                                <td class="dept-name-cell">{{ dept.department }}</td>
                                 <td
                                     v-for="type in orderedEffortTypes"
                                     :key="type"
-                                    class="total"
                                     :class="{ 'col-spacer': isSpacerColumn(type) }"
                                 >
-                                    {{ getTotalValue(report.grandTotals.effortTotals, type) }}
+                                    {{ getTotalValue(dept.effortTotals, type) }}
                                 </td>
                             </tr>
-
-                            <!-- # Faculty row (grand) -->
+                            <!-- # Faculty row -->
                             <tr class="faculty-row">
                                 <td>
                                     <span class="faculty-label"># Faculty</span>
-                                    <span class="faculty-count">{{ report.grandTotals.facultyCount }}</span>
+                                    <span class="faculty-count">{{ dept.facultyCount }}</span>
                                 </td>
                             </tr>
-
-                            <!-- # Faculty with CLI + grand averages row -->
+                            <!-- # Faculty with CLI + averages row -->
                             <tr class="faculty-row bg-grey-3">
                                 <td>
                                     <span class="faculty-label"># Faculty with CLI</span>
-                                    <span class="faculty-count">{{ report.grandTotals.facultyWithCliCount }}</span>
+                                    <span class="faculty-count">{{ dept.facultyWithCliCount }}</span>
                                     <span class="avg-text">Average</span>
                                 </td>
                                 <td
                                     v-for="type in orderedEffortTypes"
                                     :key="type"
-                                    class="total avg-value"
+                                    class="avg-value"
                                     :class="{ 'col-spacer': isSpacerColumn(type) }"
                                 >
-                                    {{ getAverageValue(report.grandTotals.averages, type) }}
+                                    {{ getAverageValue(dept.averages, type) }}
                                 </td>
                             </tr>
-                        </tbody>
-                    </table>
-                </div>
-            </template>
-        </ReportLayout>
-
-        <!-- No report generated yet -->
-        <div
-            v-else-if="!loading"
-            class="text-grey-7 text-center q-pa-lg"
-        >
-            Select filters and click "Generate Report" to view data.
-        </div>
-    </div>
+                            <!-- HR divider between departments -->
+                            <tr
+                                v-if="deptIdx < report.departments.length - 1"
+                                class="divider-row"
+                                aria-hidden="true"
+                            >
+                                <td colspan="100%">
+                                    <hr />
+                                </td>
+                            </tr>
+                        </template>
+
+                        <!-- Re-display effort type headers before grand totals -->
+                        <tr class="header-repeat">
+                            <th scope="col"></th>
+                            <th
+                                v-for="type in orderedEffortTypes"
+                                :key="type"
+                                scope="col"
+                                class="col-effort"
+                                :class="{ 'col-spacer': isSpacerColumn(type) }"
+                            >
+                                <abbr :title="getEffortTypeLabel(type)">{{ type }}</abbr>
+                            </th>
+                        </tr>
+
+                        <!-- Grand Total row -->
+                        <tr class="grand-totals-row bg-grey-4">
+                            <th
+                                scope="row"
+                                class="subt"
+                            >
+                                Grand Total
+                            </th>
+                            <td
+                                v-for="type in orderedEffortTypes"
+                                :key="type"
+                                class="total"
+                                :class="{ 'col-spacer': isSpacerColumn(type) }"
+                            >
+                                {{ getTotalValue(report.grandTotals.effortTotals, type) }}
+                            </td>
+                        </tr>
+
+                        <!-- # Faculty row (grand) -->
+                        <tr class="faculty-row">
+                            <td>
+                                <span class="faculty-label"># Faculty</span>
+                                <span class="faculty-count">{{ report.grandTotals.facultyCount }}</span>
+                            </td>
+                        </tr>
+
+                        <!-- # Faculty with CLI + grand averages row -->
+                        <tr class="faculty-row bg-grey-3">
+                            <td>
+                                <span class="faculty-label"># Faculty with CLI</span>
+                                <span class="faculty-count">{{ report.grandTotals.facultyWithCliCount }}</span>
+                                <span class="avg-text">Average</span>
+                            </td>
+                            <td
+                                v-for="type in orderedEffortTypes"
+                                :key="type"
+                                class="total avg-value"
+                                :class="{ 'col-spacer': isSpacerColumn(type) }"
+                            >
+                                {{ getAverageValue(report.grandTotals.averages, type) }}
+                            </td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </template>
+    </EffortReportPage>
 </template>
 
 <script setup lang="ts">
 import { reportService } from "../services/report-service"
 import { useReportPage } from "../composables/use-report-page"
-import ExportToolbar from "@/components/ExportToolbar.vue"
-import ReportFilterForm from "../components/ReportFilterForm.vue"
-import ReportLayout from "../components/ReportLayout.vue"
+import EffortReportPage from "../components/EffortReportPage.vue"
 import type { SchoolSummaryReport } from "../types"
 import "../report-tables.css"
 
@@ -235,9 +204,14 @@ const {
     font-style: italic;
 }
 
-.dept-boundary td {
+.divider-row td {
+    padding: 0;
+}
+
+.divider-row hr {
+    border: none;
     border-top: 1px solid var(--ucdavis-black-20);
-    padding-top: 0.75rem;
+    margin: 0.5rem 0;
 }
 
 .grand-totals-row {
diff --git a/VueApp/src/Effort/pages/TeachingActivityGrouped.vue b/VueApp/src/Effort/pages/TeachingActivityGrouped.vue
index dc5e7b380..ad90cfbdc 100644
--- a/VueApp/src/Effort/pages/TeachingActivityGrouped.vue
+++ b/VueApp/src/Effort/pages/TeachingActivityGrouped.vue
@@ -1,180 +1,111 @@
 <template>
-    <div class="q-pa-md">
-        <h1>Teaching Activity Report - Grouped by Department</h1>
-
-        <ReportFilterForm
-            :term-code="termCode"
-            :loading="loading"
-            :initial-filters="initialFilters"
-            @generate="generateReport"
-        />
-
-        <!-- Loading state -->
-        <div
-            v-if="loading"
-            role="status"
-            class="text-center q-my-lg"
-        >
-            <q-spinner-dots
-                size="3rem"
-                color="primary"
-            />
-            <div class="q-mt-md text-body1">Loading report...</div>
-        </div>
-
-        <!-- Report content -->
-        <ReportLayout v-else-if="report">
-            <template #header>
-                <div class="col text-h6">Teaching Activity - Grouped by Department</div>
-                <div class="col-auto no-print">
-                    <ExportToolbar
-                        :pdf-export="handlePrint"
-                        :excel-export="handleExcelDownload"
-                    />
-                </div>
-            </template>
-
-            <template v-if="report.departments.length === 0">
-                <div
-                    role="status"
-                    class="text-grey-7 text-center q-pa-lg"
-                >
-                    No data found for the selected filters.
-                </div>
-            </template>
-
-            <template v-else>
-                <ReportDeptTabs :departments="report.departments">
-                    <template #default="{ dept }">
-                        <table class="report-table">
-                            <caption class="sr-only">
-                                Teaching activity grouped by instructor
-                            </caption>
-                            <thead>
-                                <tr>
-                                    <th
-                                        scope="col"
-                                        class="col-qtr"
-                                    >
-                                        Qtr
-                                    </th>
-                                    <th
-                                        scope="col"
-                                        class="col-role"
-                                    >
-                                        Role
-                                    </th>
-                                    <th
-                                        scope="col"
-                                        class="col-instructor"
-                                    >
-                                        Instructor
-                                    </th>
-                                    <th
-                                        scope="col"
-                                        class="col-course"
-                                    >
-                                        Course
-                                    </th>
-                                    <th
-                                        scope="col"
-                                        class="col-units"
-                                    >
-                                        Units
-                                    </th>
-                                    <th
-                                        scope="col"
-                                        class="col-enroll"
-                                    >
-                                        Enrl
-                                    </th>
-                                    <th
-                                        v-for="type in orderedEffortTypes"
-                                        :key="type"
-                                        scope="col"
-                                        class="col-effort"
-                                        :class="{ 'col-spacer': isSpacerColumn(type) }"
-                                    >
-                                        <abbr :title="getEffortTypeLabel(type)">{{ type }}</abbr>
-                                    </th>
-                                </tr>
-                            </thead>
-                            <tbody>
-                                <template
-                                    v-for="instructor in dept.instructors"
-                                    :key="instructor.mothraId"
+    <EffortReportPage
+        title="Teaching Activity Report - Grouped by Department"
+        subtitle="Teaching Activity - Grouped by Department"
+        :term-code="termCode"
+        :loading="loading"
+        :has-report="report !== null"
+        :is-empty="report !== null && report.departments.length === 0"
+        :initial-filters="initialFilters"
+        :on-pdf-export="handlePrint"
+        :on-excel-export="handleExcelDownload"
+        @generate="generateReport"
+    >
+        <template v-if="report">
+            <ReportDeptTabs :departments="report.departments">
+                <template #default="{ dept }">
+                    <table class="report-table">
+                        <caption class="sr-only">
+                            Teaching activity grouped by instructor
+                        </caption>
+                        <thead>
+                            <tr>
+                                <th
+                                    scope="col"
+                                    class="col-qtr"
+                                >
+                                    Qtr
+                                </th>
+                                <th
+                                    scope="col"
+                                    class="col-role"
+                                >
+                                    Role
+                                </th>
+                                <th
+                                    scope="col"
+                                    class="col-instructor"
+                                >
+                                    Instructor
+                                </th>
+                                <th
+                                    scope="col"
+                                    class="col-course"
                                 >
-                                    <!-- Course rows with instructor rowspan on first row -->
-                                    <tr
-                                        v-for="(course, courseIdx) in instructor.courses"
-                                        :key="`${course.termCode}_${course.courseId}_${course.roleId}`"
+                                    Course
+                                </th>
+                                <th
+                                    scope="col"
+                                    class="col-units"
+                                >
+                                    Units
+                                </th>
+                                <th
+                                    scope="col"
+                                    class="col-enroll"
+                                >
+                                    Enrl
+                                </th>
+                                <th
+                                    v-for="type in orderedEffortTypes"
+                                    :key="type"
+                                    scope="col"
+                                    class="col-effort"
+                                    :class="{ 'col-spacer': isSpacerColumn(type) }"
+                                >
+                                    <abbr :title="getEffortTypeLabel(type)">{{ type }}</abbr>
+                                </th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <template
+                                v-for="instructor in dept.instructors"
+                                :key="instructor.mothraId"
+                            >
+                                <!-- Course rows with instructor rowspan on first row -->
+                                <tr
+                                    v-for="(course, courseIdx) in instructor.courses"
+                                    :key="`${course.termCode}_${course.courseId}_${course.roleId}`"
+                                >
+                                    <td>{{ course.termCode }}</td>
+                                    <td>{{ course.roleId }}</td>
+                                    <td
+                                        v-if="courseIdx === 0"
+                                        :rowspan="instructor.courses.length"
+                                        class="instructor-cell"
                                     >
-                                        <td>{{ course.termCode }}</td>
-                                        <td>{{ course.roleId }}</td>
-                                        <td
-                                            v-if="courseIdx === 0"
-                                            :rowspan="instructor.courses.length"
-                                            class="instructor-cell"
-                                        >
-                                            {{ instructor.instructor }}
-                                        </td>
-                                        <td>{{ course.course }}</td>
-                                        <td>{{ formatDecimal(course.units) }}</td>
-                                        <td>{{ course.enrollment }}</td>
-                                        <td
-                                            v-for="type in orderedEffortTypes"
-                                            :key="type"
-                                            :class="{ 'col-spacer': isSpacerColumn(type) }"
-                                        >
-                                            {{ getTotalValue(course.effortByType ?? {}, type) }}
-                                        </td>
-                                    </tr>
-
-                                    <!-- Instructor totals row -->
-                                    <tr class="totals-row bg-grey-1">
-                                        <th
-                                            scope="row"
-                                            colspan="6"
-                                            class="subt"
-                                        >
-                                            {{ instructor.instructor }} Totals:
-                                        </th>
-                                        <td
-                                            v-for="type in orderedEffortTypes"
-                                            :key="type"
-                                            class="total"
-                                            :class="{ 'col-spacer': isSpacerColumn(type) }"
-                                        >
-                                            {{ getTotalValue(instructor.instructorTotals, type) }}
-                                        </td>
-                                    </tr>
-                                </template>
-
-                                <!-- Re-display effort type headers before department totals -->
-                                <tr class="header-repeat">
-                                    <th
-                                        scope="col"
-                                        colspan="6"
-                                    ></th>
-                                    <th
+                                        {{ instructor.instructor }}
+                                    </td>
+                                    <td>{{ course.course }}</td>
+                                    <td>{{ formatDecimal(course.units) }}</td>
+                                    <td>{{ course.enrollment }}</td>
+                                    <td
                                         v-for="type in orderedEffortTypes"
                                         :key="type"
-                                        scope="col"
-                                        class="col-effort"
                                         :class="{ 'col-spacer': isSpacerColumn(type) }"
                                     >
-                                        <abbr :title="getEffortTypeLabel(type)">{{ type }}</abbr>
-                                    </th>
+                                        {{ getTotalValue(course.effortByType ?? {}, type) }}
+                                    </td>
                                 </tr>
 
-                                <!-- Department totals row -->
-                                <tr class="dept-totals-row bg-grey-4">
+                                <!-- Instructor totals row -->
+                                <tr class="totals-row bg-grey-1">
                                     <th
                                         scope="row"
                                         colspan="6"
                                         class="subt"
                                     >
-                                        Department Totals:
+                                        {{ instructor.instructor }} Totals:
                                     </th>
                                     <td
                                         v-for="type in orderedEffortTypes"
@@ -182,32 +113,58 @@
                                         class="total"
                                         :class="{ 'col-spacer': isSpacerColumn(type) }"
                                     >
-                                        {{ getTotalValue(dept.departmentTotals, type) }}
+                                        {{ getTotalValue(instructor.instructorTotals, type) }}
                                     </td>
                                 </tr>
-                            </tbody>
-                        </table>
-                    </template>
-                </ReportDeptTabs>
-            </template>
-        </ReportLayout>
+                            </template>
+
+                            <!-- Re-display effort type headers before department totals -->
+                            <tr class="header-repeat">
+                                <th
+                                    scope="col"
+                                    colspan="6"
+                                ></th>
+                                <th
+                                    v-for="type in orderedEffortTypes"
+                                    :key="type"
+                                    scope="col"
+                                    class="col-effort"
+                                    :class="{ 'col-spacer': isSpacerColumn(type) }"
+                                >
+                                    <abbr :title="getEffortTypeLabel(type)">{{ type }}</abbr>
+                                </th>
+                            </tr>
 
-        <!-- No report generated yet -->
-        <div
-            v-else-if="!loading"
-            class="text-grey-7 text-center q-pa-lg"
-        >
-            Select filters and click "Generate Report" to view data.
-        </div>
-    </div>
+                            <!-- Department totals row -->
+                            <tr class="dept-totals-row bg-grey-4">
+                                <th
+                                    scope="row"
+                                    colspan="6"
+                                    class="subt"
+                                >
+                                    Department Totals:
+                                </th>
+                                <td
+                                    v-for="type in orderedEffortTypes"
+                                    :key="type"
+                                    class="total"
+                                    :class="{ 'col-spacer': isSpacerColumn(type) }"
+                                >
+                                    {{ getTotalValue(dept.departmentTotals, type) }}
+                                </td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </template>
+            </ReportDeptTabs>
+        </template>
+    </EffortReportPage>
 </template>
 
 <script setup lang="ts">
 import { reportService } from "../services/report-service"
 import { useReportPage } from "../composables/use-report-page"
-import ExportToolbar from "@/components/ExportToolbar.vue"
-import ReportFilterForm from "../components/ReportFilterForm.vue"
-import ReportLayout from "../components/ReportLayout.vue"
+import EffortReportPage from "../components/EffortReportPage.vue"
 import ReportDeptTabs from "../components/ReportDeptTabs.vue"
 import type { TeachingActivityReport } from "../types"
 import "../report-tables.css"
@@ -233,7 +190,6 @@ const {
     hasData: (r) => r.departments.length > 0,
 })
 
-/** Strip trailing zeros: 12.00 → "12", 10.50 → "10.5" */
 function formatDecimal(value: number): string {
     return parseFloat(value.toString()).toString()
 }
diff --git a/VueApp/src/Effort/pages/TeachingActivityIndividual.vue b/VueApp/src/Effort/pages/TeachingActivityIndividual.vue
index 58e238e75..f1ced00d7 100644
--- a/VueApp/src/Effort/pages/TeachingActivityIndividual.vue
+++ b/VueApp/src/Effort/pages/TeachingActivityIndividual.vue
@@ -1,175 +1,137 @@
 <template>
-    <div class="q-pa-md">
-        <h1>Teaching Activity Report - Individual</h1>
-
-        <ReportFilterForm
-            :term-code="termCode"
-            :loading="loading"
-            :initial-filters="initialFilters"
-            @generate="generateReport"
-        />
-
-        <!-- Loading state -->
-        <div
-            v-if="loading"
-            role="status"
-            class="text-center q-my-lg"
+    <EffortReportPage
+        title="Teaching Activity Report - Individual"
+        :term-code="termCode"
+        :loading="loading"
+        :has-report="report !== null"
+        :is-empty="allInstructors.length === 0"
+        :initial-filters="initialFilters"
+        :on-pdf-export="handlePrint"
+        :on-excel-export="handleExcelDownload"
+        @generate="generateReport"
+    >
+        <template
+            v-if="report"
+            #header
+            >{{ report.termName }} - Teaching Activity (Individual)</template
         >
-            <q-spinner-dots
-                size="3rem"
-                color="primary"
-            />
-            <div class="q-mt-md text-body1">Loading report...</div>
-        </div>
-
-        <!-- Report content -->
-        <ReportLayout v-else-if="report">
-            <template #header>
-                <div class="col text-h6">{{ report.termName }} - Teaching Activity (Individual)</div>
-                <div class="col-auto no-print">
-                    <ExportToolbar
-                        :pdf-export="handlePrint"
-                        :excel-export="handleExcelDownload"
-                    />
-                </div>
-            </template>
-
-            <template v-if="allInstructors.length === 0">
-                <div
-                    role="status"
-                    class="text-grey-7 text-center q-pa-lg"
-                >
-                    No data found for the selected filters.
-                </div>
-            </template>
 
-            <template v-else>
-                <q-card
-                    v-for="instructor in allInstructors"
-                    :key="instructor.mothraId"
-                    flat
-                    bordered
-                    class="q-mb-md instructor-card"
-                >
-                    <!-- Instructor header -->
-                    <q-card-section class="q-pa-sm instructor-card-header bg-grey-2">
-                        <div class="text-weight-bold">{{ instructor.instructor }}</div>
-                        <div
-                            v-if="instructor.department"
-                            class="text-caption text-grey-8"
+        <template v-if="report">
+            <q-card
+                v-for="instructor in allInstructors"
+                :key="instructor.mothraId"
+                flat
+                bordered
+                class="q-mb-md instructor-card"
+            >
+                <!-- Instructor header -->
+                <q-card-section class="q-pa-sm instructor-card-header bg-grey-2">
+                    <div class="text-weight-bold">{{ instructor.instructor }}</div>
+                    <div
+                        v-if="instructor.department"
+                        class="text-caption text-grey-8"
+                    >
+                        {{ instructor.department }}
+                    </div>
+                </q-card-section>
+
+                <q-separator />
+
+                <!-- Course rows table -->
+                <table class="report-table">
+                    <caption class="sr-only">
+                        Teaching activity for
+                        {{
+                            instructor.instructor
+                        }}
+                    </caption>
+                    <thead>
+                        <tr>
+                            <th
+                                scope="col"
+                                class="col-qtr"
+                            >
+                                Qtr
+                            </th>
+                            <th
+                                scope="col"
+                                class="col-role"
+                            >
+                                Role
+                            </th>
+                            <th scope="col">Course</th>
+                            <th
+                                scope="col"
+                                class="col-units"
+                            >
+                                Units
+                            </th>
+                            <th
+                                scope="col"
+                                class="col-enroll"
+                            >
+                                Enrl
+                            </th>
+                            <th
+                                v-for="type in orderedEffortTypes"
+                                :key="type"
+                                scope="col"
+                                class="col-effort"
+                                :class="{ 'col-spacer': isSpacerColumn(type) }"
+                            >
+                                <abbr :title="getEffortTypeLabel(type)">{{ type }}</abbr>
+                            </th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr
+                            v-for="course in instructor.courses"
+                            :key="`${course.termCode}_${course.courseId}_${course.roleId}`"
                         >
-                            {{ instructor.department }}
-                        </div>
-                    </q-card-section>
-
-                    <q-separator />
-
-                    <!-- Course rows table -->
-                    <table class="report-table">
-                        <caption class="sr-only">
-                            Teaching activity for
-                            {{
-                                instructor.instructor
-                            }}
-                        </caption>
-                        <thead>
-                            <tr>
-                                <th
-                                    scope="col"
-                                    class="col-qtr"
-                                >
-                                    Qtr
-                                </th>
-                                <th
-                                    scope="col"
-                                    class="col-role"
-                                >
-                                    Role
-                                </th>
-                                <th scope="col">Course</th>
-                                <th
-                                    scope="col"
-                                    class="col-units"
-                                >
-                                    Units
-                                </th>
-                                <th
-                                    scope="col"
-                                    class="col-enroll"
-                                >
-                                    Enrl
-                                </th>
-                                <th
-                                    v-for="type in orderedEffortTypes"
-                                    :key="type"
-                                    scope="col"
-                                    class="col-effort"
-                                    :class="{ 'col-spacer': isSpacerColumn(type) }"
-                                >
-                                    <abbr :title="getEffortTypeLabel(type)">{{ type }}</abbr>
-                                </th>
-                            </tr>
-                        </thead>
-                        <tbody>
-                            <tr
-                                v-for="course in instructor.courses"
-                                :key="`${course.termCode}_${course.courseId}_${course.roleId}`"
+                            <td>{{ course.termCode }}</td>
+                            <td>{{ course.roleId }}</td>
+                            <td>{{ course.course }}</td>
+                            <td>{{ formatDecimal(course.units) }}</td>
+                            <td>{{ course.enrollment }}</td>
+                            <td
+                                v-for="type in orderedEffortTypes"
+                                :key="type"
+                                :class="{ 'col-spacer': isSpacerColumn(type) }"
                             >
-                                <td>{{ course.termCode }}</td>
-                                <td>{{ course.roleId }}</td>
-                                <td>{{ course.course }}</td>
-                                <td>{{ formatDecimal(course.units) }}</td>
-                                <td>{{ course.enrollment }}</td>
-                                <td
-                                    v-for="type in orderedEffortTypes"
-                                    :key="type"
-                                    :class="{ 'col-spacer': isSpacerColumn(type) }"
-                                >
-                                    {{ getTotalValue(course.effortByType ?? {}, type) }}
-                                </td>
-                            </tr>
-
-                            <!-- Instructor totals row -->
-                            <tr class="totals-row bg-grey-1">
-                                <th
-                                    scope="row"
-                                    colspan="5"
-                                    class="subt"
-                                >
-                                    {{ instructor.instructor }} Totals:
-                                </th>
-                                <td
-                                    v-for="type in orderedEffortTypes"
-                                    :key="type"
-                                    class="total"
-                                    :class="{ 'col-spacer': isSpacerColumn(type) }"
-                                >
-                                    {{ getTotalValue(instructor.instructorTotals, type) }}
-                                </td>
-                            </tr>
-                        </tbody>
-                    </table>
-                </q-card>
-            </template>
-        </ReportLayout>
-
-        <!-- No report generated yet -->
-        <div
-            v-else-if="!loading"
-            class="text-grey-7 text-center q-pa-lg"
-        >
-            Select filters and click "Generate Report" to view data.
-        </div>
-    </div>
+                                {{ getTotalValue(course.effortByType ?? {}, type) }}
+                            </td>
+                        </tr>
+
+                        <!-- Instructor totals row -->
+                        <tr class="totals-row bg-grey-1">
+                            <th
+                                scope="row"
+                                colspan="5"
+                                class="subt"
+                            >
+                                {{ instructor.instructor }} Totals:
+                            </th>
+                            <td
+                                v-for="type in orderedEffortTypes"
+                                :key="type"
+                                class="total"
+                                :class="{ 'col-spacer': isSpacerColumn(type) }"
+                            >
+                                {{ getTotalValue(instructor.instructorTotals, type) }}
+                            </td>
+                        </tr>
+                    </tbody>
+                </table>
+            </q-card>
+        </template>
+    </EffortReportPage>
 </template>
 
 <script setup lang="ts">
 import { computed } from "vue"
 import { reportService } from "../services/report-service"
 import { useReportPage } from "../composables/use-report-page"
-import ExportToolbar from "@/components/ExportToolbar.vue"
-import ReportFilterForm from "../components/ReportFilterForm.vue"
-import ReportLayout from "../components/ReportLayout.vue"
+import EffortReportPage from "../components/EffortReportPage.vue"
 import type { TeachingActivityReport, TeachingActivityInstructorGroup } from "../types"
 import "../report-tables.css"
 
@@ -194,7 +156,6 @@ const {
     hasData: (r) => r.departments.some((d) => d.instructors.length > 0),
 })
 
-/** Strip trailing zeros: 12.00 -> "12", 10.50 -> "10.5" */
 function formatDecimal(value: number): string {
     return parseFloat(value.toString()).toString()
 }
diff --git a/VueApp/src/Effort/pages/TermSelection.vue b/VueApp/src/Effort/pages/TermSelection.vue
index d90e10acd..fc38a30ab 100644
--- a/VueApp/src/Effort/pages/TermSelection.vue
+++ b/VueApp/src/Effort/pages/TermSelection.vue
@@ -15,225 +15,44 @@
 
         <template v-else>
             <!-- Unopened Terms - only visible to ManageTerms users -->
-            <div
+            <TermTable
                 v-if="hasManageTerms && unopenedTerms.length > 0"
-                class="q-mb-lg"
+                title="Unopened Terms"
+                :rows="unopenedTerms"
+                :columns="unopenedColumns"
             >
-                <h2 class="text-h6 q-mb-sm q-mt-none">Unopened Terms</h2>
-                <!-- Desktop: Table -->
-                <q-table
-                    :rows="unopenedTerms"
-                    :columns="unopenedColumns"
-                    row-key="termCode"
-                    dense
-                    flat
-                    bordered
-                    :pagination="{ rowsPerPage: 0 }"
-                    hide-pagination
-                    class="gt-xs"
-                >
-                    <template #body-cell-termName="props">
-                        <q-td :props="props">
-                            <router-link
-                                :to="`/Effort/${props.row.termCode}`"
-                                class="text-primary"
-                            >
-                                {{ props.row.termName }}
-                            </router-link>
-                        </q-td>
-                    </template>
-                    <template #body-cell-harvestedDate="props">
-                        <q-td :props="props">
-                            {{ formatDate(props.row.harvestedDate) }}
-                        </q-td>
-                    </template>
-                    <template #body-cell-expectedCloseDate="props">
-                        <q-td :props="props">
-                            {{ formatDate(props.row.expectedCloseDate) }}
-                        </q-td>
-                    </template>
-                </q-table>
-                <!-- Mobile: List -->
-                <div class="lt-sm">
-                    <q-list
-                        bordered
-                        separator
-                        dense
-                    >
-                        <q-item
-                            v-for="term in unopenedTerms"
-                            :key="term.termCode"
-                            clickable
-                            v-ripple
-                            :to="`/Effort/${term.termCode}`"
-                        >
-                            <q-item-section>
-                                <q-item-label>{{ term.termName }}</q-item-label>
-                                <q-item-label
-                                    caption
-                                    v-if="term.harvestedDate || term.expectedCloseDate"
-                                >
-                                    <span v-if="term.harvestedDate"
-                                        >Harvested: {{ formatDate(term.harvestedDate) }}</span
-                                    >
-                                    <span v-if="term.expectedCloseDate">
-                                        {{ term.harvestedDate ? " &middot; " : "" }}Expected Close:
-                                        {{ formatDate(term.expectedCloseDate) }}
-                                    </span>
-                                </q-item-label>
-                            </q-item-section>
-                            <q-item-section side>
-                                <q-icon name="chevron_right" />
-                            </q-item-section>
-                        </q-item>
-                    </q-list>
-                </div>
-            </div>
+                <template #caption="{ term }">
+                    <span v-if="term.harvestedDate">Harvested: {{ formatDate(term.harvestedDate) }}</span>
+                    <span v-if="term.expectedCloseDate">
+                        {{ term.harvestedDate ? " · " : "" }}Expected Close:
+                        {{ formatDate(term.expectedCloseDate) }}
+                    </span>
+                </template>
+            </TermTable>
 
             <!-- Open Terms -->
-            <div class="q-mb-lg">
-                <h2 class="text-h6 q-mb-sm q-mt-none">Open Terms</h2>
-                <!-- Desktop: Table -->
-                <q-table
-                    :rows="openTerms"
-                    :columns="openColumns"
-                    row-key="termCode"
-                    dense
-                    flat
-                    bordered
-                    :pagination="{ rowsPerPage: 0 }"
-                    hide-pagination
-                    class="gt-xs"
-                >
-                    <template #body-cell-termName="props">
-                        <q-td :props="props">
-                            <router-link
-                                :to="`/Effort/${props.row.termCode}`"
-                                class="text-primary"
-                            >
-                                {{ props.row.termName }}
-                            </router-link>
-                        </q-td>
-                    </template>
-                    <template #body-cell-harvestedDate="props">
-                        <q-td :props="props">
-                            {{ formatDate(props.row.harvestedDate) }}
-                        </q-td>
-                    </template>
-                    <template #body-cell-openedDate="props">
-                        <q-td :props="props">
-                            {{ formatDate(props.row.openedDate) }}
-                        </q-td>
-                    </template>
-                    <template #body-cell-expectedCloseDate="props">
-                        <q-td :props="props">
-                            {{ formatDate(props.row.expectedCloseDate) }}
-                        </q-td>
-                    </template>
-                    <template #no-data>
-                        <div class="text-grey q-pa-sm">No terms are currently open for editing</div>
-                    </template>
-                </q-table>
-                <!-- Mobile: List -->
-                <div class="lt-sm">
-                    <q-list
-                        bordered
-                        separator
-                        dense
-                    >
-                        <q-item
-                            v-for="term in openTerms"
-                            :key="term.termCode"
-                            clickable
-                            v-ripple
-                            :to="`/Effort/${term.termCode}`"
-                        >
-                            <q-item-section>
-                                <q-item-label>{{ term.termName }}</q-item-label>
-                                <q-item-label caption>
-                                    Opened: {{ formatDate(term.openedDate ?? "") }}
-                                    <span v-if="term.expectedCloseDate">
-                                        &middot; Expected Close: {{ formatDate(term.expectedCloseDate) }}
-                                    </span>
-                                </q-item-label>
-                            </q-item-section>
-                            <q-item-section side>
-                                <q-icon name="chevron_right" />
-                            </q-item-section>
-                        </q-item>
-                        <q-item v-if="openTerms.length === 0">
-                            <q-item-section class="text-grey"> No terms are currently open for editing </q-item-section>
-                        </q-item>
-                    </q-list>
-                </div>
-            </div>
+            <TermTable
+                title="Open Terms"
+                :rows="openTerms"
+                :columns="openColumns"
+                empty-message="No terms are currently open for editing"
+            >
+                <template #caption="{ term }">
+                    Opened: {{ formatDate(term.openedDate ?? "") }}
+                    <span v-if="term.expectedCloseDate">
+                        · Expected Close: {{ formatDate(term.expectedCloseDate) }}
+                    </span>
+                </template>
+            </TermTable>
 
             <!-- Closed Terms -->
-            <div class="q-mb-lg">
-                <h2 class="text-h6 q-mb-sm q-mt-none">Closed Terms</h2>
-                <!-- Desktop: Table -->
-                <q-table
-                    :rows="closedTerms"
-                    :columns="closedColumns"
-                    row-key="termCode"
-                    dense
-                    flat
-                    bordered
-                    :pagination="{ rowsPerPage: 0 }"
-                    hide-pagination
-                    class="gt-xs"
-                >
-                    <template #body-cell-termName="props">
-                        <q-td :props="props">
-                            <router-link
-                                :to="`/Effort/${props.row.termCode}`"
-                                class="text-primary"
-                            >
-                                {{ props.row.termName }}
-                            </router-link>
-                        </q-td>
-                    </template>
-                    <template #body-cell-harvestedDate="props">
-                        <q-td :props="props">
-                            {{ formatDate(props.row.harvestedDate) }}
-                        </q-td>
-                    </template>
-                    <template #body-cell-openedDate="props">
-                        <q-td :props="props">
-                            {{ formatDate(props.row.openedDate) }}
-                        </q-td>
-                    </template>
-                    <template #body-cell-closedDate="props">
-                        <q-td :props="props">
-                            {{ formatDate(props.row.closedDate) }}
-                        </q-td>
-                    </template>
-                </q-table>
-                <!-- Mobile: List -->
-                <div class="lt-sm">
-                    <q-list
-                        bordered
-                        separator
-                        dense
-                    >
-                        <q-item
-                            v-for="term in closedTerms"
-                            :key="term.termCode"
-                            clickable
-                            v-ripple
-                            :to="`/Effort/${term.termCode}`"
-                        >
-                            <q-item-section>
-                                <q-item-label>{{ term.termName }}</q-item-label>
-                                <q-item-label caption> Closed: {{ formatDate(term.closedDate ?? "") }} </q-item-label>
-                            </q-item-section>
-                            <q-item-section side>
-                                <q-icon name="chevron_right" />
-                            </q-item-section>
-                        </q-item>
-                    </q-list>
-                </div>
-            </div>
+            <TermTable
+                title="Closed Terms"
+                :rows="closedTerms"
+                :columns="closedColumns"
+            >
+                <template #caption="{ term }"> Closed: {{ formatDate(term.closedDate ?? "") }} </template>
+            </TermTable>
         </template>
     </div>
 </template>
@@ -243,6 +62,7 @@ import { ref, computed, onMounted } from "vue"
 import { termService } from "../services/term-service"
 import { useEffortPermissions } from "../composables/use-effort-permissions"
 import { useDateFunctions } from "@/composables/DateFunctions"
+import TermTable from "../components/TermTable.vue"
 import type { TermDto } from "../types"
 import type { QTableColumn } from "quasar"
 
diff --git a/VueApp/src/Students/EmergencyContact/components/EmergencyContactPageShell.vue b/VueApp/src/Students/EmergencyContact/components/EmergencyContactPageShell.vue
new file mode 100644
index 000000000..ca0002d44
--- /dev/null
+++ b/VueApp/src/Students/EmergencyContact/components/EmergencyContactPageShell.vue
@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import StatusBanner from "@/components/StatusBanner.vue"
+
+defineProps<{
+    loading: boolean
+    detail: { fullName: string; isAdmin?: boolean } | null
+}>()
+</script>
+
+<template>
+    <div class="q-pa-md">
+        <q-breadcrumbs class="q-mb-sm">
+            <q-breadcrumbs-el
+                label="Emergency Contacts"
+                :to="detail?.isAdmin ? { name: 'EmergencyContactList' } : undefined"
+            />
+            <q-breadcrumbs-el :label="detail?.fullName ?? 'Loading...'" />
+        </q-breadcrumbs>
+
+        <q-spinner
+            v-if="loading"
+            color="primary"
+            size="2rem"
+            class="q-ma-lg"
+            aria-label="Loading contact information"
+        />
+
+        <template v-else-if="detail">
+            <slot />
+        </template>
+
+        <div
+            v-else
+            class="q-mt-md"
+        >
+            <StatusBanner type="warning">Student contact record not found.</StatusBanner>
+        </div>
+    </div>
+</template>
diff --git a/VueApp/src/Students/EmergencyContact/pages/EmergencyContactForm.vue b/VueApp/src/Students/EmergencyContact/pages/EmergencyContactForm.vue
index 1e0c56411..64bf4096a 100644
--- a/VueApp/src/Students/EmergencyContact/pages/EmergencyContactForm.vue
+++ b/VueApp/src/Students/EmergencyContact/pages/EmergencyContactForm.vue
@@ -5,6 +5,7 @@ import { useQuasar } from "quasar"
 import StatusBanner from "@/components/StatusBanner.vue"
 import StatusBadge from "@/components/StatusBadge.vue"
 import ContactSection from "../components/ContactSection.vue"
+import EmergencyContactPageShell from "../components/EmergencyContactPageShell.vue"
 import PhoneInput from "../components/PhoneInput.vue"
 import { useEmergencyContact } from "../composables/use-emergency-contact"
 import { emergencyContactService } from "../services/emergency-contact-service"
@@ -226,24 +227,11 @@ onBeforeRouteLeave(() => {
 </script>
 
 <template>
-    <div class="q-pa-md">
-        <q-breadcrumbs class="q-mb-sm">
-            <q-breadcrumbs-el
-                label="Emergency Contacts"
-                :to="detail?.isAdmin ? { name: 'EmergencyContactList' } : undefined"
-            />
-            <q-breadcrumbs-el :label="detail?.fullName ?? 'Loading...'" />
-        </q-breadcrumbs>
-
-        <q-spinner
-            v-if="loading"
-            color="primary"
-            size="2rem"
-            class="q-ma-lg"
-            aria-label="Loading contact information"
-        />
-
-        <template v-else-if="detail">
+    <EmergencyContactPageShell
+        :loading="loading"
+        :detail="detail"
+    >
+        <template v-if="detail">
             <h1 class="q-ma-none q-mb-md">
                 Emergency Contact: {{ detail.fullName }}
                 <StatusBadge
@@ -541,14 +529,7 @@ onBeforeRouteLeave(() => {
                 </div>
             </q-form>
         </template>
-
-        <div
-            v-else
-            class="q-mt-md"
-        >
-            <StatusBanner type="warning"> Student contact record not found. </StatusBanner>
-        </div>
-    </div>
+    </EmergencyContactPageShell>
 </template>
 
 <style scoped>
diff --git a/VueApp/src/Students/EmergencyContact/pages/EmergencyContactView.vue b/VueApp/src/Students/EmergencyContact/pages/EmergencyContactView.vue
index 47c2e3217..c3c67550d 100644
--- a/VueApp/src/Students/EmergencyContact/pages/EmergencyContactView.vue
+++ b/VueApp/src/Students/EmergencyContact/pages/EmergencyContactView.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { onMounted, computed, ref } from "vue"
 import { useRoute, useRouter } from "vue-router"
-import StatusBanner from "@/components/StatusBanner.vue"
+import EmergencyContactPageShell from "../components/EmergencyContactPageShell.vue"
 import { emergencyContactService } from "../services/emergency-contact-service"
 import { stripToDigits, formatPhone } from "../utils/phone"
 import type { StudentContactDetail } from "../types"
@@ -46,24 +46,11 @@ onMounted(() => {
 </script>
 
 <template>
-    <div class="q-pa-md">
-        <q-breadcrumbs class="q-mb-sm">
-            <q-breadcrumbs-el
-                label="Emergency Contacts"
-                :to="detail?.isAdmin ? { name: 'EmergencyContactList' } : undefined"
-            />
-            <q-breadcrumbs-el :label="detail?.fullName ?? 'Loading...'" />
-        </q-breadcrumbs>
-
-        <q-spinner
-            v-if="loading"
-            color="primary"
-            size="2rem"
-            class="q-ma-lg"
-            aria-label="Loading contact information"
-        />
-
-        <template v-else-if="detail">
+    <EmergencyContactPageShell
+        :loading="loading"
+        :detail="detail"
+    >
+        <template v-if="detail">
             <h1 class="q-ma-none q-mb-md">
                 Emergency Contact: {{ detail.fullName }}
                 <q-btn
@@ -257,14 +244,7 @@ onMounted(() => {
                 </div>
             </div>
         </template>
-
-        <div
-            v-else
-            class="q-mt-md"
-        >
-            <StatusBanner type="warning"> Student contact record not found. </StatusBanner>
-        </div>
-    </div>
+    </EmergencyContactPageShell>
 </template>
 
 <style scoped>
diff --git a/test/Effort/BaseReportServiceTests.cs b/test/Effort/BaseReportServiceTests.cs
index feadbaeae..bd9561ae6 100644
--- a/test/Effort/BaseReportServiceTests.cs
+++ b/test/Effort/BaseReportServiceTests.cs
@@ -11,7 +11,7 @@ public sealed class BaseReportServiceTests
     // Concrete subclass to expose protected static methods for testing
     private class TestableReportService : BaseReportService
     {
-        public TestableReportService() : base(null!) { }
+        public TestableReportService() : base(null!, null!) { }
 
         public static int TestParseAcademicYearStart(string academicYear)
             => ParseAcademicYearStart(academicYear);
diff --git a/test/Effort/ExcelGenerationTests.cs b/test/Effort/ExcelGenerationTests.cs
index 30c39db21..6f063ebbb 100644
--- a/test/Effort/ExcelGenerationTests.cs
+++ b/test/Effort/ExcelGenerationTests.cs
@@ -438,13 +438,13 @@ private static TeachingActivityService CreateTeachingActivityService()
     private static ClinicalEffortService CreateClinicalEffortService()
     {
         var logger = Substitute.For<ILogger<ClinicalEffortService>>();
-        return new ClinicalEffortService(null!, logger);
+        return new ClinicalEffortService(null!, null!, logger);
     }
 
     private static MeritMultiYearService CreateMeritMultiYearService()
     {
         var logger = Substitute.For<ILogger<MeritMultiYearService>>();
-        return new MeritMultiYearService(null!, logger);
+        return new MeritMultiYearService(null!, null!, logger);
     }
 
     #endregion
diff --git a/web/Areas/Effort/Services/BaseReportService.cs b/web/Areas/Effort/Services/BaseReportService.cs
index d013e5913..e448a52cc 100644
--- a/web/Areas/Effort/Services/BaseReportService.cs
+++ b/web/Areas/Effort/Services/BaseReportService.cs
@@ -17,10 +17,12 @@ namespace Viper.Areas.Effort.Services;
 public abstract partial class BaseReportService
 {
     protected readonly EffortDbContext _context;
+    protected readonly ITermService _termService;
 
-    protected BaseReportService(EffortDbContext context)
+    protected BaseReportService(EffortDbContext context, ITermService termService)
     {
         _context = context;
+        _termService = termService;
     }
 
     // ── Academic Year ────────────────────────────────────────────────
@@ -141,6 +143,91 @@ protected async Task<List<TeachingActivityRow>> ExecuteGeneralReportForDepartmen
         return allRows;
     }
 
+    // ── Report Data Bundles ─────────────────────────────────────────
+
+    /// <summary>
+    /// Shared single-term report data: rows from the general report SP,
+    /// the resolved term name, and the set of clinical faculty MothraIds.
+    /// </summary>
+    protected sealed record SingleTermReportContext(
+        List<TeachingActivityRow> Rows,
+        string TermName,
+        string? FilterDepartment,
+        HashSet<string> ClinicalMothraIds);
+
+    /// <summary>
+    /// Shared academic-year report data: union of rows across all term codes,
+    /// the resolved term codes list, and the set of clinical faculty MothraIds.
+    /// </summary>
+    protected sealed record YearlyReportContext(
+        List<TeachingActivityRow> Rows,
+        List<int> TermCodes,
+        string? FilterDepartment,
+        HashSet<string> ClinicalMothraIds);
+
+    /// <summary>
+    /// Load report data for a single term: rows, term name, and clinical faculty IDs.
+    /// Used by TeachingActivityService, DeptSummaryService, and SchoolSummaryService.
+    /// </summary>
+    protected async Task<SingleTermReportContext> LoadSingleTermContextAsync(
+        int termCode,
+        IReadOnlyList<string>? departments,
+        int? personId, string? role, string? jobGroupId,
+        CancellationToken ct)
+    {
+        var rows = await ExecuteGeneralReportForDepartmentsAsync(termCode, departments, personId, role, jobGroupId, ct);
+        var term = await _termService.GetTermAsync(termCode, ct);
+        var filterDept = departments is { Count: 1 } ? departments[0] : null;
+        var academicYear = AcademicYearHelper.GetAcademicYearFromTermCode(termCode);
+        var clinicalMothraIds = await GetClinicalFacultyMothraIdsAsync(academicYear, ct);
+        var termName = term?.TermName ?? _termService.GetTermName(termCode);
+        return new SingleTermReportContext(rows, termName, filterDept, clinicalMothraIds);
+    }
+
+    /// <summary>
+    /// Load report data for an academic year: rows across all terms, term codes, and clinical faculty IDs.
+    /// Returns an empty rows list when the academic year has no terms.
+    /// </summary>
+    protected async Task<YearlyReportContext> LoadYearlyReportContextAsync(
+        string academicYear,
+        IReadOnlyList<string>? departments,
+        int? personId, string? role, string? jobGroupId,
+        CancellationToken ct)
+    {
+        var startYear = ParseAcademicYearStart(academicYear);
+        var termCodes = await GetTermCodesForAcademicYearAsync(startYear, ct);
+        var filterDept = departments is { Count: 1 } ? departments[0] : null;
+
+        if (termCodes.Count == 0)
+        {
+            return new YearlyReportContext([], termCodes, filterDept, []);
+        }
+
+        var allRows = new List<TeachingActivityRow>();
+        foreach (var tc in termCodes)
+        {
+            var rows = await ExecuteGeneralReportForDepartmentsAsync(tc, departments, personId, role, jobGroupId, ct);
+            allRows.AddRange(rows);
+        }
+
+        var clinicalMothraIds = await GetClinicalFacultyMothraIdsAsync(academicYear, ct);
+        return new YearlyReportContext(allRows, termCodes, filterDept, clinicalMothraIds);
+    }
+
+    /// <summary>
+    /// Extract distinct effort types from the rows, trimmed and alphabetically ordered.
+    /// Matches the projection used by every BuildReport in the effort report services.
+    /// </summary>
+    protected static List<string> ExtractDistinctEffortTypes(List<TeachingActivityRow> rows)
+    {
+        return rows
+            .Where(r => !string.IsNullOrWhiteSpace(r.EffortTypeId))
+            .Select(r => r.EffortTypeId.Trim())
+            .Distinct()
+            .OrderBy(t => t)
+            .ToList();
+    }
+
     // ── Clinical Faculty Lookup ─────────────────────────────────────
 
     /// <summary>
diff --git a/web/Areas/Effort/Services/ClinicalEffortService.cs b/web/Areas/Effort/Services/ClinicalEffortService.cs
index 9785ba6d6..56dd6d0fd 100644
--- a/web/Areas/Effort/Services/ClinicalEffortService.cs
+++ b/web/Areas/Effort/Services/ClinicalEffortService.cs
@@ -17,8 +17,9 @@ public class ClinicalEffortService : BaseReportService, IClinicalEffortService
 
     public ClinicalEffortService(
         EffortDbContext context,
+        ITermService termService,
         ILogger<ClinicalEffortService> logger)
-        : base(context)
+        : base(context, termService)
     {
         _logger = logger;
     }
diff --git a/web/Areas/Effort/Services/ClinicalScheduleService.cs b/web/Areas/Effort/Services/ClinicalScheduleService.cs
index b7478e453..4b56245cb 100644
--- a/web/Areas/Effort/Services/ClinicalScheduleService.cs
+++ b/web/Areas/Effort/Services/ClinicalScheduleService.cs
@@ -19,7 +19,6 @@ public class ClinicalScheduleService : BaseReportService, IClinicalScheduleServi
 {
     private readonly ClinicalSchedulerContext _clinicalContext;
     private readonly AAUDContext _aaudContext;
-    private readonly ITermService _termService;
     private readonly ILogger<ClinicalScheduleService> _logger;
 
     public ClinicalScheduleService(
@@ -28,11 +27,10 @@ public ClinicalScheduleService(
         AAUDContext aaudContext,
         ITermService termService,
         ILogger<ClinicalScheduleService> logger)
-        : base(context)
+        : base(context, termService)
     {
         _clinicalContext = clinicalContext;
         _aaudContext = aaudContext;
-        _termService = termService;
         _logger = logger;
     }
 
diff --git a/web/Areas/Effort/Services/DeptSummaryService.cs b/web/Areas/Effort/Services/DeptSummaryService.cs
index f30b4dceb..e17591150 100644
--- a/web/Areas/Effort/Services/DeptSummaryService.cs
+++ b/web/Areas/Effort/Services/DeptSummaryService.cs
@@ -9,14 +9,11 @@ namespace Viper.Areas.Effort.Services;
 
 public class DeptSummaryService : BaseReportService, IDeptSummaryService
 {
-    private readonly ITermService _termService;
-
     public DeptSummaryService(
         EffortDbContext context,
         ITermService termService)
-        : base(context)
+        : base(context, termService)
     {
-        _termService = termService;
     }
 
     public async Task<DeptSummaryReport> GetDeptSummaryReportAsync(
@@ -27,24 +24,19 @@ public async Task<DeptSummaryReport> GetDeptSummaryReportAsync(
         string? jobGroupId = null,
         CancellationToken ct = default)
     {
-        var rows = await ExecuteGeneralReportForDepartmentsAsync(termCode, departments, personId, role, jobGroupId, ct);
-        var term = await _termService.GetTermAsync(termCode, ct);
-        var filterDept = departments is { Count: 1 } ? departments[0] : null;
-
-        var academicYear = AcademicYearHelper.GetAcademicYearFromTermCode(termCode);
-        var clinicalMothraIds = await GetClinicalFacultyMothraIdsAsync(academicYear, ct);
+        var ctx = await LoadSingleTermContextAsync(termCode, departments, personId, role, jobGroupId, ct);
 
         var report = new DeptSummaryReport
         {
             TermCode = termCode,
-            TermName = term?.TermName ?? _termService.GetTermName(termCode),
-            FilterDepartment = filterDept,
+            TermName = ctx.TermName,
+            FilterDepartment = ctx.FilterDepartment,
             FilterPerson = personId?.ToString(),
             FilterRole = role,
             FilterTitle = jobGroupId
         };
 
-        return BuildReport(report, rows, clinicalMothraIds);
+        return BuildReport(report, ctx.Rows, ctx.ClinicalMothraIds);
     }
 
     public async Task<DeptSummaryReport> GetDeptSummaryReportByYearAsync(
@@ -55,44 +47,33 @@ public async Task<DeptSummaryReport> GetDeptSummaryReportByYearAsync(
         string? jobGroupId = null,
         CancellationToken ct = default)
     {
-        var startYear = ParseAcademicYearStart(academicYear);
-        var termCodes = await GetTermCodesForAcademicYearAsync(startYear, ct);
-        var filterDept = departments is { Count: 1 } ? departments[0] : null;
+        var ctx = await LoadYearlyReportContextAsync(academicYear, departments, personId, role, jobGroupId, ct);
 
-        if (termCodes.Count == 0)
+        if (ctx.TermCodes.Count == 0)
         {
             return new DeptSummaryReport
             {
                 TermName = academicYear,
                 AcademicYear = academicYear,
-                FilterDepartment = filterDept,
+                FilterDepartment = ctx.FilterDepartment,
                 FilterPerson = personId?.ToString(),
                 FilterRole = role,
                 FilterTitle = jobGroupId
             };
         }
 
-        var allRows = new List<TeachingActivityRow>();
-        foreach (var tc in termCodes)
-        {
-            var rows = await ExecuteGeneralReportForDepartmentsAsync(tc, departments, personId, role, jobGroupId, ct);
-            allRows.AddRange(rows);
-        }
-
-        var clinicalMothraIds = await GetClinicalFacultyMothraIdsAsync(academicYear, ct);
-
         var report = new DeptSummaryReport
         {
-            TermCode = termCodes[0],
+            TermCode = ctx.TermCodes[0],
             TermName = academicYear,
             AcademicYear = academicYear,
-            FilterDepartment = filterDept,
+            FilterDepartment = ctx.FilterDepartment,
             FilterPerson = personId?.ToString(),
             FilterRole = role,
             FilterTitle = jobGroupId
         };
 
-        return BuildReport(report, allRows, clinicalMothraIds);
+        return BuildReport(report, ctx.Rows, ctx.ClinicalMothraIds);
     }
 
     private static DeptSummaryReport BuildReport(
@@ -103,13 +84,7 @@ private static DeptSummaryReport BuildReport(
             return report;
         }
 
-        var effortTypes = rows
-            .Where(r => !string.IsNullOrWhiteSpace(r.EffortTypeId))
-            .Select(r => r.EffortTypeId.Trim())
-            .Distinct()
-            .OrderBy(t => t)
-            .ToList();
-
+        var effortTypes = ExtractDistinctEffortTypes(rows);
         report.EffortTypes = effortTypes;
 
         report.Departments = rows
diff --git a/web/Areas/Effort/Services/EvaluationReportService.cs b/web/Areas/Effort/Services/EvaluationReportService.cs
index 191147eb3..8c9d5f633 100644
--- a/web/Areas/Effort/Services/EvaluationReportService.cs
+++ b/web/Areas/Effort/Services/EvaluationReportService.cs
@@ -11,16 +11,14 @@ namespace Viper.Areas.Effort.Services;
 
 public class EvaluationReportService : BaseReportService, IEvaluationReportService
 {
-    private readonly ITermService _termService;
     private readonly ILogger<EvaluationReportService> _logger;
 
     public EvaluationReportService(
         EffortDbContext context,
         ITermService termService,
         ILogger<EvaluationReportService> logger)
-        : base(context)
+        : base(context, termService)
     {
-        _termService = termService;
         _logger = logger;
     }
 
@@ -334,36 +332,22 @@ private static EvalSummaryReport BuildEvalSummaryReport(EvalSummaryReport report
                     .Select(instrGroup =>
                     {
                         var instrRows = instrGroup.ToList();
-                        var totalPts = instrRows.Sum(r =>
-                            r.N5 * 5m + r.N4 * 4m + r.N3 * 3m + r.N2 * 2m + r.N1 * 1m);
-                        var totalResponses = instrRows.Sum(r => r.N5 + r.N4 + r.N3 + r.N2 + r.N1);
-                        var weightedAvg = totalResponses > 0
-                            ? Math.Round(totalPts / totalResponses, 2)
-                            : 0m;
-
                         return new EvalInstructorSummary
                         {
                             MothraId = instrGroup.Key,
                             Instructor = instrRows[0].Instructor,
-                            WeightedAverage = weightedAvg,
+                            WeightedAverage = CalculateWeightedAverage(instrRows),
                             TotalResponses = instrRows.Sum(r => r.NumResponses),
                             TotalEnrolled = instrRows.Sum(r => r.NumEnrolled)
                         };
                     })
                     .ToList();
 
-                // Department average: weighted across all courses in the department
-                var deptTotalPts = deptGroup.Sum(r =>
-                    r.N5 * 5m + r.N4 * 4m + r.N3 * 3m + r.N2 * 2m + r.N1 * 1m);
-                var deptTotalResponses = deptGroup.Sum(r => r.N5 + r.N4 + r.N3 + r.N2 + r.N1);
-
                 return new EvalDepartmentGroup
                 {
                     Department = deptGroup.Key,
                     Instructors = instructors,
-                    DepartmentAverage = deptTotalResponses > 0
-                        ? Math.Round(deptTotalPts / deptTotalResponses, 2)
-                        : 0m,
+                    DepartmentAverage = CalculateWeightedAverage(deptGroup),
                     TotalResponses = deptGroup.Sum(r => r.NumResponses)
                 };
             })
@@ -372,6 +356,18 @@ private static EvalSummaryReport BuildEvalSummaryReport(EvalSummaryReport report
         return report;
     }
 
+    /// <summary>
+    /// Compute the weighted average of an N5..N1 rating distribution over a row collection,
+    /// rounded to 2 decimals. Returns 0 when there are no responses to avoid divide-by-zero.
+    /// </summary>
+    private static decimal CalculateWeightedAverage(IEnumerable<EvalRawRow> rows)
+    {
+        var rowList = rows.ToList();
+        var totalPts = rowList.Sum(r => r.N5 * 5m + r.N4 * 4m + r.N3 * 3m + r.N2 * 2m + r.N1 * 1m);
+        var totalResponses = rowList.Sum(r => r.N5 + r.N4 + r.N3 + r.N2 + r.N1);
+        return totalResponses > 0 ? Math.Round(totalPts / totalResponses, 2) : 0m;
+    }
+
     private EvalDetailReport BuildEvalDetailReport(EvalDetailReport report, List<EvalRawRow> rows)
     {
         if (rows.Count == 0)
@@ -405,11 +401,6 @@ private EvalDetailReport BuildEvalDetailReport(EvalDetailReport report, List<Eva
                             })
                             .ToList();
 
-                        // Instructor weighted average: totalPts / totalResponses
-                        var totalPts = instrRows.Sum(r =>
-                            r.N5 * 5m + r.N4 * 4m + r.N3 * 3m + r.N2 * 2m + r.N1 * 1m);
-                        var totalResponses = instrRows.Sum(r => r.N5 + r.N4 + r.N3 + r.N2 + r.N1);
-
                         // Instructor median from combined distribution
                         var totalN1 = instrRows.Sum(r => r.N1);
                         var totalN2 = instrRows.Sum(r => r.N2);
@@ -422,26 +413,17 @@ private EvalDetailReport BuildEvalDetailReport(EvalDetailReport report, List<Eva
                             MothraId = instrGroup.Key,
                             Instructor = instrRows[0].Instructor,
                             Courses = courses,
-                            InstructorAverage = totalResponses > 0
-                                ? Math.Round(totalPts / totalResponses, 2)
-                                : 0m,
+                            InstructorAverage = CalculateWeightedAverage(instrRows),
                             InstructorMedian = CalculateMedian(totalN1, totalN2, totalN3, totalN4, totalN5)
                         };
                     })
                     .ToList();
 
-                // Department weighted average
-                var deptTotalPts = deptGroup.Sum(r =>
-                    r.N5 * 5m + r.N4 * 4m + r.N3 * 3m + r.N2 * 2m + r.N1 * 1m);
-                var deptTotalResponses = deptGroup.Sum(r => r.N5 + r.N4 + r.N3 + r.N2 + r.N1);
-
                 return new EvalDetailDepartmentGroup
                 {
                     Department = deptGroup.Key,
                     Instructors = instructors,
-                    DepartmentAverage = deptTotalResponses > 0
-                        ? Math.Round(deptTotalPts / deptTotalResponses, 2)
-                        : 0m
+                    DepartmentAverage = CalculateWeightedAverage(deptGroup)
                 };
             })
             .ToList();
diff --git a/web/Areas/Effort/Services/MeritMultiYearService.cs b/web/Areas/Effort/Services/MeritMultiYearService.cs
index 10ebf48f0..6bd24152f 100644
--- a/web/Areas/Effort/Services/MeritMultiYearService.cs
+++ b/web/Areas/Effort/Services/MeritMultiYearService.cs
@@ -17,8 +17,9 @@ public class MeritMultiYearService : BaseReportService, IMeritMultiYearService
 
     public MeritMultiYearService(
         EffortDbContext context,
+        ITermService termService,
         ILogger<MeritMultiYearService> logger)
-        : base(context)
+        : base(context, termService)
     {
         _logger = logger;
     }
diff --git a/web/Areas/Effort/Services/MeritReportService.cs b/web/Areas/Effort/Services/MeritReportService.cs
index 17f4b061a..0253d0eb8 100644
--- a/web/Areas/Effort/Services/MeritReportService.cs
+++ b/web/Areas/Effort/Services/MeritReportService.cs
@@ -12,16 +12,14 @@ namespace Viper.Areas.Effort.Services;
 
 public class MeritReportService : BaseReportService, IMeritReportService
 {
-    private readonly ITermService _termService;
     private readonly ILogger<MeritReportService> _logger;
 
     public MeritReportService(
         EffortDbContext context,
         ITermService termService,
         ILogger<MeritReportService> logger)
-        : base(context)
+        : base(context, termService)
     {
-        _termService = termService;
         _logger = logger;
     }
 
diff --git a/web/Areas/Effort/Services/MeritSummaryService.cs b/web/Areas/Effort/Services/MeritSummaryService.cs
index 203cddb38..06c4c9d36 100644
--- a/web/Areas/Effort/Services/MeritSummaryService.cs
+++ b/web/Areas/Effort/Services/MeritSummaryService.cs
@@ -12,16 +12,14 @@ namespace Viper.Areas.Effort.Services;
 
 public class MeritSummaryService : BaseReportService, IMeritSummaryService
 {
-    private readonly ITermService _termService;
     private readonly ILogger<MeritSummaryService> _logger;
 
     public MeritSummaryService(
         EffortDbContext context,
         ITermService termService,
         ILogger<MeritSummaryService> logger)
-        : base(context)
+        : base(context, termService)
     {
-        _termService = termService;
         _logger = logger;
     }
 
diff --git a/web/Areas/Effort/Services/SchoolSummaryService.cs b/web/Areas/Effort/Services/SchoolSummaryService.cs
index fc605fe3f..3edd90a7c 100644
--- a/web/Areas/Effort/Services/SchoolSummaryService.cs
+++ b/web/Areas/Effort/Services/SchoolSummaryService.cs
@@ -9,14 +9,11 @@ namespace Viper.Areas.Effort.Services;
 
 public class SchoolSummaryService : BaseReportService, ISchoolSummaryService
 {
-    private readonly ITermService _termService;
-
     public SchoolSummaryService(
         EffortDbContext context,
         ITermService termService)
-        : base(context)
+        : base(context, termService)
     {
-        _termService = termService;
     }
 
     public async Task<SchoolSummaryReport> GetSchoolSummaryReportAsync(
@@ -27,24 +24,19 @@ public async Task<SchoolSummaryReport> GetSchoolSummaryReportAsync(
         string? jobGroupId = null,
         CancellationToken ct = default)
     {
-        var rows = await ExecuteGeneralReportForDepartmentsAsync(termCode, departments, personId, role, jobGroupId, ct);
-        var term = await _termService.GetTermAsync(termCode, ct);
-        var filterDept = departments is { Count: 1 } ? departments[0] : null;
-
-        var academicYear = AcademicYearHelper.GetAcademicYearFromTermCode(termCode);
-        var clinicalMothraIds = await GetClinicalFacultyMothraIdsAsync(academicYear, ct);
+        var ctx = await LoadSingleTermContextAsync(termCode, departments, personId, role, jobGroupId, ct);
 
         var report = new SchoolSummaryReport
         {
             TermCode = termCode,
-            TermName = term?.TermName ?? _termService.GetTermName(termCode),
-            FilterDepartment = filterDept,
+            TermName = ctx.TermName,
+            FilterDepartment = ctx.FilterDepartment,
             FilterPerson = personId?.ToString(),
             FilterRole = role,
             FilterTitle = jobGroupId
         };
 
-        return BuildReport(report, rows, clinicalMothraIds);
+        return BuildReport(report, ctx.Rows, ctx.ClinicalMothraIds);
     }
 
     public async Task<SchoolSummaryReport> GetSchoolSummaryReportByYearAsync(
@@ -55,44 +47,33 @@ public async Task<SchoolSummaryReport> GetSchoolSummaryReportByYearAsync(
         string? jobGroupId = null,
         CancellationToken ct = default)
     {
-        var startYear = ParseAcademicYearStart(academicYear);
-        var filterDept = departments is { Count: 1 } ? departments[0] : null;
-        var termCodes = await GetTermCodesForAcademicYearAsync(startYear, ct);
+        var ctx = await LoadYearlyReportContextAsync(academicYear, departments, personId, role, jobGroupId, ct);
 
-        if (termCodes.Count == 0)
+        if (ctx.TermCodes.Count == 0)
         {
             return new SchoolSummaryReport
             {
                 TermName = academicYear,
                 AcademicYear = academicYear,
-                FilterDepartment = filterDept,
+                FilterDepartment = ctx.FilterDepartment,
                 FilterPerson = personId?.ToString(),
                 FilterRole = role,
                 FilterTitle = jobGroupId
             };
         }
 
-        var allRows = new List<TeachingActivityRow>();
-        foreach (var tc in termCodes)
-        {
-            var rows = await ExecuteGeneralReportForDepartmentsAsync(tc, departments, personId, role, jobGroupId, ct);
-            allRows.AddRange(rows);
-        }
-
-        var clinicalMothraIds = await GetClinicalFacultyMothraIdsAsync(academicYear, ct);
-
         var report = new SchoolSummaryReport
         {
-            TermCode = termCodes[0],
+            TermCode = ctx.TermCodes[0],
             TermName = academicYear,
             AcademicYear = academicYear,
-            FilterDepartment = filterDept,
+            FilterDepartment = ctx.FilterDepartment,
             FilterPerson = personId?.ToString(),
             FilterRole = role,
             FilterTitle = jobGroupId
         };
 
-        return BuildReport(report, allRows, clinicalMothraIds);
+        return BuildReport(report, ctx.Rows, ctx.ClinicalMothraIds);
     }
 
     private static SchoolSummaryReport BuildReport(
@@ -103,13 +84,7 @@ private static SchoolSummaryReport BuildReport(
             return report;
         }
 
-        var effortTypes = rows
-            .Where(r => !string.IsNullOrWhiteSpace(r.EffortTypeId))
-            .Select(r => r.EffortTypeId.Trim())
-            .Distinct()
-            .OrderBy(t => t)
-            .ToList();
-
+        var effortTypes = ExtractDistinctEffortTypes(rows);
         report.EffortTypes = effortTypes;
 
         // Group by department to build per-department aggregates
diff --git a/web/Areas/Effort/Services/TeachingActivityService.cs b/web/Areas/Effort/Services/TeachingActivityService.cs
index 538122279..17345fec7 100644
--- a/web/Areas/Effort/Services/TeachingActivityService.cs
+++ b/web/Areas/Effort/Services/TeachingActivityService.cs
@@ -9,14 +9,11 @@ namespace Viper.Areas.Effort.Services;
 
 public class TeachingActivityService : BaseReportService, ITeachingActivityService
 {
-    private readonly ITermService _termService;
-
     public TeachingActivityService(
         EffortDbContext context,
         ITermService termService)
-        : base(context)
+        : base(context, termService)
     {
-        _termService = termService;
     }
 
     public async Task<TeachingActivityReport> GetTeachingActivityReportAsync(
@@ -27,21 +24,19 @@ public async Task<TeachingActivityReport> GetTeachingActivityReportAsync(
         string? jobGroupId = null,
         CancellationToken ct = default)
     {
-        var rows = await ExecuteGeneralReportForDepartmentsAsync(termCode, departments, personId, role, jobGroupId, ct);
-        var term = await _termService.GetTermAsync(termCode, ct);
-        var filterDept = departments is { Count: 1 } ? departments[0] : null;
+        var ctx = await LoadSingleTermContextAsync(termCode, departments, personId, role, jobGroupId, ct);
 
         var report = new TeachingActivityReport
         {
             TermCode = termCode,
-            TermName = term?.TermName ?? _termService.GetTermName(termCode),
-            FilterDepartment = filterDept,
+            TermName = ctx.TermName,
+            FilterDepartment = ctx.FilterDepartment,
             FilterPerson = personId?.ToString(),
             FilterRole = role,
             FilterTitle = jobGroupId
         };
 
-        return BuildReport(report, rows);
+        return BuildReport(report, ctx.Rows);
     }
 
     public async Task<TeachingActivityReport> GetTeachingActivityReportByYearAsync(
@@ -52,45 +47,33 @@ public async Task<TeachingActivityReport> GetTeachingActivityReportByYearAsync(
         string? jobGroupId = null,
         CancellationToken ct = default)
     {
-        var startYear = ParseAcademicYearStart(academicYear);
-        var filterDept = departments is { Count: 1 } ? departments[0] : null;
-
-        // Resolve all term codes in this academic year from TermStatus
-        var termCodes = await GetTermCodesForAcademicYearAsync(startYear, ct);
+        var ctx = await LoadYearlyReportContextAsync(academicYear, departments, personId, role, jobGroupId, ct);
 
-        if (termCodes.Count == 0)
+        if (ctx.TermCodes.Count == 0)
         {
             return new TeachingActivityReport
             {
                 TermName = academicYear,
                 AcademicYear = academicYear,
-                FilterDepartment = filterDept,
+                FilterDepartment = ctx.FilterDepartment,
                 FilterPerson = personId?.ToString(),
                 FilterRole = role,
                 FilterTitle = jobGroupId
             };
         }
 
-        // Call SP for each term (and each department) and merge all rows
-        var allRows = new List<TeachingActivityRow>();
-        foreach (var tc in termCodes)
-        {
-            var rows = await ExecuteGeneralReportForDepartmentsAsync(tc, departments, personId, role, jobGroupId, ct);
-            allRows.AddRange(rows);
-        }
-
         var report = new TeachingActivityReport
         {
-            TermCode = termCodes[0],
+            TermCode = ctx.TermCodes[0],
             TermName = academicYear,
             AcademicYear = academicYear,
-            FilterDepartment = filterDept,
+            FilterDepartment = ctx.FilterDepartment,
             FilterPerson = personId?.ToString(),
             FilterRole = role,
             FilterTitle = jobGroupId
         };
 
-        return BuildReport(report, allRows);
+        return BuildReport(report, ctx.Rows);
     }
 
     private static TeachingActivityReport BuildReport(TeachingActivityReport report, List<TeachingActivityRow> rows)