@forwardimpact/pathway 0.1.0

package/app/pages/driver.js

@@ -0,0 +1,106 @@
+/**
+ * Drivers pages
+ */
+
+import { render, div, h1, h2, p, section } from "../lib/render.js";
+import { getState } from "../lib/state.js";
+import { createCardList } from "../components/list.js";
+import { createDetailHeader, createLinksList } from "../components/detail.js";
+import { renderNotFound } from "../components/error-page.js";
+import {
+  prepareDriversList,
+  prepareDriverDetail,
+} from "../formatters/driver/shared.js";
+import { driverToCardConfig } from "../lib/card-mappers.js";
+
+/**
+ * Render drivers list page
+ */
+export function renderDriversList() {
+  const { data } = getState();
+  const { framework } = data;
+
+  // Transform data for list view
+  const { items } = prepareDriversList(data.drivers);
+
+  const page = div(
+    { className: "drivers-page" },
+    // Header
+    div(
+      { className: "page-header" },
+      h1({ className: "page-title" }, framework.entityDefinitions.driver.title),
+      p(
+        { className: "page-description" },
+        framework.entityDefinitions.driver.description.trim(),
+      ),
+    ),
+
+    // Drivers list
+    createCardList(items, driverToCardConfig, "No drivers found."),
+  );
+
+  render(page);
+}
+
+/**
+ * Render driver detail page
+ * @param {Object} params - Route params
+ */
+export function renderDriverDetail(params) {
+  const { data } = getState();
+  const driver = data.drivers.find((d) => d.id === params.id);
+
+  if (!driver) {
+    renderNotFound({
+      entityType: "Driver",
+      entityId: params.id,
+      backPath: "/driver",
+      backText: "← Back to Drivers",
+    });
+    return;
+  }
+
+  // Transform data for detail view
+  const view = prepareDriverDetail(driver, {
+    skills: data.skills,
+    behaviours: data.behaviours,
+  });
+
+  const page = div(
+    { className: "driver-detail" },
+    createDetailHeader({
+      title: view.name,
+      description: view.description,
+      backLink: "/driver",
+      backText: "← Back to Drivers",
+    }),
+
+    // Contributing Skills and Contributing Behaviours in two columns
+    view.contributingSkills.length > 0 || view.contributingBehaviours.length > 0
+      ? section(
+          { className: "section section-detail" },
+          div(
+            { className: "content-columns" },
+            // Contributing Skills column
+            view.contributingSkills.length > 0
+              ? div(
+                  { className: "column" },
+                  h2({ className: "section-title" }, "Contributing Skills"),
+                  createLinksList(view.contributingSkills, "/skill"),
+                )
+              : null,
+            // Contributing Behaviours column
+            view.contributingBehaviours.length > 0
+              ? div(
+                  { className: "column" },
+                  h2({ className: "section-title" }, "Contributing Behaviours"),
+                  createLinksList(view.contributingBehaviours, "/behaviour"),
+                )
+              : null,
+          ),
+        )
+      : null,
+  );
+
+  render(page);
+}

package/app/pages/grade.js

@@ -0,0 +1,117 @@
+/**
+ * Grades pages
+ */
+
+import { render, div, h1, h3, p, formatLevel } from "../lib/render.js";
+import { getState } from "../lib/state.js";
+import { createBadge } from "../components/card.js";
+import { renderNotFound } from "../components/error-page.js";
+import { prepareGradesList } from "../formatters/grade/shared.js";
+import { gradeToDOM } from "../formatters/grade/dom.js";
+
+/**
+ * Render grades list page
+ */
+export function renderGradesList() {
+  const { data } = getState();
+  const { framework } = data;
+
+  // Transform data for list view
+  const { items } = prepareGradesList(data.grades);
+
+  const page = div(
+    { className: "grades-page" },
+    // Header
+    div(
+      { className: "page-header" },
+      h1({ className: "page-title" }, framework.entityDefinitions.grade.title),
+      p(
+        { className: "page-description" },
+        framework.entityDefinitions.grade.description.trim(),
+      ),
+    ),
+
+    // Grades timeline
+    div(
+      { className: "grades-timeline" },
+      ...items.map((grade) => createGradeTimelineItem(grade)),
+    ),
+  );
+
+  render(page);
+}
+
+/**
+ * Create a grade timeline item
+ * @param {Object} grade
+ * @returns {HTMLElement}
+ */
+function createGradeTimelineItem(grade) {
+  const item = div(
+    { className: "grade-timeline-item" },
+    div({ className: "grade-level-marker" }, String(grade.ordinalRank)),
+    div(
+      { className: "grade-timeline-content card card-clickable" },
+      div(
+        { className: "card-header" },
+        h3({ className: "card-title" }, grade.displayName),
+        createBadge(grade.id, "default"),
+      ),
+      grade.typicalExperienceRange
+        ? p(
+            { className: "text-muted", style: "margin: 0.25rem 0" },
+            `${grade.typicalExperienceRange} experience`,
+          )
+        : null,
+      div(
+        { className: "card-meta", style: "margin-top: 0.5rem" },
+        createBadge(
+          `Primary: ${formatLevel(grade.baseSkillLevels?.primary)}`,
+          "primary",
+        ),
+        createBadge(
+          `Secondary: ${formatLevel(grade.baseSkillLevels?.secondary)}`,
+          "secondary",
+        ),
+        createBadge(
+          `Broad: ${formatLevel(grade.baseSkillLevels?.broad)}`,
+          "broad",
+        ),
+      ),
+      grade.scope
+        ? p(
+            { className: "card-description", style: "margin-top: 0.75rem" },
+            `Scope: ${grade.scope}`,
+          )
+        : null,
+    ),
+  );
+
+  item.querySelector(".card").addEventListener("click", () => {
+    window.location.hash = `/grade/${grade.id}`;
+  });
+
+  return item;
+}
+
+/**
+ * Render grade detail page
+ * @param {Object} params - Route params
+ */
+export function renderGradeDetail(params) {
+  const { data } = getState();
+  const grade = data.grades.find((g) => g.id === params.id);
+
+  if (!grade) {
+    renderNotFound({
+      entityType: "Grade",
+      entityId: params.id,
+      backPath: "/grade",
+      backText: "← Back to Grades",
+    });
+    return;
+  }
+
+  // Use DOM formatter - it handles transformation internally
+  render(gradeToDOM(grade, { framework: data.framework }));
+}

package/app/pages/interview-builder.js

@@ -0,0 +1,50 @@
+/**
+ * Interview prep page
+ */
+
+import { render } from "../lib/render.js";
+import { getState } from "../lib/state.js";
+import { createBuilder, createStandardPreview } from "../components/builder.js";
+import { prepareInterviewBuilderPreview } from "../formatters/interview/shared.js";
+
+/**
+ * Render interview prep page
+ */
+export function renderInterviewPrep() {
+  const { data } = getState();
+
+  render(
+    createBuilder({
+      title: "Interview Prep",
+      description:
+        "Select a discipline, track, and grade to generate tailored interview questions " +
+        "based on the role's skill requirements and expected behaviours.",
+      formTitle: "Select Role",
+      emptyPreviewText: "Select all three components to preview the interview.",
+      buttonText: "View Interview Questions →",
+      previewPresenter: (selection) =>
+        prepareInterviewBuilderPreview({
+          ...selection,
+          behaviourCount: data.behaviours.length,
+          grades: data.grades,
+        }),
+      detailPath: (sel) =>
+        `/interview/${sel.discipline}/${sel.track}/${sel.grade}`,
+      renderPreview: createStandardPreview,
+      helpItems: [
+        {
+          label: "Role Selection",
+          text: "Choose a discipline, track, and grade to define the target role for the interview.",
+        },
+        {
+          label: "Skill Questions",
+          text: "Questions are generated based on the required skill levels for the role.",
+        },
+        {
+          label: "Behaviour Questions",
+          text: "Behavioural questions assess mindsets and ways of working at the expected maturity.",
+        },
+      ],
+    }),
+  );
+}

package/app/pages/interview.js

@@ -0,0 +1,304 @@
+/**
+ * Interview detail page with interview questions
+ */
+
+import {
+  render,
+  div,
+  h1,
+  h2,
+  h4,
+  p,
+  a,
+  button,
+  span,
+  ul,
+  li,
+  formatLevel,
+} from "../lib/render.js";
+import { getState } from "../lib/state.js";
+import { createBadge } from "../components/card.js";
+import { createBackLink } from "../components/nav.js";
+import { createDetailSection } from "../components/detail.js";
+import { renderError } from "../components/error-page.js";
+import { getConceptEmoji } from "../model/levels.js";
+import {
+  prepareAllInterviews,
+  INTERVIEW_TYPES,
+} from "../formatters/interview/shared.js";
+
+/**
+ * Render interview detail page
+ * @param {Object} params - Route params
+ */
+export function renderInterviewDetail(params) {
+  const { discipline: disciplineId, track: trackId, grade: gradeId } = params;
+  const { data } = getState();
+
+  // Find the components
+  const discipline = data.disciplines.find((d) => d.id === disciplineId);
+  const track = data.tracks.find((t) => t.id === trackId);
+  const grade = data.grades.find((g) => g.id === gradeId);
+
+  if (!discipline || !track || !grade) {
+    renderError({
+      title: "Interview Not Found",
+      message: "Invalid combination. One or more components are missing.",
+      backPath: "/interview-prep",
+      backText: "← Back to Interview Prep",
+    });
+    return;
+  }
+
+  // Use formatter shared module to get all interview types
+  const interviewsView = prepareAllInterviews({
+    discipline,
+    grade,
+    track,
+    skills: data.skills,
+    behaviours: data.behaviours,
+    questions: data.questions,
+  });
+
+  if (!interviewsView) {
+    renderError({
+      title: "Invalid Combination",
+      message: "This discipline, track, and grade combination is not valid.",
+      backPath: "/interview-prep",
+      backText: "← Back to Interview Prep",
+    });
+    return;
+  }
+
+  // State for current interview type (default to first: Screening)
+  let currentType = "short";
+
+  const page = div(
+    { className: "interview-detail-page" },
+    // Header
+    div(
+      { className: "page-header" },
+      createBackLink("/interview-prep", "← Back to Interview Prep"),
+      h1({ className: "page-title" }, `Interview: ${interviewsView.title}`),
+      div(
+        { className: "page-description" },
+        "Interview questions for: ",
+        a(
+          { href: `#/discipline/${interviewsView.disciplineId}` },
+          interviewsView.disciplineName,
+        ),
+        " × ",
+        a(
+          { href: `#/grade/${interviewsView.gradeId}` },
+          interviewsView.gradeId,
+        ),
+        " × ",
+        a(
+          { href: `#/track/${interviewsView.trackId}` },
+          interviewsView.trackName,
+        ),
+      ),
+    ),
+
+    // Interview type toggle
+    div(
+      { className: "interview-type-toggle", id: "interview-type-toggle" },
+      ...Object.values(INTERVIEW_TYPES).map((type) =>
+        createTypeButton(type, type.id === currentType, () => {
+          currentType = type.id;
+          updateTypeToggle();
+          updateQuestions();
+        }),
+      ),
+    ),
+
+    // Questions container
+    div({ id: "interview-questions-container" }),
+  );
+
+  render(page);
+
+  // Generate and display initial questions
+  updateQuestions();
+
+  function updateTypeToggle() {
+    const toggleEl = document.getElementById("interview-type-toggle");
+    toggleEl.innerHTML = "";
+    Object.values(INTERVIEW_TYPES).forEach((type) => {
+      toggleEl.appendChild(
+        createTypeButton(type, type.id === currentType, () => {
+          currentType = type.id;
+          updateTypeToggle();
+          updateQuestions();
+        }),
+      );
+    });
+  }
+
+  function updateQuestions() {
+    const container = document.getElementById("interview-questions-container");
+    container.innerHTML = "";
+
+    // Get interview data from presenter
+    const interview = interviewsView.interviews[currentType];
+
+    container.appendChild(
+      div(
+        {},
+        // Interview summary
+        createInterviewSummary(interview),
+
+        // Questions sections
+        createQuestionsDisplay(interview, data.framework),
+      ),
+    );
+  }
+}
+
+/**
+ * Create type button
+ */
+function createTypeButton(type, isActive, onClick) {
+  const btn = button(
+    {
+      className: `interview-type-btn ${isActive ? "active" : ""}`,
+    },
+    span({ className: "interview-type-icon" }, type.icon),
+    span({ className: "interview-type-name" }, type.name),
+  );
+
+  btn.addEventListener("click", onClick);
+  return btn;
+}
+
+/**
+ * Create interview summary
+ */
+function createInterviewSummary(interview) {
+  const typeInfo = interview.typeInfo;
+
+  return div(
+    { className: "interview-summary card" },
+    div(
+      { className: "interview-summary-header" },
+      h2({}, `${typeInfo.icon} ${typeInfo.name}`),
+      p({ className: "text-muted" }, typeInfo.description),
+    ),
+    div(
+      { className: "interview-summary-stats" },
+      createBadge(`${interview.questions.length} questions`, "default"),
+      createBadge(`~${interview.expectedDurationMinutes} minutes`, "secondary"),
+      interview.coverage.skills.length > 0
+        ? createBadge(
+            `${interview.coverage.skills.length} skills covered`,
+            "primary",
+          )
+        : null,
+      interview.coverage.behaviours.length > 0
+        ? createBadge(
+            `${interview.coverage.behaviours.length} behaviours covered`,
+            "primary",
+          )
+        : null,
+    ),
+  );
+}
+
+/**
+ * Create questions display
+ */
+function createQuestionsDisplay(interview, framework) {
+  // Group questions by type
+  const skillQuestions = interview.questions.filter(
+    (q) => q.targetType === "skill",
+  );
+  const behaviourQuestions = interview.questions.filter(
+    (q) => q.targetType === "behaviour",
+  );
+
+  const sections = [];
+
+  if (skillQuestions.length > 0) {
+    sections.push(
+      createDetailSection({
+        title: `${getConceptEmoji(framework, "skill")} Skill Questions (${skillQuestions.length})`,
+        content: createQuestionsList(skillQuestions),
+      }),
+    );
+  }
+
+  if (behaviourQuestions.length > 0) {
+    sections.push(
+      createDetailSection({
+        title: `${getConceptEmoji(framework, "behaviour")} Behaviour Questions (${behaviourQuestions.length})`,
+        content: createQuestionsList(behaviourQuestions),
+      }),
+    );
+  }
+
+  if (sections.length === 0) {
+    return div(
+      { className: "card" },
+      p(
+        { className: "text-muted" },
+        "No questions available for this combination. Please check that question data exists for the required skills and behaviours.",
+      ),
+    );
+  }
+
+  return div({}, ...sections);
+}
+
+/**
+ * Create questions list
+ */
+function createQuestionsList(questions) {
+  return div(
+    { className: "questions-list" },
+    ...questions.map((q, index) => createQuestionCard(q, index + 1)),
+  );
+}
+
+/**
+ * Create question card
+ */
+function createQuestionCard(questionEntry, number) {
+  const { question, targetName, targetLevel } = questionEntry;
+
+  const followUpsList =
+    question.followUps && question.followUps.length > 0
+      ? div(
+          { className: "question-followups" },
+          h4({}, "Follow-up questions:"),
+          ul({}, ...question.followUps.map((fu) => li({}, fu))),
+        )
+      : null;
+
+  const lookingForList =
+    question.lookingFor && question.lookingFor.length > 0
+      ? div(
+          { className: "question-looking-for" },
+          h4({}, "What to look for:"),
+          ul({}, ...question.lookingFor.map((lf) => li({}, lf))),
+        )
+      : null;
+
+  return div(
+    { className: "question-card" },
+    div(
+      { className: "question-header" },
+      span({ className: "question-number" }, `Q${number}`),
+      div(
+        { className: "question-meta" },
+        createBadge(targetName, "default"),
+        createBadge(formatLevel(targetLevel), "secondary"),
+        question.expectedDurationMinutes
+          ? createBadge(`~${question.expectedDurationMinutes} min`, "secondary")
+          : null,
+      ),
+    ),
+    div({ className: "question-text" }, question.text),
+    followUpsList,
+    lookingForList,
+  );
+}

package/app/pages/job-builder.js

@@ -0,0 +1,50 @@
+/**
+ * Job builder page
+ */
+
+import { render } from "../lib/render.js";
+import { getState } from "../lib/state.js";
+import { createBuilder, createStandardPreview } from "../components/builder.js";
+import { prepareJobBuilderPreview } from "../model/job.js";
+
+/**
+ * Render job builder page
+ */
+export function renderJobBuilder() {
+  const { data } = getState();
+
+  render(
+    createBuilder({
+      title: "Job Builder",
+      description:
+        "Combine a discipline, track, and grade to generate a complete job definition " +
+        "with skill matrix and behaviour profile.",
+      formTitle: "Select Components",
+      emptyPreviewText:
+        "Select all three components to preview the job definition.",
+      buttonText: "View Full Job Definition →",
+      previewPresenter: (selection) =>
+        prepareJobBuilderPreview({
+          ...selection,
+          behaviourCount: data.behaviours.length,
+          grades: data.grades,
+        }),
+      detailPath: (sel) => `/job/${sel.discipline}/${sel.track}/${sel.grade}`,
+      renderPreview: createStandardPreview,
+      helpItems: [
+        {
+          label: "Discipline",
+          text: "Defines the T-shaped skill profile with primary, secondary, and broad skills.",
+        },
+        {
+          label: "Grade",
+          text: "Sets base skill levels and behaviour maturity expectations for career level.",
+        },
+        {
+          label: "Track",
+          text: "Modifies skill and behaviour expectations based on the nature of work.",
+        },
+      ],
+    }),
+  );
+}

package/app/pages/job.js

@@ -0,0 +1,58 @@
+/**
+ * Job detail page with visualizations
+ */
+
+import { render } from "../lib/render.js";
+import { getState } from "../lib/state.js";
+import { renderError } from "../components/error-page.js";
+import { prepareJobDetail } from "../model/job.js";
+import { jobToDOM } from "../formatters/job/dom.js";
+
+/**
+ * Render job detail page
+ * @param {Object} params - Route params
+ */
+export function renderJobDetail(params) {
+  const { discipline: disciplineId, track: trackId, grade: gradeId } = params;
+  const { data } = getState();
+
+  // Find the components
+  const discipline = data.disciplines.find((d) => d.id === disciplineId);
+  const track = data.tracks.find((t) => t.id === trackId);
+  const grade = data.grades.find((g) => g.id === gradeId);
+
+  if (!discipline || !track || !grade) {
+    renderError({
+      title: "Job Not Found",
+      message: "Invalid job combination. One or more components are missing.",
+      backPath: "/job-builder",
+      backText: "← Back to Job Builder",
+    });
+    return;
+  }
+
+  // Use formatter shared module to get job detail view
+  const jobView = prepareJobDetail({
+    discipline,
+    grade,
+    track,
+    skills: data.skills,
+    behaviours: data.behaviours,
+    drivers: data.drivers,
+    capabilities: data.capabilities,
+  });
+
+  if (!jobView) {
+    renderError({
+      title: "Invalid Combination",
+      message: "This discipline, track, and grade combination is not valid.",
+      backPath: "/job-builder",
+      backText: "← Back to Job Builder",
+    });
+    return;
+  }
+
+  // Format using DOM formatter
+  const page = jobToDOM(jobView, { discipline, grade, track });
+  render(page);
+}