Updates to the competencies

assets/scripts/competency-status-board.js

@@ -6,10 +6,68 @@ const STATES = [
   { key: "comments", label: "Comments" },
 ];
 
+const LEVELS = [
+  { key: "graduate", label: "Graduate" },
+  { key: "engineer", label: "Engineer" },
+];
+
+let currentLevel = LEVELS[0].key;
+
 function isMobile() {
   return window.matchMedia("(max-width: 600px)").matches;
 }
 
+function renderLevelTabs() {
+  const board = document.getElementById("kanban-board");
+  if (!board || document.getElementById("level-tabs")) return;
+
+  const nav = document.createElement("div");
+  nav.id = "level-tabs";
+
+  LEVELS.forEach(({ key, label }) => {
+    const btn = document.createElement("button");
+    btn.textContent = label;
+    btn.dataset.level = key;
+    btn.className = "level-tab" + (key === currentLevel ? " active" : "");
+    btn.addEventListener("click", () => {
+      currentLevel = key;
+      document.querySelectorAll(".level-tab").forEach(b =>
+        b.classList.toggle("active", b.dataset.level === key)
+      );
+      loadBoard();
+    });
+    nav.appendChild(btn);
+  });
+
+  board.insertAdjacentElement("beforebegin", nav);
+
+  if (!document.getElementById("level-tab-styles")) {
+    const style = document.createElement("style");
+    style.id = "level-tab-styles";
+    style.textContent = `
+      #level-tabs {
+        display: flex;
+        gap: 0.5em;
+        margin-bottom: 1em;
+      }
+      .level-tab {
+        padding: 0.4em 1.2em;
+        border: 1px solid #ccc;
+        background: none;
+        cursor: pointer;
+        border-radius: 4px;
+        font-size: 0.95em;
+      }
+      .level-tab.active {
+        background: #333;
+        color: #fff;
+        border-color: #333;
+      }
+    `;
+    document.head.appendChild(style);
+  }
+}
+
 function populateMobileControls(items) {
   if (!isMobile()) return;
 
@@ -35,7 +93,6 @@ function populateMobileControls(items) {
     toSelect.appendChild(new Option(s.label, s.key));
   });
 
-  // Auto-fill "from" when item selected
   itemSelect.onchange = () => {
     const selected = itemSelect.selectedOptions[0];
     if (selected?.dataset.state) {
@@ -84,12 +141,8 @@ function countByState(items) {
 async function updateProgress(items) {
   const total = items.length;
   const completed = items.filter(i => i.state === "completed").length;
-
-  
   const percent = total === 0 ? 0 : Math.round((completed / total) * 100);
 
-  console.log(`Progress: ${percent}% (${completed}/${total})`);
-  
   const fill = document.getElementById("progress-fill");
   const label = document.getElementById("progress-label");
 
@@ -143,7 +196,7 @@ function createColumn(state, items, counts) {
     });
 
     if (res.ok) {
-      loadBoard(); // simple & safe re-render
+      loadBoard();
     } else {
       alert("Failed to update state");
     }
@@ -172,11 +225,13 @@ function renderBoard(items) {
 }
 
 async function loadBoard() {
-  const res = await fetch("/api/competencies/items");
+  const res = await fetch(`/api/competencies/items?group=${currentLevel}`);
   const items = await res.json();
 
   updateProgress(items);
   renderBoard(items);
   populateMobileControls(items);
 }
+
+renderLevelTabs();
 loadBoard();