From f64d1272fbf8d98c7787805f74e740d558a2a28e Mon Sep 17 00:00:00 2001
From: Dima K <dima1086@hotmail.com>
Date: Tue, 17 Feb 2026 12:45:55 -0800
Subject: [PATCH 1/4] feat(ui): wip on grouping filters for examiners

---
 .../app/components/Table/Header/Select.vue    | 35 +++++++++++++++-
 strr-examiner-web/app/pages/dashboard.vue     | 40 +++++++++++--------
 2 files changed, 57 insertions(+), 18 deletions(-)

diff --git a/strr-examiner-web/app/components/Table/Header/Select.vue b/strr-examiner-web/app/components/Table/Header/Select.vue
index 92333ee87..6f8b55b54 100644
--- a/strr-examiner-web/app/components/Table/Header/Select.vue
+++ b/strr-examiner-web/app/components/Table/Header/Select.vue
@@ -8,6 +8,8 @@ const props = defineProps<{
     label: string
     value: any
     disabled?: boolean
+    isChild?: boolean
+    childValues?: any[]
   }>
   sort?: TableSort
   searchable?: boolean
@@ -40,6 +42,37 @@ const clearFilter = () => {
   filterModel.value = props.default ?? []
 }
 
+// Parent-child toggle logic for grouped options
+const parentOptions = computed(() => props.options.filter(o => o.childValues?.length))
+const isAdjusting = ref(false)
+
+watch(filterModel, (newVal, oldVal) => {
+  if (isAdjusting.value || !parentOptions.value.length) { return }
+  isAdjusting.value = true
+
+  const prev = new Set(oldVal)
+  const result = new Set(newVal)
+
+  for (const { value: parentVal, childValues } of parentOptions.value) {
+    const parentChecked = result.has(parentVal) && !prev.has(parentVal)
+    const parentUnchecked = !result.has(parentVal) && prev.has(parentVal)
+    const allChildrenSelected = childValues.every(c => result.has(c))
+
+    if (parentChecked) {
+      childValues.forEach(c => result.add(c))
+    } else if (parentUnchecked) {
+      childValues.forEach(c => result.delete(c))
+    } else if (allChildrenSelected) {
+      result.add(parentVal)
+    } else {
+      result.delete(parentVal)
+    }
+  }
+
+  filterModel.value = [...result]
+  nextTick(() => { isAdjusting.value = false })
+})
+
 const filterColumnRef = ref<any>(null)
 const initialWidth = ref<string>('auto')
 
@@ -82,7 +115,6 @@ onMounted(() => {
         clear-search-on-close
       >
         <template #default="{ open }">
-          <!-- TODO: aria labels? -->
           <UButton
             ref="filterColumnRef"
             variant="select_menu_trigger"
@@ -125,6 +157,7 @@ onMounted(() => {
           <div
             v-else
             class="flex cursor-pointer items-center gap-1 p-1"
+            :class="{ 'pl-5': option.isChild }"
           >
             <UCheckbox
               :model-value="selected"
diff --git a/strr-examiner-web/app/pages/dashboard.vue b/strr-examiner-web/app/pages/dashboard.vue
index 96f17ad31..8dafc00f9 100644
--- a/strr-examiner-web/app/pages/dashboard.vue
+++ b/strr-examiner-web/app/pages/dashboard.vue
@@ -536,23 +536,29 @@ function handleColumnSort (column: string) {
 }
 
 // Limit status options to the active table to prevent mixed-status filters.
-const applicationStatusOptions: { label: string; value: any; disabled?: boolean }[] = [
-  { label: 'Application Status', value: undefined, disabled: true },
-  { label: 'Full Review', value: ApplicationStatus.FULL_REVIEW },
-  { label: 'Provisional Review', value: ApplicationStatus.PROVISIONAL_REVIEW },
-  { label: 'Payment Due', value: ApplicationStatus.PAYMENT_DUE },
-  { label: 'Provisional', value: ApplicationStatus.PROVISIONAL },
-  { label: 'Paid', value: ApplicationStatus.PAID },
-  { label: 'Additional Info Requested', value: ApplicationStatus.ADDITIONAL_INFO_REQUESTED },
-  { label: 'Provisionally Approved', value: ApplicationStatus.PROVISIONALLY_APPROVED },
-  { label: 'Declined', value: ApplicationStatus.DECLINED },
-  { label: 'Provisionally Declined', value: ApplicationStatus.PROVISIONALLY_DECLINED },
-  { label: 'Auto Approved', value: ApplicationStatus.AUTO_APPROVED },
-  { label: 'Full Review Approved', value: ApplicationStatus.FULL_REVIEW_APPROVED },
-  { label: 'NOC - Pending', value: ApplicationStatus.NOC_PENDING },
-  { label: 'NOC - Expired', value: ApplicationStatus.NOC_EXPIRED },
-  { label: 'NOC - Pending - Provisional', value: ApplicationStatus.PROVISIONAL_REVIEW_NOC_PENDING },
-  { label: 'NOC - Expired - Provisional', value: ApplicationStatus.PROVISIONAL_REVIEW_NOC_EXPIRED }
+const applicationStatusOptions: {
+  label: string; value: any; disabled?: boolean
+  isChild?: boolean; childValues?: any[]
+}[] = [
+  {
+    label: 'Active',
+    value: RegistrationStatus.ACTIVE,
+    childValues: [
+      ApplicationStatus.PROVISIONALLY_APPROVED,
+      ApplicationStatus.FULL_REVIEW_APPROVED,
+      ApplicationStatus.NOC_PENDING,
+      ApplicationStatus.NOC_EXPIRED,
+      ApplicationStatus.AUTO_APPROVED
+    ]
+  },
+  { label: 'Provisionally Approved', value: ApplicationStatus.PROVISIONALLY_APPROVED, isChild: true },
+  { label: 'Fully Approved', value: ApplicationStatus.FULL_REVIEW_APPROVED, isChild: true },
+  { label: 'NOC Pending', value: ApplicationStatus.NOC_PENDING, isChild: true },
+  { label: 'NOC Expired', value: ApplicationStatus.NOC_EXPIRED, isChild: true },
+  { label: 'Auto Approved', value: ApplicationStatus.AUTO_APPROVED, isChild: true },
+  { label: 'Expired', value: RegistrationStatus.EXPIRED },
+  { label: 'Suspended', value: RegistrationStatus.SUSPENDED },
+  { label: 'Cancelled', value: RegistrationStatus.CANCELLED }
 ]
 
 const registrationStatusOptions: { label: string; value: any; disabled?: boolean }[] = [

From 5f2c50e9701d2afc5934ef36cf52665400fd4536 Mon Sep 17 00:00:00 2001
From: Dima K <dima1086@hotmail.com>
Date: Thu, 19 Feb 2026 16:26:31 -0800
Subject: [PATCH 2/4] feat(ui): group Application status filters

---
 .../app/components/Table/Header/Select.vue    | 49 ++++++++++++-------
 strr-examiner-web/app/pages/dashboard.vue     | 40 ++++++++-------
 strr-examiner-web/app/stores/examiner.ts      |  5 +-
 3 files changed, 58 insertions(+), 36 deletions(-)

diff --git a/strr-examiner-web/app/components/Table/Header/Select.vue b/strr-examiner-web/app/components/Table/Header/Select.vue
index 6f8b55b54..1227cf8c9 100644
--- a/strr-examiner-web/app/components/Table/Header/Select.vue
+++ b/strr-examiner-web/app/components/Table/Header/Select.vue
@@ -8,8 +8,7 @@ const props = defineProps<{
     label: string
     value: any
     disabled?: boolean
-    isChild?: boolean
-    childValues?: any[]
+    childStatuses?: any[]
   }>
   sort?: TableSort
   searchable?: boolean
@@ -42,37 +41,52 @@ const clearFilter = () => {
   filterModel.value = props.default ?? []
 }
 
-// Parent-child toggle logic for grouped options
-const parentOptions = computed(() => props.options.filter(o => o.childValues?.length))
-const isAdjusting = ref(false)
+// parent-child toggle logic for grouped options
+const parentOptions = computed(() => props.options.filter(option => option.childStatuses?.length))
+const isUpdatingFilter = ref(false)
 
+// used to style the child statuses
+const isChildStatus = (value: any) => parentOptions.value.some(p => p.childStatuses?.includes(value))
+
+// Sync parent/child checkboxes: toggling a parent checks/unchecks all its children,
+// and checking all children automatically checks the parent (and vice versa).
+// isAdjusting prevents the watcher from re-triggering on its own updates.
 watch(filterModel, (newVal, oldVal) => {
-  if (isAdjusting.value || !parentOptions.value.length) { return }
-  isAdjusting.value = true
+  const parents = parentOptions.value
+  if (isUpdatingFilter.value || !parents.length) { return } // skip re-entrant calls and flat option lists
+  isUpdatingFilter.value = true
 
-  const prev = new Set(oldVal)
-  const result = new Set(newVal)
+  const prev = new Set(oldVal) // previous selection, used to detect what changed
+  const result = new Set(newVal) // mutable working copy of the new selection
 
-  for (const { value: parentVal, childValues } of parentOptions.value) {
+  for (const { value: parentVal, childStatuses } of parents) {
     const parentChecked = result.has(parentVal) && !prev.has(parentVal)
     const parentUnchecked = !result.has(parentVal) && prev.has(parentVal)
-    const allChildrenSelected = childValues.every(c => result.has(c))
+    const allChildrenSelected = childStatuses!.every(status => result.has(status))
 
     if (parentChecked) {
-      childValues.forEach(c => result.add(c))
+      childStatuses!.forEach(status => result.add(status)) // check all child statuses
     } else if (parentUnchecked) {
-      childValues.forEach(c => result.delete(c))
+      childStatuses!.forEach(status => result.delete(status)) // uncheck all child statuses
     } else if (allChildrenSelected) {
-      result.add(parentVal)
+      result.add(parentVal) // if all children checked - auto-check parent
     } else {
-      result.delete(parentVal)
+      result.delete(parentVal) // if some child unchecked - uncheck parent
     }
   }
 
   filterModel.value = [...result]
-  nextTick(() => { isAdjusting.value = false })
+  nextTick(() => { isUpdatingFilter.value = false }) // wait for DOM updates before re-enabling the watcher
 })
 
+const isPartiallySelected = (option: { childStatuses?: any[] }) => {
+  if (!option.childStatuses?.length) { return false }
+  const selected = new Set(filterModel.value)
+  const someSelected = option.childStatuses.some(status => selected.has(status))
+  const allSelected = option.childStatuses.every(status => selected.has(status))
+  return someSelected && !allSelected
+}
+
 const filterColumnRef = ref<any>(null)
 const initialWidth = ref<string>('auto')
 
@@ -157,10 +171,11 @@ onMounted(() => {
           <div
             v-else
             class="flex cursor-pointer items-center gap-1 p-1"
-            :class="{ 'pl-5': option.isChild }"
+            :class="{ 'pl-5': isChildStatus(option.value) }"
           >
             <UCheckbox
               :model-value="selected"
+              :indeterminate="isPartiallySelected(option)"
               class="pointer-events-none"
               :ui="{
                 base: 'h-4 w-4',
diff --git a/strr-examiner-web/app/pages/dashboard.vue b/strr-examiner-web/app/pages/dashboard.vue
index 8dafc00f9..9989f0862 100644
--- a/strr-examiner-web/app/pages/dashboard.vue
+++ b/strr-examiner-web/app/pages/dashboard.vue
@@ -537,28 +537,34 @@ function handleColumnSort (column: string) {
 
 // Limit status options to the active table to prevent mixed-status filters.
 const applicationStatusOptions: {
-  label: string; value: any; disabled?: boolean
-  isChild?: boolean; childValues?: any[]
+  label: string,
+  value: any,
+  disabled?: boolean,
+  childStatuses?: any[]
 }[] = [
   {
-    label: 'Active',
-    value: RegistrationStatus.ACTIVE,
-    childValues: [
-      ApplicationStatus.PROVISIONALLY_APPROVED,
-      ApplicationStatus.FULL_REVIEW_APPROVED,
+    label: 'Open',
+    value: 'OPEN',
+    childStatuses: [
+      ApplicationStatus.FULL_REVIEW,
       ApplicationStatus.NOC_PENDING,
-      ApplicationStatus.NOC_EXPIRED,
-      ApplicationStatus.AUTO_APPROVED
+      ApplicationStatus.NOC_EXPIRED
     ]
   },
-  { label: 'Provisionally Approved', value: ApplicationStatus.PROVISIONALLY_APPROVED, isChild: true },
-  { label: 'Fully Approved', value: ApplicationStatus.FULL_REVIEW_APPROVED, isChild: true },
-  { label: 'NOC Pending', value: ApplicationStatus.NOC_PENDING, isChild: true },
-  { label: 'NOC Expired', value: ApplicationStatus.NOC_EXPIRED, isChild: true },
-  { label: 'Auto Approved', value: ApplicationStatus.AUTO_APPROVED, isChild: true },
-  { label: 'Expired', value: RegistrationStatus.EXPIRED },
-  { label: 'Suspended', value: RegistrationStatus.SUSPENDED },
-  { label: 'Cancelled', value: RegistrationStatus.CANCELLED }
+  { label: 'Full Review', value: ApplicationStatus.FULL_REVIEW },
+  { label: 'NOC - Pending', value: ApplicationStatus.NOC_PENDING },
+  { label: 'NOC - Expired', value: ApplicationStatus.NOC_EXPIRED },
+  { label: 'Closed', value: ApplicationStatus.DECLINED },
+  {
+    label: 'Not Submitted',
+    value: 'NOT_SUBMITTED',
+    childStatuses: [
+      ApplicationStatus.PAYMENT_DUE,
+      ApplicationStatus.DRAFT
+    ]
+  },
+  { label: 'Payment Due', value: ApplicationStatus.PAYMENT_DUE },
+  { label: 'Draft', value: ApplicationStatus.DRAFT }
 ]
 
 const registrationStatusOptions: { label: string; value: any; disabled?: boolean }[] = [
diff --git a/strr-examiner-web/app/stores/examiner.ts b/strr-examiner-web/app/stores/examiner.ts
index ddaf2c474..f5d563a06 100644
--- a/strr-examiner-web/app/stores/examiner.ts
+++ b/strr-examiner-web/app/stores/examiner.ts
@@ -180,13 +180,14 @@ export const useExaminerStore = defineStore('strr/examiner-store', () => {
    */
   const processStatusFilters = (statusFilters: any[]) => {
     const regStatus: any[] = []
-    // Separate application and registration statuses
+    // separate application and registration statuses, excluding UI grouping labels
     const statusValue = statusFilters.filter((status) => {
       if (Object.values(RegistrationStatus).includes(status as any)) {
         regStatus.push(status)
         return false
       }
-      return true
+      // filter out any statuses that are not in ApplicationStatus (for grouping labels)
+      return Object.values(ApplicationStatus).includes(status as any)
     })
     // Start with default statuses list and these will be
     // provided if not status selected in filter

From 397cc3cbaa30c94aae3566ccc0bbcff325c7b55e Mon Sep 17 00:00:00 2001
From: Dima K <dima1086@hotmail.com>
Date: Thu, 19 Feb 2026 16:26:51 -0800
Subject: [PATCH 3/4] chore: update version

---
 strr-examiner-web/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/strr-examiner-web/package.json b/strr-examiner-web/package.json
index a6b6d0d38..3d7245e26 100644
--- a/strr-examiner-web/package.json
+++ b/strr-examiner-web/package.json
@@ -2,7 +2,7 @@
   "name": "strr-examiner-web",
   "private": true,
   "type": "module",
-  "version": "0.2.15",
+  "version": "0.2.16",
   "scripts": {
     "build-check": "nuxt build",
     "build": "nuxt generate",

From 0f1cbebd47d6080fd2cf1d17e4551cedd055750e Mon Sep 17 00:00:00 2001
From: Dima K <dima1086@hotmail.com>
Date: Thu, 19 Feb 2026 16:32:29 -0800
Subject: [PATCH 4/4] chore: cleanup and comments

---
 strr-examiner-web/app/components/Table/Header/Select.vue | 3 ++-
 strr-examiner-web/app/stores/examiner.ts                 | 2 +-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/strr-examiner-web/app/components/Table/Header/Select.vue b/strr-examiner-web/app/components/Table/Header/Select.vue
index 1227cf8c9..c32d76dd3 100644
--- a/strr-examiner-web/app/components/Table/Header/Select.vue
+++ b/strr-examiner-web/app/components/Table/Header/Select.vue
@@ -50,7 +50,7 @@ const isChildStatus = (value: any) => parentOptions.value.some(p => p.childStatu
 
 // Sync parent/child checkboxes: toggling a parent checks/unchecks all its children,
 // and checking all children automatically checks the parent (and vice versa).
-// isAdjusting prevents the watcher from re-triggering on its own updates.
+// isUpdatingFilter prevents the watcher from re-triggering on its own updates.
 watch(filterModel, (newVal, oldVal) => {
   const parents = parentOptions.value
   if (isUpdatingFilter.value || !parents.length) { return } // skip re-entrant calls and flat option lists
@@ -79,6 +79,7 @@ watch(filterModel, (newVal, oldVal) => {
   nextTick(() => { isUpdatingFilter.value = false }) // wait for DOM updates before re-enabling the watcher
 })
 
+// used to check if any child statuses selected to set indeterminate state for ui checkbox
 const isPartiallySelected = (option: { childStatuses?: any[] }) => {
   if (!option.childStatuses?.length) { return false }
   const selected = new Set(filterModel.value)
diff --git a/strr-examiner-web/app/stores/examiner.ts b/strr-examiner-web/app/stores/examiner.ts
index f5d563a06..a6644c146 100644
--- a/strr-examiner-web/app/stores/examiner.ts
+++ b/strr-examiner-web/app/stores/examiner.ts
@@ -180,7 +180,7 @@ export const useExaminerStore = defineStore('strr/examiner-store', () => {
    */
   const processStatusFilters = (statusFilters: any[]) => {
     const regStatus: any[] = []
-    // separate application and registration statuses, excluding UI grouping labels
+    // Separate application and registration statuses, excluding UI grouping labels
     const statusValue = statusFilters.filter((status) => {
       if (Object.values(RegistrationStatus).includes(status as any)) {
         regStatus.push(status)