feat: add capabilities display feature (#1313)

- Introduce capability matrix component to display capabilities in a structured table format
- Add `showCapabilities` method to handle displaying the capabilities modal
- Update `OtherOrganizations.vue` to include capabilities button and functionality
- Import `CapabilityMatrix.vue` in `OtherOrganizations.vue` to manage component data and actions

This enhancement allows users to view organization capabilities in a modal with improved readability.

src/components/CapabilityMatrix.vue

@@ -0,0 +1,104 @@
+<template>
+  <div class="p-4">
+    <div class="overflow-x-auto">
+      <table class="min-w-full bg-white border border-gray-200">
+        <thead>
+          <tr>
+            <th class="px-4 py-2 border"></th>
+            <th
+              v-for="phase in phases"
+              :key="phase.id"
+              class="px-4 py-2 border text-left"
+            >
+              {{ $t(phase.phase_name_t) }}
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr
+            v-for="cap in capabilities"
+            :key="cap.capability_id"
+            class="hover:bg-gray-100"
+          >
+            <td class="px-4 py-2 border font-medium">
+              {{ $t(cap.capability_name) }}
+            </td>
+            <td
+              v-for="phase in phases"
+              :key="phase.id"
+              class="px-4 py-2 border text-center"
+            >
+              <span
+                v-if="matrix[phase.id]?.includes(cap.capability_id)"
+                class="text-green-500"
+              >
+                ✓
+              </span>
+              <span v-else class="text-red-500">✗</span>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed, defineProps } from 'vue';
+
+// Define the structure of the incoming rawData prop
+const props = defineProps({
+  rawData: {
+    type: Array,
+    required: true,
+    default: () => [],
+  },
+});
+
+const store = useStore();
+
+// Extract unique phases from rawData
+const phases = computed(() => store.getters['enums/phases']);
+
+// Extract unique capabilities from rawData
+const capabilities = computed(() => {
+  const capMap = new Map();
+  for (const item of props.rawData) {
+    if (!capMap.has(item.capability_id)) {
+      capMap.set(item.capability_id, {
+        capability_id: item.capability_id,
+        capability_name: item.capability_name,
+      });
+    }
+  }
+  return [...capMap.values()].sort((a, b) => a.capability_id - b.capability_id);
+});
+
+// Create the matrix mapping phases to their capabilities
+const matrix = computed(() => {
+  const mat = {};
+  for (const item of props.rawData) {
+    if (!mat[item.phase_id]) {
+      mat[item.phase_id] = new Set();
+    }
+    mat[item.phase_id].add(item.capability_id);
+  }
+  // Convert Sets to Arrays for easier handling in the template
+  for (const key of Object.keys(mat)) {
+    mat[key] = [...mat[key]];
+  }
+  return mat;
+});
+
+// Utility function to format names for better readability
+const formatName = (name) => {
+  return name
+    .split('.')
+    .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+    .join(' ');
+};
+</script>
+
+<style scoped>
+/* Optional: Add any additional styles if needed */
+</style>

src/pages/OtherOrganizations.vue

@@ -218,6 +218,14 @@
           >
           </base-button>
         </template>
+        <template #capabilities="slotProps">
+          <base-button
+            size="small"
+            icon="hammer"
+            :action="() => showCapabilities(slotProps.item.capabilities)"
+          >
+          </base-button>
+        </template>
       </AjaxTable>
     </div>
   </div>
@@ -237,6 +245,7 @@ import DisplayLocation from '@/components/DisplayLocation.vue';
 import BaseInput from '@/components/BaseInput.vue';
 import CcuIcon from '@/components/BaseIcon.vue';
 import { forceFileDownload } from '@/utils/downloads';
+import CapabilityMatrix from '@/components/CapabilityMatrix.vue';
 
 export default {
   name: 'OtherOrganizations',
@@ -376,6 +385,18 @@ export default {
       });
     };
 
+    const showCapabilities = async (capabilities) => {
+      await component({
+        title: 'Capabilities',
+        component: CapabilityMatrix,
+        props: {
+          rawData: JSON.parse(capabilities),
+        },
+        classes: 'w-full h-120 overflow-auto p-3',
+        modalClasses: 'bg-white max-w-3xl shadow',
+      });
+    };
+
     const getCreatedAtLteFilter = () => moment().subtract(6, 'd').toISOString();
     function getOpenStatuses() {
       enums.state.statuses.filter((status) => status.primary_state === 'open');
@@ -433,6 +454,7 @@ export default {
       showLocation,
       search,
       downloadCsv,
+      showCapabilities,
     };
   },
 };