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();

assets/styles/kanban.css

@@ -206,3 +206,48 @@
   background: #22c55e; 
   transition: width 0.3s ease;
 }
+#level-tabs {
+  display: inline-flex;
+  align-items: center;
+  gap: 0;
+  margin-bottom: 1rem;
+
+  //border: 1px solid var(--border-color, #ccc);
+  border-radius: 999px;
+  padding: 3px;
+
+  background: var(--bg, #fff);
+  width: fit-content;
+}
+
+.level-tab {
+  border: none;
+  background: transparent;
+
+  padding: 0.35rem 1rem;
+  font-size: 0.85rem;
+
+  border-radius: 999px;
+  cursor: pointer;
+
+  color: var(--fg, #333);
+
+  transition: 
+    background 0.2s ease,
+    color 0.2s ease,
+    transform 0.1s ease;
+}
+
+.level-tab:hover {
+  background: rgba(0,0,0,0.05);
+}
+
+.level-tab.active {
+  background: #333;
+  color: white;
+  font-weight: 500;
+}
+
+.level-tab:active {
+  transform: scale(0.97);
+}