Profile Completeness Card — Weighted Progress with a Genuine Next-Best-Action Suggestion

<div class="demo">
  <div class="pc-card">
    <div class="pc-header">
      <svg class="pc-ring" viewBox="0 0 64 64" width="56" height="56">
        <circle cx="32" cy="32" r="27" fill="none" stroke="#f1f5f9" stroke-width="7" />
        <circle id="pcRingFill" cx="32" cy="32" r="27" fill="none" stroke="#6366f1" stroke-width="7" stroke-linecap="round" transform="rotate(-90 32 32)" />
      </svg>
      <div>
        <p class="pc-title">Profile strength</p>
        <p class="pc-percent" id="pcPercent">0%</p>
      </div>
    </div>

    <ul class="pc-list" id="pcList"></ul>

    <div class="pc-next" id="pcNext"></div>
  </div>
</div>

* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: system-ui, sans-serif; background: #f8fafc; display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 24px; }
.demo { width: 360px; max-width: 100%; }

.pc-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 18px; padding: 20px; display: flex; flex-direction: column; gap: 16px; }
.pc-header { display: flex; align-items: center; gap: 14px; }
.pc-ring circle#pcRingFill { transition: stroke-dashoffset 0.5s ease; }
.pc-title { font-size: 11.5px; font-weight: 700; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.4px; }
.pc-percent { font-size: 22px; font-weight: 800; color: #111827; margin-top: 2px; }

.pc-list { display: flex; flex-direction: column; gap: 2px; list-style: none; }
.pc-item { display: flex; align-items: center; gap: 10px; padding: 8px 4px; }
.pc-check { width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 800; border: 1.5px solid #e2e8f0; color: transparent; }
.pc-item.done .pc-check { background: #10b981; border-color: #10b981; color: #fff; }
.pc-item-label { font-size: 12.5px; color: #334155; flex: 1; }
.pc-item.done .pc-item-label { color: #94a3b8; text-decoration: line-through; }
.pc-weight { font-size: 10px; color: #cbd5e1; font-weight: 700; }

.pc-next { padding: 12px 14px; border-radius: 12px; background: #eef2ff; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pc-next-text { font-size: 12px; color: #4338ca; font-weight: 600; }
.pc-next-btn { flex-shrink: 0; border: none; background: #4f46e5; color: #fff; font-size: 11px; font-weight: 700; padding: 7px 12px; border-radius: 8px; cursor: pointer; font-family: inherit; }
.pc-next-btn:hover { background: #4338ca; }
.pc-next.complete { background: #ecfdf5; }
.pc-next.complete .pc-next-text { color: #047857; }

const ringFill = document.getElementById('pcRingFill');
const percentEl = document.getElementById('pcPercent');
const listEl = document.getElementById('pcList');
const nextEl = document.getElementById('pcNext');

const RADIUS = 27;
const CIRCUMFERENCE = 2 * Math.PI * RADIUS;
ringFill.style.strokeDasharray = String(CIRCUMFERENCE);

// Not every profile field is equally valuable — a profile photo matters
// more to completeness than a personal tagline does. Weighting each item
// (rather than treating "6 of 8 fields done" as a flat 75%) means the
// percentage genuinely reflects how USEFUL the profile is, not just how
// many boxes happen to be checked.
const ITEMS = [
  { id: 'photo', label: 'Add a profile photo', weight: 25, done: true },
  { id: 'bio', label: 'Write a short bio', weight: 20, done: true },
  { id: 'role', label: 'Add your job title', weight: 15, done: false },
  { id: 'skills', label: 'List at least 3 skills', weight: 20, done: false },
  { id: 'social', label: 'Link a social profile', weight: 10, done: false },
  { id: 'tagline', label: 'Add a personal tagline', weight: 10, done: false },
];

function computeWeightedPercent() {
  const totalWeight = ITEMS.reduce((sum, item) => sum + item.weight, 0);
  const doneWeight = ITEMS.filter((item) => item.done).reduce((sum, item) => sum + item.weight, 0);
  return Math.round((doneWeight / totalWeight) * 100);
}

function renderRing(percent) {
  const offset = CIRCUMFERENCE * (1 - percent / 100);
  ringFill.style.strokeDashoffset = String(offset);
  percentEl.textContent = percent + '%';
}

function renderList() {
  listEl.innerHTML = ITEMS.map((item) => `
    <li class="pc-item ${item.done ? 'done' : ''}" data-id="${item.id}">
      <span class="pc-check">✓</span>
      <span class="pc-item-label">${item.label}</span>
      <span class="pc-weight">+${item.weight}%</span>
    </li>
  `).join('');
}

// The "next best action" is not simply the first incomplete item in list
// order — it's the incomplete item with the HIGHEST weight, since that's
// the single action that moves the completeness percentage the most. This
// is what makes the suggestion genuinely useful rather than an arbitrary
// pick from whichever field happens to be listed first.
function findNextBestAction() {
  const incomplete = ITEMS.filter((item) => !item.done);
  if (incomplete.length === 0) return null;
  return incomplete.reduce((best, item) => (item.weight > best.weight ? item : best));
}

function renderNext() {
  const next = findNextBestAction();
  if (!next) {
    nextEl.className = 'pc-next complete';
    nextEl.innerHTML = `<span class="pc-next-text">Your profile is complete — nice work!</span>`;
    return;
  }
  nextEl.className = 'pc-next';
  nextEl.innerHTML = `
    <span class="pc-next-text">Biggest impact next: "${next.label}" (+${next.weight}%)</span>
    <button class="pc-next-btn" data-id="${next.id}">Do this</button>
  `;
}

function render() {
  const percent = computeWeightedPercent();
  renderRing(percent);
  renderList();
  renderNext();
}

document.addEventListener('click', (e) => {
  const item = e.target.closest('.pc-item');
  const nextBtn = e.target.closest('.pc-next-btn');
  const id = item?.dataset.id || nextBtn?.dataset.id;
  if (!id) return;

  const target = ITEMS.find((i) => i.id === id);
  if (target) {
    target.done = true;
    render();
  }
});

render();