From 743e717970796dce4d6a60249255f835c3773ebd Mon Sep 17 00:00:00 2001
From: Rex Lorenzo <rexlorenzo@gmail.com>
Date: Fri, 24 Apr 2026 01:00:41 -0700
Subject: [PATCH 01/14] refactor(emergency-contact): extract shared page shell

Hoist breadcrumb, loading spinner, and not-found banner from
EmergencyContactForm.vue and EmergencyContactView.vue into a new
EmergencyContactPageShell.vue. Each page now owns only its h1 and
body content. Pure template refactor; no runtime change.
---
 .../components/EmergencyContactPageShell.vue  | 39 +++++++++++++++++++
 .../pages/EmergencyContactForm.vue            | 33 ++++------------
 .../pages/EmergencyContactView.vue            | 34 ++++------------
 3 files changed, 53 insertions(+), 53 deletions(-)
 create mode 100644 VueApp/src/Students/EmergencyContact/components/EmergencyContactPageShell.vue

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>

From 35c7b2eada001b7f58273d46a9cc9eeb085b386e Mon Sep 17 00:00:00 2001
From: Rex Lorenzo <rexlorenzo@gmail.com>
Date: Fri, 24 Apr 2026 01:04:25 -0700
Subject: [PATCH 02/14] refactor(effort): extract DialogSubmitActions component

AddCourseEffortDialog and EffortRecordEditDialog shared a Cancel +
primary-action q-card-actions block with an identical #loading slot.
Hoist into DialogSubmitActions.vue parameterized by submitLabel and
isSaving. Other Effort dialogs still inline the pattern; migrate as
they are touched.
---
 .../components/AddCourseEffortDialog.vue      | 28 ++++-----------
 .../Effort/components/DialogSubmitActions.vue | 35 +++++++++++++++++++
 .../components/EffortRecordEditDialog.vue     | 28 ++++-----------
 3 files changed, 49 insertions(+), 42 deletions(-)
 create mode 100644 VueApp/src/Effort/components/DialogSubmitActions.vue

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/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/EffortRecordEditDialog.vue b/VueApp/src/Effort/components/EffortRecordEditDialog.vue
index fcdaa09c3..1819d47d4 100644
--- a/VueApp/src/Effort/components/EffortRecordEditDialog.vue
+++ b/VueApp/src/Effort/components/EffortRecordEditDialog.vue
@@ -127,27 +127,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="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,6 +142,7 @@ 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 { recordService } from "../services/record-service"
 import type { EffortTypeOptionDto, RoleOptionDto, InstructorEffortRecordDto } from "../types"
 import { effortValueRules, requiredRule, notesMaxHint } from "../validation"

From f6b717f94ccaacf6eb82e66a511f015af4be5b66 Mon Sep 17 00:00:00 2001
From: Rex Lorenzo <rexlorenzo@gmail.com>
Date: Fri, 24 Apr 2026 01:11:31 -0700
Subject: [PATCH 03/14] refactor(effort): extract PercentAssignmentFormFields

PercentAssignmentAddDialog and PercentAssignmentEditDialog shared a
165-line q-select/q-input/q-checkbox form body. Hoist into
PercentAssignmentFormFields.vue, v-modeled on the form state the
usePercentageForm composable already centralized. Each dialog now
owns only its title, save logic, banner variants, and footer. Also
migrate both footers to DialogSubmitActions. PercentageFormState
and TypeOption are re-exported from the composable so the new
component can type its props.
---
 .../components/PercentAssignmentAddDialog.vue | 196 ++----------------
 .../PercentAssignmentEditDialog.vue           | 196 ++----------------
 .../PercentAssignmentFormFields.vue           | 179 ++++++++++++++++
 .../Effort/composables/use-percentage-form.ts |   1 +
 4 files changed, 214 insertions(+), 358 deletions(-)
 create mode 100644 VueApp/src/Effort/components/PercentAssignmentFormFields.vue

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..6edbb6414
--- /dev/null
+++ b/VueApp/src/Effort/components/PercentAssignmentFormFields.vue
@@ -0,0 +1,179 @@
+<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
+        :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/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 }

From 04b2d304c5369cfb8e6f9fe558da76f326e74e59 Mon Sep 17 00:00:00 2001
From: Rex Lorenzo <rexlorenzo@gmail.com>
Date: Fri, 24 Apr 2026 16:31:17 -0700
Subject: [PATCH 04/14] refactor(effort): extract EffortReportPage layout shell

Consolidates the h1 + ReportFilterForm + loading spinner + ReportLayout
header/ExportToolbar + empty-state boilerplate that was duplicated
across all 9 standard Effort report pages into a single wrapper, so
individual pages only define their table content.
---
 .../Effort/components/EffortReportPage.vue    |  85 +++++
 VueApp/src/Effort/pages/DeptSummary.vue       | 265 ++++++---------
 VueApp/src/Effort/pages/EvalDetail.vue        | 247 ++++++--------
 VueApp/src/Effort/pages/EvalSummary.vue       | 153 +++------
 VueApp/src/Effort/pages/MeritAverage.vue      | 291 +++++++---------
 VueApp/src/Effort/pages/MeritDetail.vue       | 291 +++++++---------
 VueApp/src/Effort/pages/MeritSummary.vue      | 229 +++++--------
 VueApp/src/Effort/pages/SchoolSummary.vue     | 296 ++++++++--------
 .../Effort/pages/TeachingActivityGrouped.vue  | 320 ++++++++----------
 .../pages/TeachingActivityIndividual.vue      | 285 +++++++---------
 10 files changed, 1088 insertions(+), 1374 deletions(-)
 create mode 100644 VueApp/src/Effort/components/EffortReportPage.vue

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/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/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()
 }

From 1ade438c632d61da4e2256f95fa034c96d07ca01 Mon Sep 17 00:00:00 2001
From: Rex Lorenzo <rexlorenzo@gmail.com>
Date: Fri, 24 Apr 2026 16:41:15 -0700
Subject: [PATCH 05/14] refactor(effort): extract EffortRecordSharedFields from
 dialogs

Share the Role / Effort Value / Notes / warning + error banner block
between EffortRecordAddDialog and EffortRecordEditDialog, and route the
Add dialog's footer through the existing DialogSubmitActions component.
---
 .../components/EffortRecordAddDialog.vue      | 99 ++++---------------
 .../components/EffortRecordEditDialog.vue     | 71 +++----------
 .../components/EffortRecordSharedFields.vue   | 80 +++++++++++++++
 3 files changed, 113 insertions(+), 137 deletions(-)
 create mode 100644 VueApp/src/Effort/components/EffortRecordSharedFields.vue

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 1819d47d4..ae8251b4b 100644
--- a/VueApp/src/Effort/components/EffortRecordEditDialog.vue
+++ b/VueApp/src/Effort/components/EffortRecordEditDialog.vue
@@ -66,64 +66,18 @@
                         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"
-                    />
-
-                    <!-- Effort Value -->
-                    <q-input
-                        v-model.number="effortValue"
-                        :label="effortLabel"
-                        type="number"
-                        dense
-                        outlined
-                        min="0"
-                        :rules="effortValueRules"
-                        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"
                     />
-
-                    <!-- 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>
 
@@ -143,9 +97,10 @@ 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>

From df812a3a87b189d87f89e92702f7e39776c6d0fd Mon Sep 17 00:00:00 2001
From: Rex Lorenzo <rexlorenzo@gmail.com>
Date: Fri, 24 Apr 2026 16:47:51 -0700
Subject: [PATCH 06/14] refactor(effort): extract InstructorPageShell for
 breadcrumbs and states

Share the Instructors breadcrumb, loading spinner, and error banner
between InstructorDetail and InstructorEdit via a slot-based shell.
---
 .../Effort/components/InstructorPageShell.vue |  54 +++++++
 VueApp/src/Effort/pages/InstructorDetail.vue  | 104 +++++--------
 VueApp/src/Effort/pages/InstructorEdit.vue    | 146 +++++++-----------
 3 files changed, 151 insertions(+), 153 deletions(-)
 create mode 100644 VueApp/src/Effort/components/InstructorPageShell.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/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..9deae9231 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">
@@ -312,7 +284,7 @@ import type {
     PercentAssignTypeDto,
     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"

From 0b16b2fed4cd603c938dfdbd56b313f07d2eee87 Mon Sep 17 00:00:00 2001
From: Rex Lorenzo <rexlorenzo@gmail.com>
Date: Fri, 24 Apr 2026 16:54:11 -0700
Subject: [PATCH 07/14] refactor(effort): extract AsyncOperationDialog shell
 for preview dialogs

Share the dialog scaffold (close affordance, title/subtitle, loading
spinner, progress bar, and error state) between HarvestDialog,
PercentRolloverDialog, and ClinicalImportDialog. Per-dialog preview
bodies and action buttons stay in the consumers.
---
 .../components/AsyncOperationDialog.vue       |  150 +++
 .../components/ClinicalImportDialog.vue       |  365 +++---
 .../src/Effort/components/HarvestDialog.vue   | 1040 ++++++++---------
 .../components/PercentRolloverDialog.vue      |  367 +++---
 4 files changed, 924 insertions(+), 998 deletions(-)
 create mode 100644 VueApp/src/Effort/components/AsyncOperationDialog.vue

diff --git a/VueApp/src/Effort/components/AsyncOperationDialog.vue b/VueApp/src/Effort/components/AsyncOperationDialog.vue
new file mode 100644
index 000000000..f7e17b760
--- /dev/null
+++ b/VueApp/src/Effort/components/AsyncOperationDialog.vue
@@ -0,0 +1,150 @@
+<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
+            class="async-operation-dialog-card"
+            :style="{ maxWidth }"
+        >
+            <q-btn
+                icon="close"
+                flat
+                round
+                dense
+                class="absolute-top-right q-ma-sm async-operation-dialog-close"
+                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>
+
+<style scoped>
+.async-operation-dialog-card {
+    width: 100%;
+    position: relative;
+}
+
+.async-operation-dialog-close {
+    z-index: 1;
+}
+</style>
diff --git a/VueApp/src/Effort/components/ClinicalImportDialog.vue b/VueApp/src/Effort/components/ClinicalImportDialog.vue
index d8d216598..0074458da 100644
--- a/VueApp/src/Effort/components/ClinicalImportDialog.vue
+++ b/VueApp/src/Effort/components/ClinicalImportDialog.vue
@@ -1,237 +1,163 @@
 <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"
+                    text-color="dark"
+                    :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 +167,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/HarvestDialog.vue b/VueApp/src/Effort/components/HarvestDialog.vue
index fac227558..44cba6d07 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">
+                                    <StatusBadge
+                                        :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">
+                                    <StatusBadge
+                                        :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">
+                                    <StatusBadge
+                                        :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">
+                                    <StatusBadge
+                                        :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">
+                                    <StatusBadge
+                                        :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">
+                                    <StatusBadge
+                                        :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">
+                                    <StatusBadge
+                                        :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">
+                                    <StatusBadge
+                                        :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">
@@ -604,8 +525,9 @@ import { useQuasar } from "quasar"
 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 StatusBanner from "@/components/StatusBanner.vue"
+import AsyncOperationDialog from "./AsyncOperationDialog.vue"
 import { inflect } from "inflection"
 import ClinicalEffortPreviewTable from "./ClinicalEffortPreviewTable.vue"
 
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"

From 39f0c8a77ec43473526b28207076bc6a042af93d Mon Sep 17 00:00:00 2001
From: Rex Lorenzo <rexlorenzo@gmail.com>
Date: Fri, 24 Apr 2026 16:57:22 -0700
Subject: [PATCH 08/14] refactor(effort): extract TermTable for term selection
 rows

Share the desktop table + mobile list rendering across unopened / open /
closed term sections instead of inlining three near-identical q-table
blocks.
---
 VueApp/src/Effort/components/TermTable.vue |  94 ++++++++
 VueApp/src/Effort/pages/TermSelection.vue  | 246 +++------------------
 2 files changed, 127 insertions(+), 213 deletions(-)
 create mode 100644 VueApp/src/Effort/components/TermTable.vue

diff --git a/VueApp/src/Effort/components/TermTable.vue b/VueApp/src/Effort/components/TermTable.vue
new file mode 100644
index 000000000..abfc60513
--- /dev/null
+++ b/VueApp/src/Effort/components/TermTable.vue
@@ -0,0 +1,94 @@
+<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">
+            <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/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"
 

From 95b26edc4d2ae7f9566a8ae277b2684adae52e3d Mon Sep 17 00:00:00 2001
From: Rex Lorenzo <rexlorenzo@gmail.com>
Date: Fri, 24 Apr 2026 17:11:42 -0700
Subject: [PATCH 09/14] refactor(effort): centralize report context loading in
 BaseReportService

Move ITermService injection into BaseReportService and add shared
helpers (LoadSingleTermContextAsync, LoadYearlyReportContextAsync,
ExtractDistinctEffortTypes) so DeptSummary, SchoolSummary, and
TeachingActivity services no longer hand-roll the same row +
clinical-faculty + term-name plumbing.
---
 test/Effort/BaseReportServiceTests.cs         |  2 +-
 test/Effort/ExcelGenerationTests.cs           |  4 +-
 .../Effort/Services/BaseReportService.cs      | 89 ++++++++++++++++++-
 .../Effort/Services/ClinicalEffortService.cs  |  3 +-
 .../Services/ClinicalScheduleService.cs       |  4 +-
 .../Effort/Services/DeptSummaryService.cs     | 49 +++-------
 .../Services/EvaluationReportService.cs       |  4 +-
 .../Effort/Services/MeritMultiYearService.cs  |  3 +-
 .../Effort/Services/MeritReportService.cs     |  4 +-
 .../Effort/Services/MeritSummaryService.cs    |  4 +-
 .../Effort/Services/SchoolSummaryService.cs   | 49 +++-------
 .../Services/TeachingActivityService.cs       | 39 +++-----
 12 files changed, 134 insertions(+), 120 deletions(-)

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..70fa93746 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;
     }
 
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)

From b9cedb4494db9f0b7791833f10db4c679bf8c60f Mon Sep 17 00:00:00 2001
From: Rex Lorenzo <rexlorenzo@gmail.com>
Date: Fri, 24 Apr 2026 17:48:39 -0700
Subject: [PATCH 10/14] refactor(effort): extract CalculateWeightedAverage in
 EvaluationReportService

Replace four near-identical N5..N1 weighted-average + divide-by-zero
guards in the summary and detail builders with a single helper.
---
 .../Services/EvaluationReportService.cs       | 47 ++++++-------------
 1 file changed, 15 insertions(+), 32 deletions(-)

diff --git a/web/Areas/Effort/Services/EvaluationReportService.cs b/web/Areas/Effort/Services/EvaluationReportService.cs
index 70fa93746..f9913a2a4 100644
--- a/web/Areas/Effort/Services/EvaluationReportService.cs
+++ b/web/Areas/Effort/Services/EvaluationReportService.cs
@@ -332,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)
                 };
             })
@@ -370,6 +356,17 @@ 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 totalPts = rows.Sum(r => r.N5 * 5m + r.N4 * 4m + r.N3 * 3m + r.N2 * 2m + r.N1 * 1m);
+        var totalResponses = rows.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)
@@ -403,11 +400,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);
@@ -420,26 +412,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();

From 1ff17c2c5d7482499486b47264fbcceab398f42f Mon Sep 17 00:00:00 2001
From: Rex Lorenzo <rexlorenzo@gmail.com>
Date: Fri, 24 Apr 2026 23:18:27 -0700
Subject: [PATCH 11/14] fix(effort): restore StatusBanner import in
 InstructorEdit

The InstructorPageShell extraction (refactor 4601108d) replaced the
StatusBanner import in InstructorEdit.vue, but the template still
references StatusBanner three times for save/error feedback. Vue logged
"Failed to resolve component: StatusBanner" warnings and rendered those
banners blank.
---
 VueApp/src/Effort/pages/InstructorEdit.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/VueApp/src/Effort/pages/InstructorEdit.vue b/VueApp/src/Effort/pages/InstructorEdit.vue
index 9deae9231..90c40371d 100644
--- a/VueApp/src/Effort/pages/InstructorEdit.vue
+++ b/VueApp/src/Effort/pages/InstructorEdit.vue
@@ -284,6 +284,7 @@ import type {
     PercentAssignTypeDto,
     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"

From ee16b44e37538fe5cd5c13633676ec50bbdd1d65 Mon Sep 17 00:00:00 2001
From: Rex Lorenzo <rexlorenzo@gmail.com>
Date: Mon, 4 May 2026 23:38:58 -0700
Subject: [PATCH 12/14] chore(quality): materialize CalculateWeightedAverage
 rows once
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Carry-over from the analyzer-driven cleanup batch (PR 3). The materialization fix targets the helper extracted in d12711e0 — that helper doesn't exist in PR 3's base, so the fix moves here.
---
 web/Areas/Effort/Services/EvaluationReportService.cs | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/web/Areas/Effort/Services/EvaluationReportService.cs b/web/Areas/Effort/Services/EvaluationReportService.cs
index f9913a2a4..8c9d5f633 100644
--- a/web/Areas/Effort/Services/EvaluationReportService.cs
+++ b/web/Areas/Effort/Services/EvaluationReportService.cs
@@ -362,8 +362,9 @@ private static EvalSummaryReport BuildEvalSummaryReport(EvalSummaryReport report
     /// </summary>
     private static decimal CalculateWeightedAverage(IEnumerable<EvalRawRow> rows)
     {
-        var totalPts = rows.Sum(r => r.N5 * 5m + r.N4 * 4m + r.N3 * 3m + r.N2 * 2m + r.N1 * 1m);
-        var totalResponses = rows.Sum(r => r.N5 + r.N4 + r.N3 + r.N2 + r.N1);
+        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;
     }
 

From 2b5c8ff658c252481c9bfccb9360136ab4c06b11 Mon Sep 17 00:00:00 2001
From: Rex Lorenzo <rexlorenzo@gmail.com>
Date: Tue, 26 May 2026 09:06:00 -0700
Subject: [PATCH 13/14] fix(effort): restore DBNull guards for nullable SQL
 params

CA1508 (commit b9889d80) removed `(object?) ?? DBNull.Value` guards
on @PersonId/@Role in raw SqlCommand calls, treating them as dead
null-checks. For nullable value types, AddWithValue(null) sends no
value at all rather than DBNull, so the eval summary/detail and
merit detail endpoints returned 500 ("expects the parameter
'@PersonId', which was not supplied") whenever the UI omitted the
filter. Switch to `personId.HasValue ? personId.Value : DBNull.Value`
(already used at MeritReportService:559) so CA1508 stays quiet.
---
 web/Areas/Effort/Services/EvaluationReportService.cs | 6 ++++--
 web/Areas/Effort/Services/MeritReportService.cs      | 2 +-
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/web/Areas/Effort/Services/EvaluationReportService.cs b/web/Areas/Effort/Services/EvaluationReportService.cs
index 8c9d5f633..1ee1774ed 100644
--- a/web/Areas/Effort/Services/EvaluationReportService.cs
+++ b/web/Areas/Effort/Services/EvaluationReportService.cs
@@ -277,11 +277,13 @@ AND p.EffortDept <> 'OTH'
                 AND quant_mean > 0
             ORDER BY p.EffortDept, p.LastName, p.FirstName, course_subj_code, course_crse_numb";
 
+        var roleId = ParseRoleFilter(role);
+
         await using var command = new SqlCommand(sql, connection);
         command.Parameters.AddWithValue("@TermCode", termCode);
         command.Parameters.AddWithValue("@Department", (object?)department ?? DBNull.Value);
-        command.Parameters.AddWithValue("@PersonId", personId);
-        command.Parameters.AddWithValue("@Role", ParseRoleFilter(role));
+        command.Parameters.AddWithValue("@PersonId", personId.HasValue ? personId.Value : DBNull.Value);
+        command.Parameters.AddWithValue("@Role", roleId.HasValue ? roleId.Value : DBNull.Value);
 
         await using var reader = await command.ExecuteReaderAsync(ct);
         while (await reader.ReadAsync(ct))
diff --git a/web/Areas/Effort/Services/MeritReportService.cs b/web/Areas/Effort/Services/MeritReportService.cs
index 0253d0eb8..0e21e118e 100644
--- a/web/Areas/Effort/Services/MeritReportService.cs
+++ b/web/Areas/Effort/Services/MeritReportService.cs
@@ -268,7 +268,7 @@ private async Task<List<MeritDetailRow>> ExecuteMeritReportSpAsync(
 
         await using var command = new SqlCommand("[effort].[sp_merit_report]", connection);
         command.CommandType = CommandType.StoredProcedure;
-        command.Parameters.AddWithValue("@PersonId", personId);
+        command.Parameters.AddWithValue("@PersonId", personId.HasValue ? personId.Value : DBNull.Value);
         command.Parameters.AddWithValue("@StartTermCode", startTermCode);
         command.Parameters.AddWithValue("@EndTermCode", endTermCode);
         command.Parameters.AddWithValue("@Department", (object?)department ?? DBNull.Value);

From 8d5deb72b206c8232c0b3fc9475fbcdc14307245 Mon Sep 17 00:00:00 2001
From: Rex Lorenzo <rexlorenzo@gmail.com>
Date: Tue, 26 May 2026 10:14:34 -0700
Subject: [PATCH 14/14] fix(effort): polish Percent Rollover preview UI

- Drop the three q-expansion-item background tints in PercentRolloverDialog;
  section differentiation now comes from the header icon + label alone,
  resolving a brand-color regression flagged in PR review.
- TermManagement: hide-bottom-space on the boundary-year q-input so the
  reserved validation-message area no longer pushes the Reset / Preview
  Rollover buttons out of vertical alignment.
- Swap the inline "changing the year is unusual" caption for a
  StatusBanner type="warning" live="assertive" per project banner guidance.
---
 .../src/Effort/components/PercentRolloverDialog.vue  | 12 ++++++------
 VueApp/src/Effort/pages/TermManagement.vue           | 10 +++++++---
 2 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/VueApp/src/Effort/components/PercentRolloverDialog.vue b/VueApp/src/Effort/components/PercentRolloverDialog.vue
index 8dbe4acba..3351c09f9 100644
--- a/VueApp/src/Effort/components/PercentRolloverDialog.vue
+++ b/VueApp/src/Effort/components/PercentRolloverDialog.vue
@@ -65,7 +65,7 @@
                     </div>
                 </StatusBanner>
 
-                <!-- Will be Rolled Forward Section (cyan, expanded by default) -->
+                <!-- Will be Rolled Forward Section (expanded by default) -->
                 <q-expansion-item
                     v-if="preview.assignments.length > 0"
                     default-opened
@@ -90,12 +90,12 @@
                             </div>
                         </div>
                     </template>
-                    <div class="bg-cyan-1 q-pa-sm">
+                    <div class="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) -->
+                <!-- Already Rolled Section (collapsed by default, shows first 10 with Show all option) -->
                 <q-expansion-item
                     v-if="preview.existingAssignments.length > 0"
                     class="q-mb-md"
@@ -118,12 +118,12 @@
                             </div>
                         </div>
                     </template>
-                    <div class="bg-grey-2 q-pa-sm">
+                    <div class="q-pa-sm">
                         <RolloverAssignmentTable :rows="preview.existingAssignments" />
                     </div>
                 </q-expansion-item>
 
-                <!-- Excluded by Audit Section (orange, collapsed by default) -->
+                <!-- Excluded by Audit Section (collapsed by default) -->
                 <q-expansion-item
                     v-if="preview.excludedByAudit?.length > 0"
                     class="q-mb-md"
@@ -146,7 +146,7 @@
                             </div>
                         </div>
                     </template>
-                    <div class="bg-orange-1 q-pa-sm">
+                    <div class="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.
diff --git a/VueApp/src/Effort/pages/TermManagement.vue b/VueApp/src/Effort/pages/TermManagement.vue
index 2f3fdcac5..f968599b9 100644
--- a/VueApp/src/Effort/pages/TermManagement.vue
+++ b/VueApp/src/Effort/pages/TermManagement.vue
@@ -66,6 +66,7 @@
                                 label="Boundary Year"
                                 dense
                                 outlined
+                                hide-bottom-space
                                 style="max-width: 150px"
                                 :rules="[yearRule]"
                             />
@@ -90,12 +91,14 @@
                             @click="openRolloverDialog"
                         />
                     </div>
-                    <div
+                    <StatusBanner
                         v-if="rolloverYearOverride"
-                        class="text-caption text-warning q-mt-xs"
+                        type="warning"
+                        live="assertive"
+                        class="q-mt-sm"
                     >
                         Changing the year from the default is unusual. Only do this if you need to run a past rollover.
-                    </div>
+                    </StatusBanner>
                 </div>
             </q-slide-transition>
 
@@ -580,6 +583,7 @@ import { useDateFunctions } from "@/composables/DateFunctions"
 import HarvestDialog from "../components/HarvestDialog.vue"
 import PercentRolloverDialog from "../components/PercentRolloverDialog.vue"
 import ClinicalImportDialog from "../components/ClinicalImportDialog.vue"
+import StatusBanner from "@/components/StatusBanner.vue"
 import type { TermDto, AvailableTermDto } from "../types"
 import type { QTableColumn } from "quasar"