From e1ece093cd1813f06789c33dc3e72159eced1696 Mon Sep 17 00:00:00 2001
From: justin <justin@liquidator.optimal-reality.com>
Date: Sat, 30 May 2026 22:49:35 -0500
Subject: [PATCH] show order timeline with step names + estimated dates on
 success page

Visual timeline with dots, connecting lines, step names, descriptions,
and business-day estimated completion dates. Fetches from /api/v1/order-timeline.
---
 site/public/order/success/index.html | 55 +++++++++++++++++++++++++++-
 1 file changed, 54 insertions(+), 1 deletion(-)

diff --git a/site/public/order/success/index.html b/site/public/order/success/index.html
index 2e1d82d..24c6fde 100644
--- a/site/public/order/success/index.html
+++ b/site/public/order/success/index.html
@@ -57,7 +57,14 @@ Client Portal
 Sign out
 </button> </div> </div> </div> <!-- Mobile menu button --> <button type="button" class="md:hidden text-gray-600 hover:text-gray-900" id="mobile-menu-btn"> <svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16"></path></svg> </button> </div> </div> <!-- Mobile menu --> <div id="mobile-menu" class="md:hidden hidden border-t border-gray-200 bg-white"> <div class="px-4 py-3 space-y-1"> <p class="text-xs font-semibold text-blue-500 uppercase tracking-wider px-2 pt-1">Telecom</p> <a href="/services/telecom/fcc-499a" class="block px-2 py-2 text-sm text-gray-700 hover:bg-gray-50 rounded">FCC 499A Filing</a> <a href="/services/telecom/stir-shaken" class="block px-2 py-2 text-sm text-gray-700 hover:bg-gray-50 rounded">STIR/SHAKEN</a> <a href="/services/telecom/ipes-isp" class="block px-2 py-2 text-sm text-gray-700 hover:bg-gray-50 rounded">FCC Carrier / ISP Registration</a> <a href="/services/telecom/database-management" class="block px-2 py-2 text-sm text-gray-700 hover:bg-gray-50 rounded">Telecom Databases</a> <a href="/services/telecom/state-puc" class="block px-2 py-2 text-sm text-gray-700 hover:bg-gray-50 rounded">State PUC/PSC</a> <a href="/services/telecom/canada-crtc" class="block px-2 py-2 text-sm font-medium text-blue-600 hover:bg-blue-50 rounded">Canada CRTC Package <span class="inline-flex items-center px-1.5 py-0.5 rounded-full text-[9px] font-bold bg-red-500 text-white ml-1 animate-pulse">HOT</span></a> <p class="text-xs font-semibold text-orange-500 uppercase tracking-wider px-2 pt-3">Trucking / DOT</p> <a href="/services/trucking" class="block px-2 py-2 text-sm text-gray-700 hover:bg-gray-50 rounded">DOT Compliance Services</a> <a href="/order/dot-compliance" class="block px-2 py-2 text-sm text-gray-700 hover:bg-gray-50 rounded">MCS-150 / BOC-3 / UCR</a> <a href="/order/trucking-new-carrier" class="block px-2 py-2 text-sm font-medium text-orange-600 hover:bg-orange-50 rounded">New Carrier Setup</a> <a href="/tools/dot-compliance-check" class="block px-2 py-2 text-sm font-medium text-orange-600 hover:bg-orange-50 rounded">DOT Compliance Check <span class="inline-flex items-center px-1.5 py-0.5 rounded-full text-[9px] font-bold bg-orange-500 text-white ml-1">FREE</span></a>  <p class="text-xs font-semibold text-purple-500 uppercase tracking-wider px-2 pt-3">Data Privacy</p> <a href="/services/privacy/ccpa-audit" class="block px-2 py-2 text-sm text-gray-700 hover:bg-gray-50 rounded">CCPA/CPRA Audit</a> <a href="/services/privacy/privacy-policy" class="block px-2 py-2 text-sm text-gray-700 hover:bg-gray-50 rounded">Privacy Policy Review</a> <a href="/services/privacy/data-mapping" class="block px-2 py-2 text-sm text-gray-700 hover:bg-gray-50 rounded">Data Mapping</a> <a href="/services/privacy/breach-response" class="block px-2 py-2 text-sm text-gray-700 hover:bg-gray-50 rounded">Breach Response Plan</a> <p class="text-xs font-semibold text-green-500 uppercase tracking-wider px-2 pt-3">TCPA</p> <a href="/services/tcpa/consent-audit" class="block px-2 py-2 text-sm text-gray-700 hover:bg-gray-50 rounded">Consent Audit</a> <a href="/services/tcpa/dnc-compliance" class="block px-2 py-2 text-sm text-gray-700 hover:bg-gray-50 rounded">DNC Compliance</a> <a href="/services/tcpa/campaign-review" class="block px-2 py-2 text-sm text-gray-700 hover:bg-gray-50 rounded">Campaign Review</a> <p class="text-xs font-semibold text-slate-500 uppercase tracking-wider px-2 pt-3">Corporate</p> <a href="/services/corporate/formation" class="block px-2 py-2 text-sm text-gray-700 hover:bg-gray-50 rounded">Business Formation</a> <a href="/services/corporate/state-registration" class="block px-2 py-2 text-sm text-gray-700 hover:bg-gray-50 rounded">State Registration</a> <a href="/services/corporate/annual-reports" class="block px-2 py-2 text-sm text-gray-700 hover:bg-gray-50 rounded">Annual Reports</a> <a href="/services/corporate/registered-agent" class="block px-2 py-2 text-sm text-gray-700 hover:bg-gray-50 rounded">Registered Agent</a> <div class="border-t border-gray-100 my-2"></div> <a href="/services" class="block px-2 py-2 text-sm text-gray-700 hover:bg-gray-50 rounded">All Services</a> <a href="/pricing" class="block px-2 py-2 text-sm text-gray-700 hover:bg-gray-50 rounded">Pricing</a> <a href="/tools/contractor-quiz" class="block px-2 py-2 text-sm text-gray-700 hover:bg-gray-50 rounded">Free Tools</a> <a href="/contact" class="block px-2 py-2 text-sm text-gray-700 hover:bg-gray-50 rounded">Contact</a> <a href="/order/formation" class="block mx-2 mt-2 px-4 py-2.5 text-sm font-medium text-white bg-pw-700 hover:bg-pw-800 rounded-lg text-center transition-colors">Form a Business</a> </div> </div> </nav> <main class="flex-1">   <section class="bg-pw-950 py-12 sm:py-16"> <div class="max-w-4xl mx-auto px-4 text-center"> <h1 class="text-3xl sm:text-4xl font-bold text-white mb-3">Order Confirmation</h1> <p class="text-gray-300 text-base sm:text-lg max-w-2xl mx-auto">
 Please wait while we confirm your payment.
-</p> </div> </section>  <section class="bg-gray-50 min-h-[60vh] py-16"> <div class="max-w-2xl mx-auto px-4"> <!-- Loading state --> <div id="state-loading" class="text-center"> <div class="inline-flex items-center justify-center w-16 h-16 rounded-full bg-pw-100 mb-6"> <svg class="animate-spin w-8 h-8 text-pw-700" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"> <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle> <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path> </svg> </div> <p class="text-lg font-medium text-gray-700">Confirming your payment&hellip;</p> <p class="text-sm text-gray-500 mt-2">This usually takes just a moment.</p> </div> <!-- Success state --> <div id="state-success" class="hidden"> <!-- Confirmed --> <div class="bg-white border border-green-200 rounded-2xl shadow-sm p-8 text-center mb-6"> <div class="inline-flex items-center justify-center w-16 h-16 rounded-full bg-green-100 mb-5"> <svg class="w-8 h-8 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"> <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"></path> </svg> </div> <h2 class="text-2xl font-bold text-gray-900 mb-2">Payment Confirmed</h2> <p class="text-gray-600 mb-4">Thank you — your order has been received and is now being processed.</p> <div id="order-id-display" class="inline-block bg-gray-100 rounded-lg px-4 py-2 text-sm font-mono text-gray-700 mb-2"></div> </div> <!-- Email updates notice --> <div class="bg-blue-50 border border-blue-200 rounded-2xl shadow-sm p-6 mb-6 flex gap-4 items-start"> <svg class="w-6 h-6 text-blue-600 shrink-0 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"> <path stroke-linecap="round" stroke-linejoin="round" d="M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75"></path> </svg> <div> <p class="text-sm font-semibold text-blue-900 mb-1">You will receive email updates throughout your order</p> <p class="text-sm text-blue-800" id="email-updates-text">A confirmation has been sent to <strong id="success-email" class="font-semibold"></strong>. We will email you as each step is completed.</p> </div> </div> <!-- Portal password setup --> <div class="bg-white border border-gray-200 rounded-2xl shadow-sm p-6 mb-6"> <div class="flex items-start gap-3 mb-4"> <svg class="w-6 h-6 text-pw-700 shrink-0 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"> <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 5.25a3 3 0 013 3m3 0a6 6 0 01-7.029 5.912c-.563-.097-1.159.026-1.563.43L10.5 17.25H8.25v2.25H6v2.25H2.25v-2.818c0-.597.237-1.17.659-1.591l6.499-6.499c.404-.404.527-1 .43-1.563A6 6 0 1121.75 8.25z"></path> </svg> <div> <p class="text-sm font-semibold text-gray-900 mb-0.5">Set up your client portal access</p> <p class="text-sm text-gray-600">Track your order, download documents, and manage your services at any time. Set a password to activate your portal account.</p> </div> </div> <!-- Already set state --> <div id="portal-already-set" class="hidden"> <div class="rounded-lg bg-green-50 border border-green-200 p-3 flex items-center gap-2 text-sm text-green-800"> <svg class="w-4 h-4 text-green-600 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"></path></svg>
+</p> </div> </section>  <section class="bg-gray-50 min-h-[60vh] py-16"> <div class="max-w-2xl mx-auto px-4"> <!-- Loading state --> <div id="state-loading" class="text-center"> <div class="inline-flex items-center justify-center w-16 h-16 rounded-full bg-pw-100 mb-6"> <svg class="animate-spin w-8 h-8 text-pw-700" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"> <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle> <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path> </svg> </div> <p class="text-lg font-medium text-gray-700">Confirming your payment&hellip;</p> <p class="text-sm text-gray-500 mt-2">This usually takes just a moment.</p> </div> <!-- Success state --> <div id="state-success" class="hidden"> <!-- Confirmed --> <div class="bg-white border border-green-200 rounded-2xl shadow-sm p-8 text-center mb-6"> <div class="inline-flex items-center justify-center w-16 h-16 rounded-full bg-green-100 mb-5"> <svg class="w-8 h-8 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"> <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"></path> </svg> </div> <h2 class="text-2xl font-bold text-gray-900 mb-2">Payment Confirmed</h2> <p class="text-gray-600 mb-4">Thank you — your order has been received and is now being processed.</p> <div id="order-id-display" class="inline-block bg-gray-100 rounded-lg px-4 py-2 text-sm font-mono text-gray-700 mb-2"></div> </div> <!-- Email updates notice --> <div class="bg-blue-50 border border-blue-200 rounded-2xl shadow-sm p-6 mb-6 flex gap-4 items-start"> <svg class="w-6 h-6 text-blue-600 shrink-0 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"> <path stroke-linecap="round" stroke-linejoin="round" d="M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75"></path> </svg> <div> <p class="text-sm font-semibold text-blue-900 mb-1">You will receive email updates throughout your order</p> <p class="text-sm text-blue-800" id="email-updates-text">A confirmation has been sent to <strong id="success-email" class="font-semibold"></strong>. We will email you as each step is completed.</p> </div> </div> <!-- Order timeline -->
+<div id="order-timeline" class="hidden bg-white border border-gray-200 rounded-2xl shadow-sm p-6 mb-6">
+  <h3 style="font-size:16px;font-weight:700;color:#1a2744;margin:0 0 4px">Estimated Timeline</h3>
+  <p style="font-size:13px;color:#64748b;margin:0 0 16px">Business days only — excludes weekends and US holidays.</p>
+  <div id="timeline-steps"></div>
+</div>
+
+<!-- Portal password setup --> <div class="bg-white border border-gray-200 rounded-2xl shadow-sm p-6 mb-6"> <div class="flex items-start gap-3 mb-4"> <svg class="w-6 h-6 text-pw-700 shrink-0 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"> <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 5.25a3 3 0 013 3m3 0a6 6 0 01-7.029 5.912c-.563-.097-1.159.026-1.563.43L10.5 17.25H8.25v2.25H6v2.25H2.25v-2.818c0-.597.237-1.17.659-1.591l6.499-6.499c.404-.404.527-1 .43-1.563A6 6 0 1121.75 8.25z"></path> </svg> <div> <p class="text-sm font-semibold text-gray-900 mb-0.5">Set up your client portal access</p> <p class="text-sm text-gray-600">Track your order, download documents, and manage your services at any time. Set a password to activate your portal account.</p> </div> </div> <!-- Already set state --> <div id="portal-already-set" class="hidden"> <div class="rounded-lg bg-green-50 border border-green-200 p-3 flex items-center gap-2 text-sm text-green-800"> <svg class="w-4 h-4 text-green-600 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"></path></svg>
 Portal account activated. <a id="portal-login-link" href="https://portal.performancewest.net" class="underline font-medium hover:text-green-900 ml-1">Log in to your portal →</a> </div> </div> <!-- Password form --> <div id="portal-password-form"> <div class="space-y-3"> <div> <label for="portal-password" class="block text-xs font-medium text-gray-700 mb-1">Password <span class="text-red-500">*</span></label> <input type="password" id="portal-password" autocomplete="new-password" class="w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm text-gray-900 placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-pw-500 focus:border-pw-500 transition-colors" placeholder="At least 8 characters" minlength="8"> </div> <div> <label for="portal-password-confirm" class="block text-xs font-medium text-gray-700 mb-1">Confirm password <span class="text-red-500">*</span></label> <input type="password" id="portal-password-confirm" autocomplete="new-password" class="w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm text-gray-900 placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-pw-500 focus:border-pw-500 transition-colors" placeholder="Repeat password" minlength="8"> </div> <div id="portal-password-error" class="hidden text-xs text-red-600 font-medium"></div> <button type="button" id="btn-set-portal-password" class="w-full inline-flex items-center justify-center gap-2 bg-pw-700 hover:bg-pw-800 text-white text-sm font-medium px-5 py-2.5 rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed"> <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 5.25a3 3 0 013 3m3 0a6 6 0 01-7.029 5.912c-.563-.097-1.159.026-1.563.43L10.5 17.25H8.25v2.25H6v2.25H2.25v-2.818c0-.597.237-1.17.659-1.591l6.499-6.499c.404-.404.527-1 .43-1.563A6 6 0 1121.75 8.25z"></path></svg>
 Activate Portal Account
 </button> <p class="text-xs text-gray-400 text-center">You can also set a password later from your email confirmation link.</p> </div> </div> </div> <!-- Next steps: canada_crtc --> <div id="next-steps-canada_crtc" class="hidden bg-white border border-gray-200 rounded-2xl shadow-sm p-8 mb-6"> <h3 class="text-lg font-semibold text-gray-900 mb-5">What happens next</h3> <p class="text-sm text-gray-500 uppercase tracking-wide font-semibold mb-4">Estimated timeline: 10–15 business days</p> <ol class="space-y-4"> <li class="flex gap-4"> <span class="flex-shrink-0 inline-flex items-center justify-center w-7 h-7 rounded-full bg-pw-700 text-white text-sm font-bold">1</span> <div> <p class="font-medium text-gray-900">BC Incorporation Filing</p> <p class="text-sm text-gray-600">We register your British Columbia corporation with BC Registries, including name search and registered office setup.</p> </div> </li> <li class="flex gap-4"> <span class="flex-shrink-0 inline-flex items-center justify-center w-7 h-7 rounded-full bg-pw-700 text-white text-sm font-bold">2</span> <div> <p class="font-medium text-gray-900">CRTC &amp; BITS Registration</p> <p class="text-sm text-gray-600">We generate your CRTC registration letter for you to eSign. For BITS international authorization, we arrange a brief online notarization session (~5 min video call with a notary) and submit the notarized Form 503 to the CRTC on your behalf.</p> </div> </li> <li class="flex gap-4"> <span class="flex-shrink-0 inline-flex items-center justify-center w-7 h-7 rounded-full bg-pw-700 text-white text-sm font-bold">3</span> <div> <p class="font-medium text-gray-900">CCTS, Domain &amp; DID Provisioning</p> <p class="text-sm text-gray-600">We register your complaint-handling program with CCTS, provision your Canadian phone number (DID), and set up your .ca domain.</p> </div> </li> <li class="flex gap-4"> <span class="flex-shrink-0 inline-flex items-center justify-center w-7 h-7 rounded-full bg-pw-700 text-white text-sm font-bold">4</span> <div> <p class="font-medium text-gray-900">Corporate Binder Delivery</p> <p class="text-sm text-gray-600">You receive your complete digital and physical corporate binder with all certificates, resolutions, and registration documents.</p> </div> </li> </ol> </div> <!-- Next steps: formation --> <div id="next-steps-formation" class="hidden bg-white border border-gray-200 rounded-2xl shadow-sm p-8 mb-6"> <h3 class="text-lg font-semibold text-gray-900 mb-5">What happens next</h3> <p class="text-sm text-gray-500 uppercase tracking-wide font-semibold mb-4">Estimated timeline: 3–10 business days</p> <ol class="space-y-4"> <li class="flex gap-4"> <span class="flex-shrink-0 inline-flex items-center justify-center w-7 h-7 rounded-full bg-pw-700 text-white text-sm font-bold">1</span> <div> <p class="font-medium text-gray-900">Name Availability Check</p> <p class="text-sm text-gray-600">We verify your chosen business name is available with the state and flag any conflicts before filing.</p> </div> </li> <li class="flex gap-4"> <span class="flex-shrink-0 inline-flex items-center justify-center w-7 h-7 rounded-full bg-pw-700 text-white text-sm font-bold">2</span> <div> <p class="font-medium text-gray-900">State Filing</p> <p class="text-sm text-gray-600">Your formation documents are prepared and submitted to the appropriate state authority on your behalf.</p> </div> </li> <li class="flex gap-4"> <span class="flex-shrink-0 inline-flex items-center justify-center w-7 h-7 rounded-full bg-pw-700 text-white text-sm font-bold">3</span> <div> <p class="font-medium text-gray-900">Document Delivery</p> <p class="text-sm text-gray-600">Approved formation documents, EIN (if ordered), and operating agreement are delivered to your email.</p> </div> </li> </ol> </div> <!-- Next steps: bundle / compliance / generic --> <div id="next-steps-generic" class="hidden bg-white border border-gray-200 rounded-2xl shadow-sm p-8 mb-6"> <h3 class="text-lg font-semibold text-gray-900 mb-4">What happens next</h3> <p class="text-gray-600">Our team will review your order and begin processing. You will receive a status update by email within one business day.</p> </div> <!-- Trucking insurance upsell (shown for DOT/trucking orders) -->
@@ -229,9 +236,55 @@ Send reset link
   var DOT_SLUGS = ["mcs150-update","ucr-registration","boc3-filing","dot-registration","mc-authority","dot-drug-alcohol","dot-audit-prep","dot-full-compliance","irp-registration","ifta-application","usdot-reactivation","emergency-temporary-authority","new-carrier-bundle"];
   var NEW_CARRIER_SLUGS = ["new-carrier-bundle","dot-registration","mc-authority"];
 
+  // Fetch and render order timeline
+  function renderTimeline(orderId) {
+    fetch(API + "/api/v1/order-timeline/" + encodeURIComponent(orderId))
+      .then(function(r) { return r.json(); })
+      .then(function(d) {
+        if (!d.timelines || d.timelines.length === 0) return;
+        var container = document.getElementById("order-timeline");
+        var stepsEl = document.getElementById("timeline-steps");
+        if (!container || !stepsEl) return;
+
+        var html = "";
+        d.timelines.forEach(function(tl) {
+          if (d.timelines.length > 1) {
+            html += '<p style="font-size:13px;font-weight:600;color:#f97316;margin:12px 0 6px">' + (tl.service_name || tl.service_slug) + '</p>';
+          }
+          tl.steps.forEach(function(step, i) {
+            var isFirst = i === 0;
+            var isLast = i === tl.steps.length - 1;
+            var color = isFirst ? "#059669" : "#94a3b8";
+            var dotBg = isFirst ? "#f0fdf4" : "#f8fafc";
+            html += '<div style="display:flex;gap:12px;position:relative">';
+            // Vertical line
+            if (!isLast) html += '<div style="position:absolute;left:11px;top:24px;bottom:0;width:2px;background:#e2e8f0"></div>';
+            // Dot
+            html += '<div style="width:24px;height:24px;border-radius:50%;background:' + dotBg + ';border:2px solid ' + color + ';flex-shrink:0;display:flex;align-items:center;justify-content:center;z-index:1">';
+            if (isFirst) html += '<svg style="width:12px;height:12px;color:#059669" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>';
+            html += '</div>';
+            // Content
+            html += '<div style="padding-bottom:16px;flex:1">';
+            html += '<div style="display:flex;justify-content:space-between;align-items:baseline">';
+            html += '<span style="font-size:14px;font-weight:600;color:' + (isFirst ? "#059669" : "#374151") + '">' + step.name + '</span>';
+            html += '<span style="font-size:12px;color:#94a3b8">' + step.estimated_date + '</span>';
+            html += '</div>';
+            html += '<p style="font-size:13px;color:#64748b;margin:2px 0 0">' + step.description + '</p>';
+            html += '</div></div>';
+          });
+        });
+
+        stepsEl.innerHTML = html;
+        container.classList.remove("hidden");
+      }).catch(function() {});
+  }
+
   // Wait for order data to be available
   setTimeout(function() {
     if (!orderId) return;
+    // Fetch timeline
+    renderTimeline(orderId);
+
     fetch(API + "/api/v1/compliance-orders/" + encodeURIComponent(orderId))
       .then(function(r) { return r.json(); })
       .then(function(d) {