added progress bar for competencies

assets/scripts/competency-status-board.js

@@ -81,6 +81,22 @@ 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");
+
+  if (fill) fill.style.width = `${percent}%`;
+  if (label) label.textContent = `${percent}% completed`;
+}
+
 function createCard(item) {
   const card = document.createElement("div");
   card.className = "kanban-card";
@@ -158,8 +174,9 @@ function renderBoard(items) {
 async function loadBoard() {
   const res = await fetch("/api/competencies/items");
   const items = await res.json();
+
+  updateProgress(items);
   renderBoard(items);
   populateMobileControls(items);
 }
-
 loadBoard();

assets/styles/kanban.css

@@ -181,3 +181,28 @@
     cursor: default;
     background-image: none;
 }
+#progress-wrapper {
+  margin-bottom: 16px;
+}
+
+#progress-label {
+  font-size: 14px;
+  margin-bottom: 6px;
+  text-align: right;
+  color: #555;
+}
+
+#progress-bar {
+  width: 100%;
+  height: 10px;
+  background: #e5e7eb;
+  border-radius: 999px;
+  overflow: hidden;
+}
+
+#progress-fill {
+  height: 100%;
+  width: 0%;
+  background: #22c55e; 
+  transition: width 0.3s ease;
+}