Added filtering by status and fixed colors

packages/frontend/src/components/dashboard/TemplateTable/Container.vue

@@ -12,8 +12,8 @@ import Column from "primevue/column";
 import DataTable from "primevue/datatable";
 import InputText from "primevue/inputtext";
 import SelectButton from "primevue/selectbutton";
-import type { RoleDTO, TemplateDTO, UserDTO } from "shared";
-import { computed } from "vue";
+import type { RoleDTO, RuleStatusDTO, TemplateDTO, UserDTO } from "shared";
+import { computed, ref } from "vue";
 import RuleStatus from "./RuleStatus.vue";
 
 const props = defineProps<{
@@ -23,6 +23,20 @@ const props = defineProps<{
   settingsState: SettingsState & { type: "Success" };
 }>();
 
+const selectedStatusFilter = ref<RuleStatusDTO | "All">("All");
+
+const filteredTemplates = computed(() => {
+  if (selectedStatusFilter.value === "All") return props.state.templates;
+
+  return props.state.templates.filter(template =>
+    template.rules.some(rule => rule.status === selectedStatusFilter.value)
+  );
+});
+
+const handleStatusFilterChange = (status: RuleStatusDTO | "All") => {
+  selectedStatusFilter.value = status;
+};
+
 const getRoleValue = (template: TemplateDTO, role: RoleDTO) => {
   const rule = template.rules.find(
     (rule) => rule.type === "RoleRule" && rule.roleId === role.id,
@@ -171,6 +185,17 @@ const onTemplateUpdate = (
                 @update:model-value="setAutoCaptureRequests" />
 
             </div>
+            <div
+              class="flex flex-col gap-2"
+              v-tooltip="'Filter table by the status value of at least one role/user.'">
+              <label class="text-sm text-gray-400">Filter table by status</label>
+              <SelectButton
+                :options="['All', 'Enforced', 'Bypassed']"
+                :model-value="selectedStatusFilter"
+                @update:model-value="handleStatusFilterChange"
+                placeholder="Filter by Status"
+              />
+            </div>
             <Button
               v-tooltip="'Clear all template entries.'"
               label="Clear All"
@@ -187,7 +212,7 @@ const onTemplateUpdate = (
 
       <template #content>
         <DataTable
-          :value="state.templates"
+          :value="filteredTemplates"
           striped-rows
           scrollable
           scroll-height="flex"

packages/frontend/src/components/dashboard/TemplateTable/RuleStatus.vue

@@ -11,21 +11,21 @@ defineProps<{
   <Chip
     v-if="status === 'Unexpected'"
     v-tooltip="'This access control rules on this resource are not as expected'"
-    style="background: var(--p-yellow-500); padding: 0.25rem 0.5rem; font-size: 0.8rem; gap: 0.25rem">
+    class="status unexpected-status">
     <i class="fas fa-exclamation-triangle" />
     <span>Unexpected</span>
   </Chip>
   <Chip
     v-else-if="status === 'Enforced'"
     v-tooltip="'This access control rules on this resource are properly enforced'"
-    style="background: var(--p-green-500); padding: 0.25rem 0.5rem; font-size: 0.8rem; gap: 0.25rem">
+    class="status enforced-status">
     <i class="fas fa-check" />
     <span>Enforced</span>
   </Chip>
   <Chip
     v-else-if="status === 'Bypassed'"
     v-tooltip="'This access control rules on this resource have been bypassed'"
-    style="background: var(--p-red-500); padding: 0.25rem 0.5rem; font-size: 0.8rem; gap: 0.25rem">
+    class="status bypassed-status">
     <i class="fas fa-x" />
     <span>Bypassed</span>
   </Chip>

packages/frontend/src/styles/style.css

@@ -3,3 +3,22 @@
 @import "tailwindcss/base";
 @import "tailwindcss/components";
 @import "tailwindcss/utilities";
+
+
+.status {
+    padding: 0.25rem 0.5rem; 
+    font-size: 0.8rem; 
+    gap: 0.25rem;
+}
+
+.enforced-status {
+    background: #498849 !important;
+}
+
+.bypassed-status {
+    background: #df3257 !important;
+}
+
+.unexpected-status {
+    background: #f1cb5a !important;
+}