← back to AbramsOS
views/prescriptions.ejs
91 lines
<%- include('partials/header', { title: 'Prescriptions' }) %>
<section class="page-head">
<div>
<h1>Prescriptions</h1>
<p class="subtle">
<%= fills.length %> fills imported from the <strong>Shangoo Pharmacy</strong> tax profile
(Jul 2023 → Jul 2026). The <strong>$</strong> column is what the <em>insurance plan</em> paid —
your out-of-pocket on this profile is <strong>$0.00</strong>.
</p>
</div>
<div class="grid-controls">
<label>Person
<select id="pfPerson">
<option value="">All</option>
<% totals.forEach(function(t){ %><option value="<%= t.person %>"><%= t.person %></option><% }) %>
</select>
</label>
<label>Find <input id="pfFind" type="search" placeholder="drug, doctor, rx#…"></label>
</div>
</section>
<section class="cards">
<% totals.forEach(function(t){ %>
<div class="glass card">
<h3><%= t.person %></h3>
<p class="big"><%= t.fills %> <span class="subtle">fills</span></p>
<p class="subtle">Plan paid <strong>$<%= Number(t.plan_paid).toLocaleString(undefined,{minimumFractionDigits:2,maximumFractionDigits:2}) %></strong>
· Out-of-pocket $<%= Number(t.patient_paid).toLocaleString(undefined,{minimumFractionDigits:2,maximumFractionDigits:2}) %></p>
<p class="subtle"><%= t.first_fill ? String(t.first_fill).slice(0,10) : '' %> → <%= t.last_fill ? String(t.last_fill).slice(0,10) : '' %></p>
</div>
<% }) %>
</section>
<section class="glass" style="overflow:auto">
<table class="rx-table" id="pfTable">
<thead>
<tr>
<th>Date</th><th>Person</th><th>Drug</th><th>Rx #</th><th>Qty</th><th>Days</th>
<th>Doctor</th><th>Plan</th><th class="num">Plan paid</th>
</tr>
</thead>
<tbody>
<% fills.forEach(function(f){ %>
<tr data-person="<%= f.person_name || '' %>"
data-find="<%= ((f.drug_name||'')+' '+(f.doctor||'')+' '+(f.rx_number||'')).toLowerCase() %>">
<td class="mono"><%= f.fill_date ? String(f.fill_date).slice(0,10) : '' %></td>
<td><%= f.person_name || '' %></td>
<td><%= f.drug_name %><% if (f.ndc_recalled) { var clr = f.ndc_recall_status==='cleared'; %> <span class="recall-flag <%= clr ? 'clear' : '' %>" title="<%= f.ndc_recall_class %> <%= f.ndc_recall_number %> — <%= (f.ndc_recall_assessment||'on an FDA recall list').replace(/&/g,'&').replace(/\"/g,'"') %>"><%= clr ? '✓ recall (lot clear)' : (f.ndc_recall_status==='possible' ? '⚠ RECALL — check lot' : '⚠ recall — check lot') %></span><% } %></td>
<td class="mono"><%= f.rx_number || '' %><% if (f.refill) { %><span class="subtle"> · rf<%= f.refill %></span><% } %></td>
<td class="num"><%= f.quantity != null ? f.quantity : '' %></td>
<td class="num"><%= f.days_supply != null ? f.days_supply : '' %></td>
<td><%= f.doctor || '' %></td>
<td class="subtle"><%= f.plan_name || '' %></td>
<td class="num"><% if (f.plan_paid != null) { %>$<%= Number(f.plan_paid).toLocaleString(undefined,{minimumFractionDigits:2,maximumFractionDigits:2}) %><% } %></td>
</tr>
<% }) %>
</tbody>
</table>
</section>
<style>
.cards { display:flex; gap:12px; flex-wrap:wrap; margin:14px 0; }
.cards .card { padding:14px 16px; min-width:240px; }
.cards .card h3 { margin:0 0 6px; font-size:14px; }
.cards .big { font-size:22px; font-weight:700; margin:2px 0; }
.rx-table { width:100%; border-collapse:collapse; font-size:13px; }
.rx-table th, .rx-table td { text-align:left; padding:6px 10px; border-bottom:1px solid rgba(255,255,255,.07); white-space:nowrap; }
.rx-table th { position:sticky; top:0; background:rgba(20,20,26,.96); font-size:11px; letter-spacing:.04em; text-transform:uppercase; color:var(--muted,#9a9aa2); }
.rx-table td.num, .rx-table th.num { text-align:right; }
.rx-table td.mono { font-variant-numeric:tabular-nums; }
.rx-table tbody tr:hover { background:rgba(255,255,255,.03); }
.recall-flag { display:inline-block; margin-left:6px; padding:0 6px; border-radius:4px; font-size:10px; font-weight:700;
background:rgba(248,113,113,.18); color:#f87171; border:1px solid rgba(248,113,113,.5); white-space:nowrap; }
.recall-flag.clear { background:rgba(127,208,160,.15); color:#7fd0a0; border-color:rgba(127,208,160,.45); }
</style>
<script>
(function(){
var per = document.getElementById('pfPerson'), find = document.getElementById('pfFind');
var rows = Array.prototype.slice.call(document.querySelectorAll('#pfTable tbody tr'));
function apply(){
var p = per.value, q = (find.value||'').toLowerCase().trim();
rows.forEach(function(r){
var ok = (!p || r.getAttribute('data-person') === p) && (!q || r.getAttribute('data-find').indexOf(q) >= 0);
r.style.display = ok ? '' : 'none';
});
}
per.addEventListener('change', apply); find.addEventListener('input', apply);
})();
</script>