crcp Panel 7: add 6/12/24-month window toggle (persisted, re-queries /api/fha-expiring; h3 + count update live)

ba57a2589c4a507f4620c18d9077cbc6fcac5601 · 2026-07-31 11:12:17 -0700 · Steve

Files touched

M public/crcp.html

Diff

commit ba57a2589c4a507f4620c18d9077cbc6fcac5601
Author: Steve <steve@designerwallcoverings.com>
Date:   Fri Jul 31 11:12:17 2026 -0700

    crcp Panel 7: add 6/12/24-month window toggle (persisted, re-queries /api/fha-expiring; h3 + count update live)
---
 public/crcp.html | 18 +++++++++++++++---
 1 file changed, 15 insertions(+), 3 deletions(-)

diff --git a/public/crcp.html b/public/crcp.html
index f766dae..844c40a 100644
--- a/public/crcp.html
+++ b/public/crcp.html
@@ -123,7 +123,12 @@
       </div>
     </div>
   </div>
-  <div class="panel"><h3>⚠️ FHA approval expiring within 12 months <span class="c" id="xpC"></span></h3>
+  <div class="panel"><h3>⚠️ FHA approval expiring within <span id="xpWin">12</span> months <span class="c" id="xpC"></span></h3>
+    <div class="wtabs" data-xp-win>
+      <button type="button" class="wtab" data-months="6" data-days="183">6 months</button>
+      <button type="button" class="wtab on" data-months="12" data-days="365">12 months</button>
+      <button type="button" class="wtab" data-months="24" data-days="730">24 months</button>
+    </div>
     <table id="xpTbl"><thead><tr>
       <th class="srt" data-col="project">Project</th>
       <th class="srt" data-col="city">City</th>
@@ -355,7 +360,7 @@ document.querySelectorAll('#fmTbl th.srt').forEach(th=>th.onclick=()=>{ const c=
 // Panel 7 — FHA approval expiring within 12 months. Own endpoint (daily-churn data → slow refresh,
 // not the 3s poll). Soonest-to-lapse first; the Days cell reddens under 30d, ambers under 90d.
 // Reuses the same srt()/markHdr() sort engine as the broker/firm tables.
-let xpSort={col:'days',dir:1}, xpData=[];
+let xpSort={col:'days',dir:1}, xpData=[], xpDays=+localStorage.getItem('crcp_xp_days')||365;
 const xesc=s=>String(s==null?'':s).replace(/[&<>"]/g,m=>({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;'}[m]));
 function renderExpiring(){
   const rows=srt(xpData, xpSort.col, xpSort.dir);
@@ -367,7 +372,14 @@ function renderExpiring(){
   markHdr('xpTbl',xpSort);
 }
 document.querySelectorAll('#xpTbl th.srt').forEach(th=>th.onclick=()=>{ const c=th.dataset.col; if(xpSort.col===c) xpSort.dir*=-1; else {xpSort.col=c; xpSort.dir=1;} renderExpiring(); });
-async function loadExpiring(){ try{ const d=await (await fetch('/api/fha-expiring?days=365')).json(); xpData=d.condos||[]; renderExpiring(); }catch(e){ $('#xpC').textContent='reconnecting…'; } }
+async function loadExpiring(){ try{ const d=await (await fetch('/api/fha-expiring?days='+xpDays)).json(); xpData=d.condos||[]; renderExpiring(); }catch(e){ $('#xpC').textContent='reconnecting…'; } }
+// window toggle (6/12/24 mo): re-query + persist; reflects the persisted choice on load.
+(function(){
+  const wrap=document.querySelector('[data-xp-win]'), winLbl=document.getElementById('xpWin'); if(!wrap) return;
+  const sync=b=>{ wrap.querySelectorAll('.wtab').forEach(x=>x.classList.toggle('on',x===b)); if(winLbl) winLbl.textContent=b.dataset.months; };
+  const init=[...wrap.querySelectorAll('.wtab')].find(b=>+b.dataset.days===xpDays); if(init) sync(init);
+  wrap.querySelectorAll('.wtab').forEach(b=>b.addEventListener('click',()=>{ xpDays=+b.dataset.days; localStorage.setItem('crcp_xp_days',xpDays); sync(b); loadExpiring(); }));
+})();
 loadExpiring(); setInterval(loadExpiring, 300000);
 
 async function poll(){

← 97887fa CRCP lending layer: wire Lending into CRCP nav, mark NCUA/HM · back to Commercialrealestate · CRCP: harden auth surface (yolo iter 1) — login rate-limit + 6aeef28 →