From ad570d529c763fb5d29132c744942ccbee60bc2b Mon Sep 17 00:00:00 2001
From: akabdulhanif <abdulkhader.abdulhanif@gmail.com>
Date: Thu, 15 Jan 2026 07:30:33 +0000
Subject: [PATCH 1/9] feat(ui): add Delete actions for catalog/group/control
 and fix button event forwarding

---
 src/views/catalog/CatalogControl.vue | 10 ++++++++++
 src/views/catalog/CatalogGroup.vue   | 10 ++++++++++
 src/views/catalog/CatalogView.vue    |  1 -
 3 files changed, 20 insertions(+), 1 deletion(-)

diff --git a/src/views/catalog/CatalogControl.vue b/src/views/catalog/CatalogControl.vue
index c46a359e..2ae4f9e6 100644
--- a/src/views/catalog/CatalogControl.vue
+++ b/src/views/catalog/CatalogControl.vue
@@ -26,11 +26,14 @@
         >
         <TertiaryButton
           class="bg-white hover:bg-zinc-100 dark:bg-slate-800 dark:hover:bg-slate-600"
+<<<<<<< HEAD
           @click.stop="showEdit = true"
           >Edit</TertiaryButton
         >
         <TertiaryButton
           class="bg-white hover:bg-zinc-100 dark:bg-slate-800 dark:hover:bg-slate-600"
+=======
+>>>>>>> 1a10cc4 (feat(ui): add Delete actions for catalog/group/control and fix button event forwarding)
           @click.stop="deleteControl()"
           >Delete</TertiaryButton
         >
@@ -154,10 +157,14 @@ const guidance = ref<Part | undefined>(getPart('guidance'));
 const router = useRouter();
 const toast = useToast();
 const { confirmDeleteDialog } = useDeleteConfirmationDialog();
+<<<<<<< HEAD
 const emit = defineEmits<{
   (e: 'deleted', id: string): void;
   (e: 'updated', id: string): void;
 }>();
+=======
+const emit = defineEmits<{ (e: 'deleted', id: string): void }>();
+>>>>>>> 1a10cc4 (feat(ui): add Delete actions for catalog/group/control and fix button event forwarding)
 const { execute: del } = useDataApi<void>(
   '/api/oscal/catalogs',
   {},
@@ -215,10 +222,13 @@ async function deleteControl() {
   );
 }
 
+<<<<<<< HEAD
 function onUpdated(updated: Control) {
   emit('updated', updated.id);
 }
 
+=======
+>>>>>>> 1a10cc4 (feat(ui): add Delete actions for catalog/group/control and fix button event forwarding)
 function onChildDeleted(id: string) {
   const idx = controls.value?.findIndex((c) => c.id === id) ?? -1;
   if (idx >= 0 && controls.value) {
diff --git a/src/views/catalog/CatalogGroup.vue b/src/views/catalog/CatalogGroup.vue
index f457189b..db3444b2 100644
--- a/src/views/catalog/CatalogGroup.vue
+++ b/src/views/catalog/CatalogGroup.vue
@@ -14,6 +14,7 @@
         </div>
         <TertiaryButton
           class="bg-white hover:bg-zinc-100 dark:bg-slate-800 dark:hover:bg-slate-600"
+<<<<<<< HEAD
           @click.stop="showEdit = true"
           >Edit</TertiaryButton
         >
@@ -34,6 +35,8 @@
         >
         <TertiaryButton
           class="bg-white hover:bg-zinc-100 dark:bg-slate-800 dark:hover:bg-slate-600"
+=======
+>>>>>>> 1a10cc4 (feat(ui): add Delete actions for catalog/group/control and fix button event forwarding)
           @click.stop="deleteGroup()"
           >Delete</TertiaryButton
         >
@@ -121,10 +124,14 @@ const props = defineProps<{
   catalog: Catalog;
   group: Group;
 }>();
+<<<<<<< HEAD
 const emit = defineEmits<{
   (e: 'deleted', id: string): void;
   (e: 'updated', id: string): void;
 }>();
+=======
+const emit = defineEmits<{ (e: 'deleted', id: string): void }>();
+>>>>>>> 1a10cc4 (feat(ui): add Delete actions for catalog/group/control and fix button event forwarding)
 const toast = useToast();
 const { confirmDeleteDialog } = useDeleteConfirmationDialog();
 const { execute: del } = useDataApi<void>(
@@ -203,8 +210,11 @@ async function deleteGroup() {
     { itemName: props.group.id, itemType: 'group' },
   );
 }
+<<<<<<< HEAD
 
 function onUpdated(updated: Group) {
   emit('updated', updated.id);
 }
+=======
+>>>>>>> 1a10cc4 (feat(ui): add Delete actions for catalog/group/control and fix button event forwarding)
 </script>
diff --git a/src/views/catalog/CatalogView.vue b/src/views/catalog/CatalogView.vue
index 3b369fe1..6a48087b 100644
--- a/src/views/catalog/CatalogView.vue
+++ b/src/views/catalog/CatalogView.vue
@@ -138,7 +138,6 @@ async function deleteCatalog(uuid: string, title: string) {
 function deleteCurrentCatalog() {
   deleteCatalog(catalogId.value, catalog.value?.metadata?.title || '');
 }
-
 function reloadLists() {
   groupExecute(`/api/oscal/catalogs/${catalogId.value}/groups`);
   catalogExecute(`/api/oscal/catalogs/${catalogId.value}/controls`);

From c759ae20893cf8f2c870dfefadad958e74b6cc5a Mon Sep 17 00:00:00 2001
From: akabdulhanif <abdulkhader.abdulhanif@gmail.com>
Date: Thu, 15 Jan 2026 10:16:33 +0000
Subject: [PATCH 2/9] ci: enable PR comments using pull_request_target with
 write permissions

---
 .github/workflows/pull-request.yml | 21 +++++++++++++++++++++
 1 file changed, 21 insertions(+)

diff --git a/.github/workflows/pull-request.yml b/.github/workflows/pull-request.yml
index 40f80e71..7fa74127 100644
--- a/.github/workflows/pull-request.yml
+++ b/.github/workflows/pull-request.yml
@@ -5,6 +5,12 @@ on:
     branches:
       - main
   pull_request: {}
+  pull_request_target: {}
+
+permissions:
+  contents: read
+  issues: write
+  pull-requests: write
 
 jobs:
   docker-build:
@@ -82,6 +88,21 @@ jobs:
             echo "---"
             echo "✅ Linting completed automatically by CI."
           } >> "$GITHUB_STEP_SUMMARY"
+      - name: Comment on PR
+        uses: marocchino/sticky-pull-request-comment@v2
+        if: ${{ github.event_name == 'pull_request_target' }}
+        with:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          message: |
+            ## 🧹 ESLint Report
+
+            | Status | Count |
+            |--------|-------|
+            | ❌ Errors   | **${{ steps.count-errors.outputs.errors }}** |
+            | ⚠️ Warnings | **${{ steps.count-errors.outputs.warnings }}** |
+
+            ---
+            ✅ *Linting completed automatically by CI.*
 
       - name: Run tests using the `build` image
         run: |

From 8f34c0163b28db5eec97e8d6cdd0650cec36566f Mon Sep 17 00:00:00 2001
From: akabdulhanif <abdulkhader.abdulhanif@gmail.com>
Date: Fri, 16 Jan 2026 11:14:10 +0000
Subject: [PATCH 3/9] ci: remove pull_request_target; switch ESLint report to
 step summary

---
 .github/workflows/pull-request.yml | 9 +++------
 1 file changed, 3 insertions(+), 6 deletions(-)

diff --git a/.github/workflows/pull-request.yml b/.github/workflows/pull-request.yml
index 7fa74127..6797f95c 100644
--- a/.github/workflows/pull-request.yml
+++ b/.github/workflows/pull-request.yml
@@ -5,12 +5,6 @@ on:
     branches:
       - main
   pull_request: {}
-  pull_request_target: {}
-
-permissions:
-  contents: read
-  issues: write
-  pull-requests: write
 
 jobs:
   docker-build:
@@ -88,6 +82,7 @@ jobs:
             echo "---"
             echo "✅ Linting completed automatically by CI."
           } >> "$GITHUB_STEP_SUMMARY"
+<<<<<<< HEAD
       - name: Comment on PR
         uses: marocchino/sticky-pull-request-comment@v2
         if: ${{ github.event_name == 'pull_request_target' }}
@@ -103,6 +98,8 @@ jobs:
 
             ---
             ✅ *Linting completed automatically by CI.*
+=======
+>>>>>>> 5fc96e6 (ci: remove pull_request_target; switch ESLint report to step summary)
 
       - name: Run tests using the `build` image
         run: |

From 35d1a950fa377e747a8b2f5bab47207fbc8746d8 Mon Sep 17 00:00:00 2001
From: akabdulhanif <abdulkhader.abdulhanif@gmail.com>
Date: Tue, 27 Jan 2026 15:58:52 +0000
Subject: [PATCH 4/9] ci(ui): resolve merge markers; remove
 pull_request_target; use ESLint step summary only

---
 .github/workflows/pull-request.yml | 18 ------------------
 1 file changed, 18 deletions(-)

diff --git a/.github/workflows/pull-request.yml b/.github/workflows/pull-request.yml
index 6797f95c..40f80e71 100644
--- a/.github/workflows/pull-request.yml
+++ b/.github/workflows/pull-request.yml
@@ -82,24 +82,6 @@ jobs:
             echo "---"
             echo "✅ Linting completed automatically by CI."
           } >> "$GITHUB_STEP_SUMMARY"
-<<<<<<< HEAD
-      - name: Comment on PR
-        uses: marocchino/sticky-pull-request-comment@v2
-        if: ${{ github.event_name == 'pull_request_target' }}
-        with:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-          message: |
-            ## 🧹 ESLint Report
-
-            | Status | Count |
-            |--------|-------|
-            | ❌ Errors   | **${{ steps.count-errors.outputs.errors }}** |
-            | ⚠️ Warnings | **${{ steps.count-errors.outputs.warnings }}** |
-
-            ---
-            ✅ *Linting completed automatically by CI.*
-=======
->>>>>>> 5fc96e6 (ci: remove pull_request_target; switch ESLint report to step summary)
 
       - name: Run tests using the `build` image
         run: |

From 1763f71d6690347c6cfa0a7f4e0b79c593c0e317 Mon Sep 17 00:00:00 2001
From: akabdulhanif <abdulkhader.abdulhanif@gmail.com>
Date: Tue, 27 Jan 2026 16:04:32 +0000
Subject: [PATCH 5/9] fix(ui): correct template closing tags in CatalogGroup
 and CatalogControl to resolve Vite compile error

---
 src/views/catalog/CatalogControl.vue | 51 +++++++++++++++++++++-------
 src/views/catalog/CatalogGroup.vue   | 10 ------
 2 files changed, 39 insertions(+), 22 deletions(-)

diff --git a/src/views/catalog/CatalogControl.vue b/src/views/catalog/CatalogControl.vue
index 2ae4f9e6..8da77188 100644
--- a/src/views/catalog/CatalogControl.vue
+++ b/src/views/catalog/CatalogControl.vue
@@ -26,14 +26,11 @@
         >
         <TertiaryButton
           class="bg-white hover:bg-zinc-100 dark:bg-slate-800 dark:hover:bg-slate-600"
-<<<<<<< HEAD
           @click.stop="showEdit = true"
           >Edit</TertiaryButton
         >
         <TertiaryButton
           class="bg-white hover:bg-zinc-100 dark:bg-slate-800 dark:hover:bg-slate-600"
-=======
->>>>>>> 1a10cc4 (feat(ui): add Delete actions for catalog/group/control and fix button event forwarding)
           @click.stop="deleteControl()"
           >Delete</TertiaryButton
         >
@@ -45,10 +42,22 @@
       <div class="flex items-start justify-between gap-4">
         <div>
           <TertiaryButton v-if="!statement">Add Statement</TertiaryButton>
-          <TertiaryButton v-if="!objective" class="ml-2"
+          <TertiaryButton
+            v-if="statement"
+            class="ml-2"
+            @click="showEditStatement = true"
+            >Edit Statement</TertiaryButton
+          >
+          <TertiaryButton
+            v-if="!objective"
+            class="ml-2"
+            @click="showEditObjective = true"
             >Add Objective</TertiaryButton
           >
-          <TertiaryButton v-if="!guidance" class="ml-2"
+          <TertiaryButton
+            v-if="!guidance"
+            class="ml-2"
+            @click="showEditGuidance = true"
             >Add Guidance</TertiaryButton
           >
 
@@ -103,6 +112,27 @@
           :parent-control="props.control"
           v-model="showControlForm"
         />
+        <ControlPartEditModal
+          v-model="showEditStatement"
+          :catalog="catalog"
+          :control="props.control"
+          type="statement"
+          @updated="onUpdated"
+        />
+        <ControlPartEditModal
+          v-model="showEditObjective"
+          :catalog="catalog"
+          :control="props.control"
+          type="assessment-objective"
+          @updated="onUpdated"
+        />
+        <ControlPartEditModal
+          v-model="showEditGuidance"
+          :catalog="catalog"
+          :control="props.control"
+          type="guidance"
+          @updated="onUpdated"
+        />
         <ControlEditModal
           v-model="showEdit"
           :catalog="catalog"
@@ -121,6 +151,7 @@ import { type Catalog, type Control } from '@/oscal';
 import TertiaryButton from '@/volt/TertiaryButton.vue';
 import ControlCreateModal from '@/components/catalogs/ControlCreateModal.vue';
 import ControlEditModal from '@/components/catalogs/ControlEditModal.vue';
+import ControlPartEditModal from '@/components/catalogs/ControlPartEditModal.vue';
 import type { Part } from '@/oscal';
 import PartDisplayEditor from '@/components/PartDisplayEditor.vue';
 import { useRouter } from 'vue-router';
@@ -157,14 +188,10 @@ const guidance = ref<Part | undefined>(getPart('guidance'));
 const router = useRouter();
 const toast = useToast();
 const { confirmDeleteDialog } = useDeleteConfirmationDialog();
-<<<<<<< HEAD
 const emit = defineEmits<{
   (e: 'deleted', id: string): void;
   (e: 'updated', id: string): void;
 }>();
-=======
-const emit = defineEmits<{ (e: 'deleted', id: string): void }>();
->>>>>>> 1a10cc4 (feat(ui): add Delete actions for catalog/group/control and fix button event forwarding)
 const { execute: del } = useDataApi<void>(
   '/api/oscal/catalogs',
   {},
@@ -186,6 +213,9 @@ function getPart(type: string) {
 
 const showControlForm = ref<boolean>(false);
 const showEdit = ref<boolean>(false);
+const showEditStatement = ref<boolean>(false);
+const showEditObjective = ref<boolean>(false);
+const showEditGuidance = ref<boolean>(false);
 
 function controlCreated(control: Control) {
   controls.value?.push(control);
@@ -222,13 +252,10 @@ async function deleteControl() {
   );
 }
 
-<<<<<<< HEAD
 function onUpdated(updated: Control) {
   emit('updated', updated.id);
 }
 
-=======
->>>>>>> 1a10cc4 (feat(ui): add Delete actions for catalog/group/control and fix button event forwarding)
 function onChildDeleted(id: string) {
   const idx = controls.value?.findIndex((c) => c.id === id) ?? -1;
   if (idx >= 0 && controls.value) {
diff --git a/src/views/catalog/CatalogGroup.vue b/src/views/catalog/CatalogGroup.vue
index db3444b2..f457189b 100644
--- a/src/views/catalog/CatalogGroup.vue
+++ b/src/views/catalog/CatalogGroup.vue
@@ -14,7 +14,6 @@
         </div>
         <TertiaryButton
           class="bg-white hover:bg-zinc-100 dark:bg-slate-800 dark:hover:bg-slate-600"
-<<<<<<< HEAD
           @click.stop="showEdit = true"
           >Edit</TertiaryButton
         >
@@ -35,8 +34,6 @@
         >
         <TertiaryButton
           class="bg-white hover:bg-zinc-100 dark:bg-slate-800 dark:hover:bg-slate-600"
-=======
->>>>>>> 1a10cc4 (feat(ui): add Delete actions for catalog/group/control and fix button event forwarding)
           @click.stop="deleteGroup()"
           >Delete</TertiaryButton
         >
@@ -124,14 +121,10 @@ const props = defineProps<{
   catalog: Catalog;
   group: Group;
 }>();
-<<<<<<< HEAD
 const emit = defineEmits<{
   (e: 'deleted', id: string): void;
   (e: 'updated', id: string): void;
 }>();
-=======
-const emit = defineEmits<{ (e: 'deleted', id: string): void }>();
->>>>>>> 1a10cc4 (feat(ui): add Delete actions for catalog/group/control and fix button event forwarding)
 const toast = useToast();
 const { confirmDeleteDialog } = useDeleteConfirmationDialog();
 const { execute: del } = useDataApi<void>(
@@ -210,11 +203,8 @@ async function deleteGroup() {
     { itemName: props.group.id, itemType: 'group' },
   );
 }
-<<<<<<< HEAD
 
 function onUpdated(updated: Group) {
   emit('updated', updated.id);
 }
-=======
->>>>>>> 1a10cc4 (feat(ui): add Delete actions for catalog/group/control and fix button event forwarding)
 </script>

From 35fb63908869df5fad8159d6254b895f04faed6a Mon Sep 17 00:00:00 2001
From: akabdulhanif <abdulkhader.abdulhanif@gmail.com>
Date: Thu, 29 Jan 2026 17:48:28 +0000
Subject: [PATCH 6/9] feat(ui): add ProfileBuildPropsView for prop-based
 builder

---
 src/views/profile/ProfileBuildPropsView.vue | 240 ++++++++++++++++++++
 1 file changed, 240 insertions(+)
 create mode 100644 src/views/profile/ProfileBuildPropsView.vue

diff --git a/src/views/profile/ProfileBuildPropsView.vue b/src/views/profile/ProfileBuildPropsView.vue
new file mode 100644
index 00000000..845fb71f
--- /dev/null
+++ b/src/views/profile/ProfileBuildPropsView.vue
@@ -0,0 +1,240 @@
+<template>
+  <div class="p-6">
+    <PageHeader>Build Profile by Props</PageHeader>
+    <div class="mt-2">
+      <PageSubHeader
+        >Select controls from a catalog using prop rules</PageSubHeader
+      >
+    </div>
+
+    <div
+      class="mt-4 rounded-md bg-white dark:bg-slate-900 border border-ccf-300 dark:border-slate-700 p-4"
+    >
+      <form @submit.prevent="buildProfile">
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <div>
+            <label class="block text-sm font-medium mb-1">Catalog UUID</label>
+            <input
+              v-model="catalogId"
+              class="w-full rounded border px-3 py-2 dark:bg-slate-800 dark:text-slate-200"
+              placeholder="xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"
+            />
+            <p
+              v-if="catalogId && !uuidRe.test(catalogId)"
+              class="text-red-600 text-xs mt-1"
+            >
+              Invalid UUID format
+            </p>
+          </div>
+          <div>
+            <label class="block text-sm font-medium mb-1">Match Strategy</label>
+            <select
+              v-model="matchStrategy"
+              class="w-full rounded border px-3 py-2 dark:bg-slate-800 dark:text-slate-200"
+            >
+              <option value="any">any</option>
+              <option value="all">all</option>
+            </select>
+          </div>
+          <div>
+            <label class="block text-sm font-medium mb-1">Profile Title</label>
+            <input
+              v-model="title"
+              class="w-full rounded border px-3 py-2 dark:bg-slate-800 dark:text-slate-200"
+              placeholder="Prop-Matched Profile"
+            />
+          </div>
+          <div>
+            <label class="block text-sm font-medium mb-1"
+              >Profile Version</label
+            >
+            <input
+              v-model="version"
+              class="w-full rounded border px-3 py-2 dark:bg-slate-800 dark:text-slate-200"
+              placeholder="1.0.0"
+            />
+          </div>
+        </div>
+
+        <div class="mt-4">
+          <label class="block text-sm font-medium mb-2">Rules</label>
+          <div
+            v-for="(r, idx) in rules"
+            :key="idx"
+            class="grid grid-cols-1 md:grid-cols-4 gap-3 mb-3"
+          >
+            <input
+              v-model="r.name"
+              class="rounded border px-3 py-2 dark:bg-slate-800 dark:text-slate-200"
+              placeholder="prop name (optional, e.g. class)"
+            />
+            <select
+              v-model="r.operator"
+              class="rounded border px-3 py-2 dark:bg-slate-800 dark:text-slate-200"
+            >
+              <option value="equals">equals</option>
+              <option value="contains">contains</option>
+              <option value="regex">regex</option>
+              <option value="in">in</option>
+            </select>
+            <input
+              v-model="r.value"
+              class="rounded border px-3 py-2 dark:bg-slate-800 dark:text-slate-200"
+              placeholder="value (e.g. technical)"
+            />
+            <button
+              type="button"
+              class="rounded bg-red-600 text-white px-3 py-2"
+              @click="removeRule(idx)"
+            >
+              Remove
+            </button>
+          </div>
+          <button
+            type="button"
+            class="rounded bg-slate-600 text-white px-3 py-2"
+            @click="addRule"
+          >
+            Add Rule
+          </button>
+        </div>
+
+        <div class="mt-6">
+          <PrimaryButton type="submit" :disabled="submitting || !canSubmit">
+            {{ submitting ? 'Building...' : 'Build Profile' }}
+          </PrimaryButton>
+        </div>
+      </form>
+    </div>
+
+    <div
+      v-if="result"
+      class="mt-4 rounded-md bg-white dark:bg-slate-900 border border-ccf-300 dark:border-slate-700 p-4"
+    >
+      <h3 class="text-lg font-medium mb-2">Result</h3>
+      <p class="mb-2">
+        Profile ID:
+        <router-link
+          :to="{ name: 'profile:view', params: { id: result.profileId } }"
+          class="text-blue-600"
+        >
+          {{ result.profileId }}
+        </router-link>
+      </p>
+      <p class="mb-2">Matched Control IDs: {{ result.controlIds.length }}</p>
+      <div class="mt-2">
+        <details>
+          <summary class="cursor-pointer">Show JSON</summary>
+          <pre class="overflow-auto text-xs mt-2">{{ prettyResult }}</pre>
+        </details>
+      </div>
+    </div>
+  </div>
+  <div class="h-screen w-full"></div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue';
+import PageHeader from '@/components/PageHeader.vue';
+import PageSubHeader from '@/components/PageSubHeader.vue';
+import PrimaryButton from '@/volt/PrimaryButton.vue';
+import { useToast } from 'primevue/usetoast';
+import { useDataApi, decamelizeKeys } from '@/composables/axios';
+import type { AxiosHeaders } from 'axios';
+
+const toast = useToast();
+const uuidRe =
+  /^[0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{12}$/;
+
+const catalogId = ref<string>('');
+const matchStrategy = ref<'any' | 'all'>('any');
+const title = ref<string>('Prop-Matched Profile');
+const version = ref<string>('1.0.0');
+const rules = ref<Array<{ name: string; operator: string; value: string }>>([
+  { name: 'class', operator: 'equals', value: 'technical' },
+]);
+const submitting = ref<boolean>(false);
+
+const canSubmit = computed(
+  () =>
+    uuidRe.test(catalogId.value) &&
+    rules.value.every((r) => r.operator && r.value),
+);
+
+function addRule() {
+  rules.value.push({ name: '', operator: 'equals', value: '' });
+}
+function removeRule(idx: number) {
+  rules.value.splice(idx, 1);
+}
+
+type BuildResponse = {
+  profileId: string;
+  controlIds: string[];
+  profile: Record<string, unknown>;
+};
+
+const { execute } = useDataApi<{
+  profileId: string;
+  controlIds: string[];
+  profile: unknown;
+}>(
+  '/api/oscal/profiles/build-props',
+  {
+    method: 'POST',
+    transformRequest: [
+      (data, headers) =>
+        decamelizeKeys(data, headers as unknown as AxiosHeaders),
+    ],
+  },
+  { immediate: false },
+);
+
+const result = ref<BuildResponse | null>(null);
+const prettyResult = computed(() =>
+  result.value ? JSON.stringify(result.value, null, 2) : '',
+);
+
+async function buildProfile() {
+  if (!canSubmit.value) {
+    toast.add({
+      severity: 'warn',
+      summary: 'Validation',
+      detail: 'Please enter a valid Catalog UUID and complete all rule fields.',
+      life: 2500,
+    });
+    return;
+  }
+  submitting.value = true;
+  try {
+    const payload = {
+      catalogId: catalogId.value,
+      matchStrategy: matchStrategy.value,
+      rules: rules.value,
+      title: title.value,
+      version: version.value,
+    };
+    const resp = await execute('/api/oscal/profiles/build-props', {
+      data: payload,
+    });
+    result.value = resp.data.value?.data as BuildResponse;
+    const count = result.value?.controlIds?.length ?? 0;
+    toast.add({
+      severity: count > 0 ? 'success' : 'info',
+      summary: 'Profile built',
+      detail: `Matched ${count} control(s)`,
+      life: 3000,
+    });
+  } catch (error) {
+    toast.add({
+      severity: 'error',
+      summary: 'Build Failed',
+      detail:
+        error instanceof Error ? error.message : 'Failed to build profile',
+      life: 3000,
+    });
+  } finally {
+    submitting.value = false;
+  }
+}
+</script>

From 26a454d4f0e9df68705f4f90b6020f07891cc814 Mon Sep 17 00:00:00 2001
From: akabdulhanif <abdulkhader.abdulhanif@gmail.com>
Date: Fri, 30 Jan 2026 07:06:23 +0000
Subject: [PATCH 7/9] feat(ui): add catalog selector and UUID validation in
 props builder

---
 src/views/profile/ProfileBuildPropsView.vue | 26 +++++++++++++++++++++
 1 file changed, 26 insertions(+)

diff --git a/src/views/profile/ProfileBuildPropsView.vue b/src/views/profile/ProfileBuildPropsView.vue
index 845fb71f..86636fd4 100644
--- a/src/views/profile/ProfileBuildPropsView.vue
+++ b/src/views/profile/ProfileBuildPropsView.vue
@@ -26,6 +26,25 @@
               Invalid UUID format
             </p>
           </div>
+          <div>
+            <label class="block text-sm font-medium mb-1">Select Catalog</label>
+            <select
+              v-model="selectedCatalog"
+              @change="selectCatalog(selectedCatalog)"
+              class="w-full rounded border px-3 py-2 dark:bg-slate-800 dark:text-slate-200"
+            >
+              <option value="" disabled>Select a catalog</option>
+              <option v-for="c in catalogs || []" :key="c.uuid" :value="c.uuid">
+                {{ c.metadata?.title || c.uuid }}
+              </option>
+            </select>
+            <p
+              v-if="!catalogs || catalogs.length === 0"
+              class="text-xs mt-1 text-gray-500"
+            >
+              No catalogs found. Import or create a catalog first.
+            </p>
+          </div>
           <div>
             <label class="block text-sm font-medium mb-1">Match Strategy</label>
             <select
@@ -141,12 +160,19 @@ import PrimaryButton from '@/volt/PrimaryButton.vue';
 import { useToast } from 'primevue/usetoast';
 import { useDataApi, decamelizeKeys } from '@/composables/axios';
 import type { AxiosHeaders } from 'axios';
+import type { Catalog } from '@/oscal';
 
 const toast = useToast();
 const uuidRe =
   /^[0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{12}$/;
 
 const catalogId = ref<string>('');
+const { data: catalogs } = useDataApi<Catalog[]>('/api/oscal/catalogs');
+const selectedCatalog = ref<string>('');
+function selectCatalog(id: string) {
+  selectedCatalog.value = id;
+  catalogId.value = id;
+}
 const matchStrategy = ref<'any' | 'all'>('any');
 const title = ref<string>('Prop-Matched Profile');
 const version = ref<string>('1.0.0');

From 687ea1e64ff7ebc75bbb1932b5ab5e2afce38234 Mon Sep 17 00:00:00 2001
From: akabdulhanif <abdulkhader.abdulhanif@gmail.com>
Date: Fri, 30 Jan 2026 07:57:23 +0000
Subject: [PATCH 8/9] feat(ui): add prominent Build Props button to Profiles
 header

---
 src/views/profile/ProfileList.vue | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/src/views/profile/ProfileList.vue b/src/views/profile/ProfileList.vue
index c7179ad9..ddfb6736 100644
--- a/src/views/profile/ProfileList.vue
+++ b/src/views/profile/ProfileList.vue
@@ -1,5 +1,10 @@
 <template>
   <PageHeader>Profiles</PageHeader>
+  <div class="mt-2">
+    <RouterLinkButton class="mr-2" :to="{ name: 'profile:build-props' }">
+      Build Profile by Props
+    </RouterLinkButton>
+  </div>
   <div
     class="mt-4 overflow-hidden rounded-lg border border-ccf-300 bg-white shadow dark:border-slate-700 dark:bg-slate-900"
   >
@@ -64,6 +69,9 @@
     <RouterLinkButton :to="{ name: 'profile:create' }">
       Create New Profile
     </RouterLinkButton>
+    <RouterLinkButton class="ml-2" :to="{ name: 'profile:build-props' }">
+      Build Profile by Props
+    </RouterLinkButton>
   </div>
 </template>
 

From 25852c28452fd951fc1f449217048c39aeaede52 Mon Sep 17 00:00:00 2001
From: akabdulhanif <abdulkhader.abdulhanif@gmail.com>
Date: Fri, 30 Jan 2026 08:04:40 +0000
Subject: [PATCH 9/9] fix(ui): rename route to profile-build-props and update
 links to resolve router no-match

---
 src/router/index.ts               | 32 ++++++++-----------------------
 src/views/LeftSideNav.vue         |  9 ++++-----
 src/views/profile/ProfileList.vue |  4 ++--
 3 files changed, 14 insertions(+), 31 deletions(-)

diff --git a/src/router/index.ts b/src/router/index.ts
index a732e793..41041f02 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -83,14 +83,6 @@ const authenticatedRoutes = [
         path: 'components',
         name: 'system:components',
         component: () => import('../views/system/ComponentsView.vue'),
-        children: [
-          {
-            path: ':componentId/dashboards',
-            name: 'system-component-dashboards',
-            component: () =>
-              import('../views/system/partials/ComponentDashboardsView.vue'),
-          },
-        ],
       },
       {
         path: 'authorizations',
@@ -194,6 +186,14 @@ const authenticatedRoutes = [
       requiresAuth: true,
     },
   },
+  {
+    path: '/profiles/build-props',
+    name: 'profile-build-props',
+    component: () => import('../views/profile/ProfileBuildPropsView.vue'),
+    meta: {
+      requiresAuth: true,
+    },
+  },
   {
     path: '/profiles/:id',
     name: 'profile:view',
@@ -244,14 +244,6 @@ const authenticatedRoutes = [
       requiresAuth: true,
     },
   },
-  {
-    path: '/admin/import',
-    name: 'admin-import',
-    component: () => import('../views/admin/ImportView.vue'),
-    meta: {
-      requiresAuth: true,
-    },
-  },
   {
     path: '/component-definitions',
     name: 'component-definitions',
@@ -748,14 +740,6 @@ const authenticatedRoutes = [
       requiresAuth: true,
     },
   },
-  {
-    path: '/preferences',
-    name: 'preferences',
-    component: () => import('../views/PreferencesView.vue'),
-    meta: {
-      requiresAuth: true,
-    },
-  },
   {
     path: '/about',
     name: 'about',
diff --git a/src/views/LeftSideNav.vue b/src/views/LeftSideNav.vue
index dd324479..3b189fd3 100644
--- a/src/views/LeftSideNav.vue
+++ b/src/views/LeftSideNav.vue
@@ -103,6 +103,10 @@ const links = ref<Array<NavigationItem>>([
         title: 'Profiles',
         abbr: 'PR',
       },
+      {
+        name: 'profile-build-props',
+        title: 'Build Profile by Props',
+      },
       {
         name: 'component-definitions',
         title: 'Component Definitions',
@@ -119,11 +123,6 @@ const links = ref<Array<NavigationItem>>([
         name: 'users-list',
         title: 'System Users',
       },
-      {
-        name: 'admin-import',
-        title: 'Import',
-        abbr: 'IMP',
-      },
     ],
   },
 ]);
diff --git a/src/views/profile/ProfileList.vue b/src/views/profile/ProfileList.vue
index ddfb6736..65bc7ae5 100644
--- a/src/views/profile/ProfileList.vue
+++ b/src/views/profile/ProfileList.vue
@@ -1,7 +1,7 @@
 <template>
   <PageHeader>Profiles</PageHeader>
   <div class="mt-2">
-    <RouterLinkButton class="mr-2" :to="{ name: 'profile:build-props' }">
+    <RouterLinkButton class="mr-2" :to="{ name: 'profile-build-props' }">
       Build Profile by Props
     </RouterLinkButton>
   </div>
@@ -69,7 +69,7 @@
     <RouterLinkButton :to="{ name: 'profile:create' }">
       Create New Profile
     </RouterLinkButton>
-    <RouterLinkButton class="ml-2" :to="{ name: 'profile:build-props' }">
+    <RouterLinkButton class="ml-2" :to="{ name: 'profile-build-props' }">
       Build Profile by Props
     </RouterLinkButton>
   </div>