optimal-path.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Score plan — Veteran Strong</title>
    <meta name="description" content="A plain-English roadmap to a higher score." />
    <link rel="stylesheet" href="assets/css/styles.css" />
    <link rel="stylesheet" href="assets/css/pages.css" />
  </head>
  <body class="portal-body--credit">
    <a href="#main" class="vs-skip">Skip to content</a>

    <div class="vs-page">
      <header data-portal-nav data-current="credit"></header>
      <nav data-portal-subnav data-current="credit"></nav>

      <main id="main" class="vs-main vs-container">
        <section class="vs-section vs-text-center" aria-labelledby="path-title">
          <p class="vs-eyebrow">Optimal path</p>
          <h1 id="path-title" class="vs-h1 vs-mt-3">Your monthly roadmap to a higher score.</h1>
          <p class="vs-lead vs-mt-3 vs-measure-narrow vs-mx-auto">Goal setting, plain-English actionable tasks, and tradeline-level recommendations.</p>
        </section>

        <section class="vs-section dash-row" aria-label="Goal and trend">
          <article class="vs-card vs-card--lg">
            <p class="vs-eyebrow">Score goal</p>
            <h2 class="vs-card__title">Set your score goal</h2>
            <p class="vs-card__sub">Choose a target score and a realistic time horizon.</p>

            <div class="goal-rail vs-mt-6" id="goal-rail">
              <div class="goal-rail__heads">
                <div class="goal-rail__head">Current<strong id="goal-current">724</strong></div>
                <div class="goal-rail__head">Target<strong id="goal-target">760</strong></div>
              </div>
              <div class="goal-rail__track" role="img" aria-label="Score 724 of target 760, on a 300 to 850 scale">
                <div class="goal-rail__fill" data-fill></div>
                <span class="goal-rail__thumb" data-thumb></span>
              </div>
              <div class="vs-rail__legend vs-mt-3">
                <span>300</span>
                <span>850</span>
              </div>
            </div>

            <div class="vs-mt-6">
              <a class="vs-btn" href="#">Save goal</a>
            </div>
          </article>

          <article class="vs-card vs-card--lg">
            <p class="vs-eyebrow">Utilization trend</p>
            <h2 class="vs-card__title">Improving over time</h2>
            <p class="vs-card__sub">Lower revolving utilization is one of the highest-impact moves available to you.</p>
            <svg id="util-chart" aria-hidden="false"></svg>
          </article>
        </section>

        <section class="vs-section" aria-label="Recommendations">
          <h2 class="vs-h3">Plan for this month</h2>
          <p class="vs-card__sub vs-mt-3">Four recommended actions, ranked by estimated impact.</p>
          <p class="recommendation-grid__count vs-mt-4" aria-live="polite">
            Your plan: <strong id="plan-count">0</strong> of <span id="plan-total">0</span> actions
          </p>
          <div class="vs-grid vs-grid--2 vs-mt-6" id="recs"></div>
        </section>

        <section class="vs-section" aria-label="Tradeline-level recommendations">
          <article class="vs-card vs-card--lg">
            <h2 class="vs-h3">Tradeline-level recommendations</h2>
            <p class="vs-card__sub vs-mt-3">Per-account guidance based on your current balances and history.</p>

            <div class="vs-mt-6">
              <table class="vs-table" id="per-tradeline">
                <thead>
                  <tr>
                    <th scope="col">#</th>
                    <th scope="col">Account</th>
                    <th scope="col">Action</th>
                    <th scope="col">Priority</th>
                  </tr>
                </thead>
                <tbody></tbody>
              </table>
            </div>
          </article>
        </section>
      </main>

      <footer data-portal-footer></footer>
    </div>

    <script src="assets/js/portal-chrome.js"></script>

    <script type="module">
      import { loadData, fmt, priorityLabel } from "./assets/js/data.js";
      import { paintLineChart } from "./assets/js/line-chart.js";
      import { markActiveNav } from "./assets/js/nav.js";

      markActiveNav("optimal-path");
      const data = await loadData();
      const op = data.optimalPath;

      // Goal rail
      const min = 300, max = 850;
      const pctC = ((op.current - min) / (max - min)) * 100;
      const pctT = ((op.target - min) / (max - min)) * 100;
      const fill = document.querySelector("[data-fill]");
      const thumb = document.querySelector("[data-thumb]");
      requestAnimationFrame(() => {
        fill.style.width = pctC.toFixed(2) + "%";
        thumb.style.left = pctT.toFixed(2) + "%";
      });

      // Utilization chart (re-using line chart, mapped to utilization values)
      const utilPoints = op.utilizationTrend.map((u) => ({ month: u.month, value: Math.round(u.value * 100) }));
      paintLineChart(document.getElementById("util-chart"), utilPoints, {
        label: "Revolving utilization, last 4 months",
        width: 720,
        height: 240,
        yMin: 38,
        yMax: 52,
        yTicks: [40, 45, 50],
      });

      // Recommendations grid — each card has a data-rec-key + a toggle button.
      const recs = document.getElementById("recs");
      recs.innerHTML = op.recommendations.map((r) => `
        <article class="recommendation" data-rec-key="${r.key}">
          <div class="recommendation__row">
            <h3 class="recommendation__title">${r.title}</h3>
            <span class="vs-chip vs-chip--strong">${r.estImpact}</span>
          </div>
          <p class="recommendation__body">${r.body}</p>
          <div>
            <button type="button"
                    class="vs-btn vs-btn--ghost vs-btn--sm recommendation__plan-btn"
                    data-plan-toggle
                    aria-pressed="false">
              Add to plan
            </button>
          </div>
        </article>
      `).join("");

      // Plan toggle (in-memory; resets on reload)
      const planSet = new Set();
      const planCountEl = document.getElementById("plan-count");
      const planTotalEl = document.getElementById("plan-total");
      planTotalEl.textContent = op.recommendations.length;

      function paintCard(key) {
        const card = recs.querySelector(`[data-rec-key="${key}"]`);
        if (!card) return;
        const btn = card.querySelector("[data-plan-toggle]");
        const inPlan = planSet.has(key);
        card.classList.toggle("is-in-plan", inPlan);
        btn.setAttribute("aria-pressed", inPlan ? "true" : "false");
        btn.classList.toggle("vs-btn--ghost", !inPlan);
        btn.classList.toggle("vs-btn--primary", inPlan);
        btn.innerHTML = inPlan
          ? `Added to your plan <span aria-hidden="true">&#10003;</span>`
          : "Add to plan";
      }

      recs.addEventListener("click", (e) => {
        const btn = e.target.closest("[data-plan-toggle]");
        if (!btn) return;
        e.preventDefault();
        const card = btn.closest("[data-rec-key]");
        const key = card.dataset.recKey;
        if (planSet.has(key)) planSet.delete(key); else planSet.add(key);
        planCountEl.textContent = planSet.size;
        paintCard(key);
      });

      // Per-tradeline table
      const tbody = document.querySelector("#per-tradeline tbody");
      tbody.innerHTML = op.perTradeline.map((row, i) => `
        <tr>
          <td>${i + 1}</td>
          <td><span class="vs-table__primary">${row.account}</span></td>
          <td>${row.action}</td>
          <td><span class="vs-chip vs-chip--${row.priority === "keep-open" ? "strong" : row.priority === "high" ? "needs-attention" : row.priority === "medium" ? "watch" : "info"}">${priorityLabel(row.priority)}</span></td>
        </tr>
      `).join("");
    </script>
  </body>
</html>