Embed

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>New Hire Onboarding Dashboard</title>

  <style>
    /* isolate styles so they don't clash with ANSA site */
    .he-demo-wrapper {
      width: 100%;
      background: #f5f7fa;
      padding-bottom: 24px;
    }

    /* Marian header */
    .he-mu-header {
      width: 100%;
      background: #002e5d;
      color: #fff;
    }

    .he-mu-header-inner {
      max-width: 1200px;
      margin: 0 auto;
      padding: 16px 24px;
      display: flex;
      align-items: center;
      gap: 14px;
    }

    .he-mu-title {
      font-size: 18px;
      font-weight: bold;
      white-space: nowrap;
    }

    .he-mu-subtitle {
      font-size: 16px;
      opacity: 0.95;
    }

    /* content */
    .he-content {
      max-width: 1200px;
      margin: 0 auto;
      padding: 24px 16px;
    }

    .he-content h1 {
      margin: 0 0 16px 0;
      font-size: 20px;
      font-weight: 600;
    }

    table#onboardingTable {
      width: 100%;
      border-collapse: collapse;
      background: #ffffff;
      table-layout: fixed;
    }

    #onboardingTable th,
    #onboardingTable td {
      border: 1px solid #ddd;
      padding: 10px;
      font-size: 14px;
      text-align: center;
      white-space: nowrap;
    }

    #onboardingTable th {
      background: #f2f2f2;
      font-weight: bold;
    }

    #onboardingTable td.name {
      text-align: left;
      font-weight: bold;
    }

    .status {
      font-weight: bold;
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }

    .complete { color: #2e7d32; }
    .request { color: #1565c0; cursor: pointer; text-decoration: underline; }
    .reminder { color: #ef6c00; }
    .escalated { color: #c62828; }

    .he-banner {
      margin-top: 14px;
      padding: 10px;
      background: #e8f5e9;
      color: #2e7d32;
      font-weight: bold;
      display: none;
    }
  </style>
</head>

<body>
  <div class="he-demo-wrapper">

    
    <div class="he-mu-header">
      <div class="he-mu-header-inner">
        <div class="he-mu-title">Marian University of Fond du Lac</div>
        <div>|</div>
        <div class="he-mu-subtitle">New Hire Onboarding Dashboard</div>
      </div>
    </div>

    
    <div class="he-content">
      <h1>Onboarding Status</h1>

      <table id="onboardingTable">
        <thead>
          <tr>
            <th>Name</th>
            <th>Role</th>
            <th>Sign Agreements</th>
            <th>Create ID</th>
            <th>PC Request</th>
            <th>Physical ID Card</th>
            <th>Parking Pass</th>
            <th>Onboarding Video</th>
          </tr>
        </thead>
        <tbody></tbody>
      </table>

      <div id="completeBanner" class="he-banner">
        Onboarding steps completed
      </div>
    </div>

  </div>

  <script type="module">
    const API_URL = "https://apim.workato.com/ansa-bank/demo/highered/Onboarding";
    const API_TOKEN = "104da912124ce6f6754ed2fdf5c3a5aa58bf2f6b00c2fdf3b35a972fec9f11ec";

    function getQueryParam(name) {
    // 1) normal query string
    const qs = new URLSearchParams(window.location.search).get(name);
    if (qs) return qs;

    // 2) query string embedded inside hash (common in embedded/SPAs)
    const hash = window.location.hash || "";
    const hashQuery = hash.includes("?") ? hash.split("?")[1] : "";
    if (hashQuery) {
        const hq = new URLSearchParams(hashQuery).get(name);
        if (hq) return hq;
    }

    // 3) last resort: parse full href
    return new URL(window.location.href).searchParams.get(name);
    }


    const hireId = getQueryParam("hire_id");
    const token = getQueryParam("token");

    async function apiCall(payload) {
      const res = await fetch(API_URL, {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          "Api-Token": API_TOKEN
        },
        body: JSON.stringify(payload)
      });

      const text = await res.text();
      try {
        return text ? JSON.parse(text) : null;
      } catch {
        return null;
      }
    }

    async function requestSign(hireId) {
      if (!hireId) return;

      await apiCall({
        action: "request_sign",
        hire_id: hireId,
        data: {
          display_name: "",
          role_title: "",
          source: "ui",
          token: "",
          policy_id: ""
        }
      });

      await loadStatus();
    }
    window.requestSign = requestSign;

    function statusCell(status, hireId) {
      switch (status) {
        case "complete":
          return `<span class="status complete">✔ Complete</span>`;
        case "request":
          return `<span class="status request" onclick="requestSign('${hireId}')">Request</span>`;
        case "reminder_sent":
          return `<span class="status reminder">⏱ Reminder Sent</span>`;
        case "escalated":
          return `<span class="status escalated">⚠ Escalated</span>`;
        default:
          return `<span>${status || ""}</span>`;
      }
    }

    async function loadStatus() {
      const res = await apiCall({
        action: "fetch_status",
        hire_id: hireId,
        data: {}
      });

      console.log("fetch_status raw response", res);

      const api = res && res.response ? res.response : res;

      if (!api || api.success !== true || !api.data || !Array.isArray(api.data.hires)) {
        console.warn("Invalid fetch_status payload", api);
        return;
      }

      const tbody = document.querySelector("#onboardingTable tbody");
      tbody.innerHTML = "";

      api.data.hires.forEach(hire => {
        const stepMap = {};
        (hire.steps || []).forEach(s => {
          stepMap[s.step_name] = s.status;
        });

        const tr = document.createElement("tr");
        tr.innerHTML = `
          <td class="name">${hire.display_name || ""}</td>
          <td>${hire.role_title || ""}</td>
          <td>${statusCell(stepMap["Sign Agreements"], hire.hire_id)}</td>
          <td>${statusCell(stepMap["Create ID"], hire.hire_id)}</td>
          <td>${statusCell(stepMap["PC Request"], hire.hire_id)}</td>
          <td>${statusCell(stepMap["Physical ID Card"], hire.hire_id)}</td>
          <td>${statusCell(stepMap["Parking Pass"], hire.hire_id)}</td>
          <td>${statusCell(stepMap["Onboarding Video"], hire.hire_id)}</td>
        `;
        tbody.appendChild(tr);
      });
    }

async function acceptOfferIfTokenPresent() {
  console.log("acceptOfferIfTokenPresent()", { hireId, token });

  if (!hireId || !token) {
    console.warn("Missing hire_id or token — skipping offer_accept");
    return;
  }

  const payload = {
    action: "offer_accept",
    hire_id: hireId,
    data: {
      display_name: "",
      role_title: "",
      source: "email",
      token: token,
      policy_id: ""
    }
  };

  console.log("offer_accept payload", payload);

  await apiCall(payload);
}


    (async function init() {
      await acceptOfferIfTokenPresent();
      await loadStatus();
    })();
  </script>
</body>
</html>

ANSA Solutions

We help organizations streamline operations, enhance efficiency, and drive business growth through AI-powered automation. By leveraging cutting-edge AI solutions, we simplify complex workflows, optimize data processing, and enable smarter decision-making.