danvics/pediatric-ai-scribe-v3
1
0
Fork 0
Code Issues Pull requests Projects Releases 14 Packages Wiki Activity Actions
pediatric-ai-scribe-v3/public/components/calculators.html
Daniel a5f073dcdd Interactive vital signs selector with clinical notes per age group 
Replace static vital signs table with interactive age group dropdown.
Each selection shows: HR (awake/sleeping), RR, SBP, DBP, temperature,
SpO2 target, weight range, and age-specific clinical notes.

10 age groups: preterm through 18 years. Values from Harriet Lane
Handbook 23rd Edition. Includes AAP 2017 BP classification thresholds
for ages 13+, ETT sizing formulas, and clinical pearls (orthostatic
testing, febrile tachycardia, athletic bradycardia, etc.).

Full reference table preserved as collapsible "View All Age Groups".
2026-04-11 04:19:39 +02:00

500 lines
33 KiB
HTML
Raw Blame History

<div class="module-header">
<h2><i class="fas fa-calculator"></i> Pediatric Calculators</h2>
<p>Clinical calculators for pediatric medicine</p>
</div>
<!-- Calculator selector pills -->
<div style="display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px;">
<button class="calc-nav-pill active" data-calc="bp">BP Percentile</button>
<button class="calc-nav-pill" data-calc="bmi">BMI Percentile</button>
<button class="calc-nav-pill" data-calc="growth">Growth Charts</button>
<button class="calc-nav-pill" data-calc="bili">Bilirubin</button>
<button class="calc-nav-pill" data-calc="vitals">Vital Signs</button>
<button class="calc-nav-pill" data-calc="bsa">Body Surface Area</button>
<button class="calc-nav-pill" data-calc="dose">Weight-Based Dosing</button>
</div>
<!-- ═══════════ BP PERCENTILE CALCULATOR ═══════════ -->
<div id="calc-bp" class="calc-panel">
<div class="card">
<div class="card-header">
<h3><i class="fas fa-heart-pulse"></i> Blood Pressure Percentile</h3>
<span style="font-size:11px;color:var(--g500);">AAP 2017 Clinical Practice Guideline</span>
</div>
<div style="padding:16px;">
<p style="font-size:12px;color:var(--g500);margin:0 0 16px;">Based on normative tables for normal-weight children ages 1-17. Flynn et al., Pediatrics 2017;140(3):e20171904.</p>
<div class="calc-grid">
<div class="calc-field">
<label>Age (years)</label>
<input type="number" id="bp-age" min="1" max="17" step="1" placeholder="1-17">
</div>
<div class="calc-field">
<label>Sex</label>
<select id="bp-sex"><option value="">Select</option><option value="male">Male</option><option value="female">Female</option></select>
</div>
<div class="calc-field">
<label>Height (cm)</label>
<input type="number" id="bp-height" min="50" max="200" step="0.1" placeholder="e.g. 110">
</div>
<div class="calc-field">
<label>Systolic BP (mmHg)</label>
<input type="number" id="bp-systolic" min="50" max="250" placeholder="e.g. 105">
</div>
<div class="calc-field">
<label>Diastolic BP (mmHg)</label>
<input type="number" id="bp-diastolic" min="30" max="150" placeholder="e.g. 65">
</div>
</div>
<button id="btn-calc-bp" class="btn-sm btn-primary" style="margin-top:12px;"><i class="fas fa-calculator"></i> Calculate</button>
<button id="btn-clear-bp" class="btn-sm btn-ghost" style="margin-top:12px;">Clear</button>
<div id="bp-result" class="calc-result hidden"></div>
<div id="bp-chart-container" class="chart-container hidden"><canvas id="bp-chart-canvas"></canvas></div>
<details style="margin-top:16px;font-size:12px;border:1px solid var(--g200);border-radius:8px;padding:0;">
<summary style="padding:10px 14px;cursor:pointer;font-weight:600;color:var(--g700);background:var(--g50);border-radius:8px;">Definitions: Hypertension &amp; Hypotension (AAP 2017 / Nelson)</summary>
<div style="padding:12px 14px;">
<p style="font-weight:700;color:var(--g800);margin:0 0 8px;">Hypertension Classification (AAP 2017)</p>
<table style="width:100%;font-size:12px;border-collapse:collapse;margin-bottom:14px;">
<thead><tr style="background:var(--g100);"><th style="padding:6px 8px;text-align:left;border:1px solid var(--g200);">Category</th><th style="padding:6px 8px;text-align:left;border:1px solid var(--g200);">Ages 1 to &lt;13 years</th><th style="padding:6px 8px;text-align:left;border:1px solid var(--g200);">Ages &ge;13 years</th></tr></thead>
<tbody>
<tr><td style="padding:6px 8px;border:1px solid var(--g200);font-weight:600;color:#10b981;">Normal</td><td style="padding:6px 8px;border:1px solid var(--g200);">&lt;90th percentile</td><td style="padding:6px 8px;border:1px solid var(--g200);">&lt;120/&lt;80 mmHg</td></tr>
<tr><td style="padding:6px 8px;border:1px solid var(--g200);font-weight:600;color:#f59e0b;">Elevated BP</td><td style="padding:6px 8px;border:1px solid var(--g200);">&ge;90th to &lt;95th percentile<br>OR 120/80 mmHg to &lt;95th (whichever lower)</td><td style="padding:6px 8px;border:1px solid var(--g200);">120-129/&lt;80 mmHg</td></tr>
<tr><td style="padding:6px 8px;border:1px solid var(--g200);font-weight:600;color:#f97316;">Stage 1 HTN</td><td style="padding:6px 8px;border:1px solid var(--g200);">&ge;95th percentile to &lt;95th + 12 mmHg<br>OR 130/80-139/89 mmHg (whichever lower)</td><td style="padding:6px 8px;border:1px solid var(--g200);">130/80 to 139/89 mmHg</td></tr>
<tr><td style="padding:6px 8px;border:1px solid var(--g200);font-weight:600;color:#ef4444;">Stage 2 HTN</td><td style="padding:6px 8px;border:1px solid var(--g200);">&ge;95th + 12 mmHg<br>OR &ge;140/90 mmHg (whichever lower)</td><td style="padding:6px 8px;border:1px solid var(--g200);">&ge;140/90 mmHg</td></tr>
</tbody>
</table>
<p style="font-weight:700;color:var(--g800);margin:0 0 6px;">Hypertensive Urgency vs Emergency (Nelson)</p>
<ul style="margin:0 0 14px;padding-left:18px;color:var(--g700);line-height:1.7;">
<li><strong>Hypertensive urgency:</strong> Severe BP elevation (&gt;95th + 30 mmHg or &gt;180/120) WITHOUT end-organ damage. Requires reduction over 24-48 hours.</li>
<li><strong>Hypertensive emergency:</strong> Severe BP elevation WITH end-organ damage (encephalopathy, heart failure, retinopathy, renal injury). Requires immediate IV therapy with goal reduction of 25% in first 8 hours.</li>
</ul>
<p style="font-weight:700;color:var(--g800);margin:0 0 6px;">Hypotension (AAP/PALS)</p>
<ul style="margin:0 0 8px;padding-left:18px;color:var(--g700);line-height:1.7;">
<li><strong>Definition:</strong> Systolic BP below the 5th percentile for age, sex, and height.</li>
<li><strong>Quick estimate (1-10 years):</strong> Hypotension = SBP &lt; 70 + (2 &times; age in years) mmHg</li>
<li><strong>Neonates:</strong> SBP &lt; gestational age in weeks (term: &lt;60 mmHg)</li>
<li><strong>Clinical significance:</strong> Hypotension in children is a late sign of shock. Tachycardia, poor perfusion, and altered mental status typically precede hypotension.</li>
</ul>
<p style="font-size:11px;color:var(--g400);margin:8px 0 0;">Sources: Flynn JT et al., Pediatrics 2017;140(3). Nelson Textbook of Pediatrics, 21st ed. PALS Provider Manual.</p>
</div>
</details>
</div>
</div>
</div>
<!-- ═══════════ BMI PERCENTILE CALCULATOR ═══════════ -->
<div id="calc-bmi" class="calc-panel hidden">
<div class="card">
<div class="card-header">
<h3><i class="fas fa-weight-scale"></i> BMI Percentile</h3>
<span style="font-size:11px;color:var(--g500);">CDC Growth Charts, ages 2-20</span>
</div>
<div style="padding:16px;">
<p style="font-size:12px;color:var(--g500);margin:0 0 16px;">Based on CDC 2000 growth reference data. For children ages 2-20 years.</p>
<div class="calc-grid">
<div class="calc-field">
<label>Age (years)</label>
<input type="number" id="bmi-age-yr" min="2" max="20" step="1" placeholder="e.g. 7" style="width:60%;display:inline-block;">
<select id="bmi-age-mo" style="width:35%;display:inline-block;padding:8px 4px;border:1.5px solid var(--g300);border-radius:6px;font-size:13px;">
<option value="0">0 mo</option><option value="1">1 mo</option><option value="2">2 mo</option><option value="3">3 mo</option>
<option value="4">4 mo</option><option value="5">5 mo</option><option value="6">6 mo</option><option value="7">7 mo</option>
<option value="8">8 mo</option><option value="9">9 mo</option><option value="10">10 mo</option><option value="11">11 mo</option>
</select>
</div>
<div class="calc-field">
<label>Sex</label>
<select id="bmi-sex"><option value="">Select</option><option value="male">Male</option><option value="female">Female</option></select>
</div>
<div class="calc-field">
<label>Weight (kg)</label>
<input type="number" id="bmi-weight" min="5" max="200" step="0.1" placeholder="e.g. 25">
</div>
<div class="calc-field">
<label>Height (cm)</label>
<input type="number" id="bmi-height" min="50" max="200" step="0.1" placeholder="e.g. 120">
</div>
</div>
<button id="btn-calc-bmi" class="btn-sm btn-primary" style="margin-top:12px;"><i class="fas fa-calculator"></i> Calculate</button>
<button id="btn-clear-bmi" class="btn-sm btn-ghost" style="margin-top:12px;">Clear</button>
<div id="bmi-result" class="calc-result hidden"></div>
<div id="bmi-chart-container" class="chart-container hidden"><canvas id="bmi-chart-canvas"></canvas></div>
</div>
</div>
</div>
<!-- ═══════════ BODY SURFACE AREA ═══════════ -->
<div id="calc-bsa" class="calc-panel hidden">
<div class="card">
<div class="card-header">
<h3><i class="fas fa-child"></i> Body Surface Area</h3>
<span style="font-size:11px;color:var(--g500);">Mosteller formula</span>
</div>
<div style="padding:16px;">
<p style="font-size:12px;color:var(--g500);margin:0 0 16px;">Mosteller formula: BSA (m2) = sqrt(height(cm) x weight(kg) / 3600)</p>
<div class="calc-grid">
<div class="calc-field">
<label>Weight (kg)</label>
<input type="number" id="bsa-weight" min="1" max="200" step="0.1" placeholder="e.g. 20">
</div>
<div class="calc-field">
<label>Height (cm)</label>
<input type="number" id="bsa-height" min="30" max="220" step="0.1" placeholder="e.g. 110">
</div>
</div>
<button id="btn-calc-bsa" class="btn-sm btn-primary" style="margin-top:12px;"><i class="fas fa-calculator"></i> Calculate</button>
<button id="btn-clear-bsa" class="btn-sm btn-ghost" style="margin-top:12px;">Clear</button>
<div id="bsa-result" class="calc-result hidden"></div>
</div>
</div>
</div>
<!-- ═══════════ WEIGHT-BASED DOSING ═══════════ -->
<div id="calc-dose" class="calc-panel hidden">
<div class="card">
<div class="card-header">
<h3><i class="fas fa-pills"></i> Weight-Based Dosing</h3>
</div>
<div style="padding:16px;">
<p style="font-size:12px;color:var(--g500);margin:0 0 16px;">Calculate dose based on weight. Always verify against formulary and institutional guidelines.</p>
<div class="calc-grid">
<div class="calc-field">
<label>Patient Weight (kg)</label>
<input type="number" id="dose-weight" min="1" max="200" step="0.1" placeholder="e.g. 15">
</div>
<div class="calc-field">
<label>Dose (mg/kg)</label>
<input type="number" id="dose-per-kg" min="0.01" step="0.01" placeholder="e.g. 10">
</div>
<div class="calc-field">
<label>Frequency</label>
<select id="dose-freq">
<option value="1">Once daily</option>
<option value="2">Twice daily (BID)</option>
<option value="3">Three times daily (TID)</option>
<option value="4">Four times daily (QID)</option>
<option value="6">Every 4 hours (Q4H)</option>
</select>
</div>
<div class="calc-field">
<label>Max single dose (mg, optional)</label>
<input type="number" id="dose-max" min="0" step="1" placeholder="e.g. 500">
</div>
<div class="calc-field">
<label>Concentration (mg/mL, optional)</label>
<input type="number" id="dose-conc" min="0" step="0.1" placeholder="e.g. 40">
</div>
</div>
<button id="btn-calc-dose" class="btn-sm btn-primary" style="margin-top:12px;"><i class="fas fa-calculator"></i> Calculate</button>
<button id="btn-clear-dose" class="btn-sm btn-ghost" style="margin-top:12px;">Clear</button>
<div id="dose-result" class="calc-result hidden"></div>
</div>
</div>
</div>
<!-- ═══════════ GROWTH CHARTS ═══════════ -->
<div id="calc-growth" class="calc-panel hidden">
<div class="card">
<div class="card-header">
<h3><i class="fas fa-chart-line"></i> Growth Percentiles</h3>
</div>
<div style="padding:16px;">
<div style="display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px;">
<button class="calc-pill active" data-growth="wfa">Weight-for-Age</button>
<button class="calc-pill" data-growth="lfa">Length/Height-for-Age</button>
<button class="calc-pill" data-growth="hcfa">Head Circumference</button>
<button class="calc-pill" data-growth="wfl">Weight-for-Length</button>
<button class="calc-pill" data-growth="fenton">Fenton (Preterm)</button>
</div>
<p id="growth-source-text" style="font-size:12px;color:var(--g500);margin:0 0 14px;">WHO growth standards (0-2y) / CDC 2000 (2-20y).</p>
<div class="calc-grid">
<div class="calc-field">
<label>Sex</label>
<select id="growth-sex"><option value="">Select</option><option value="male">Male</option><option value="female">Female</option></select>
</div>
<div class="calc-field" id="growth-age-field">
<label>Age</label>
<div style="display:flex;gap:4px;align-items:center;">
<input type="number" id="growth-age-yr" min="0" max="20" step="1" placeholder="yr" style="width:40%;">
<select id="growth-age-mo" style="width:55%;padding:8px 4px;border:1.5px solid var(--g300);border-radius:6px;font-size:13px;">
<option value="0">0 mo</option><option value="1">1 mo</option><option value="2">2 mo</option><option value="3">3 mo</option>
<option value="4">4 mo</option><option value="5">5 mo</option><option value="6">6 mo</option><option value="7">7 mo</option>
<option value="8">8 mo</option><option value="9">9 mo</option><option value="10">10 mo</option><option value="11">11 mo</option>
</select>
</div>
</div>
<div class="calc-field" id="growth-ga-field" style="display:none;">
<label>Gestational Age (weeks)</label>
<input type="number" id="growth-ga" min="22" max="50" step="1" placeholder="22-50">
</div>
<div class="calc-field" id="growth-weight-field">
<label>Weight (kg)</label>
<input type="number" id="growth-weight" min="0.3" max="200" step="0.01" placeholder="e.g. 10.5">
</div>
<div class="calc-field" id="growth-length-field">
<label>Length/Height (cm)</label>
<input type="number" id="growth-length" min="20" max="200" step="0.1" placeholder="e.g. 75">
</div>
<div class="calc-field" id="growth-hc-field" style="display:none;">
<label>Head Circumference (cm)</label>
<input type="number" id="growth-hc" min="20" max="60" step="0.1" placeholder="e.g. 35">
</div>
</div>
<div id="growth-mph-section" style="display:none;margin-top:12px;padding:12px;background:var(--g50);border-radius:8px;">
<div style="font-size:12px;font-weight:600;color:var(--g600);margin-bottom:8px;">Mid-Parental Height (optional)</div>
<div class="calc-grid">
<div class="calc-field">
<label>Mother's Height (cm)</label>
<input type="number" id="growth-mother-ht" min="120" max="200" step="0.1" placeholder="e.g. 165">
</div>
<div class="calc-field">
<label>Father's Height (cm)</label>
<input type="number" id="growth-father-ht" min="140" max="220" step="0.1" placeholder="e.g. 178">
</div>
</div>
</div>
<button id="btn-calc-growth" class="btn-sm btn-primary" style="margin-top:12px;"><i class="fas fa-calculator"></i> Calculate</button>
<button id="btn-clear-growth" class="btn-sm btn-ghost" style="margin-top:12px;">Clear</button>
<div id="growth-result" class="calc-result hidden"></div>
<div id="growth-chart-container" class="chart-container hidden"><canvas id="growth-chart-canvas"></canvas></div>
</div>
</div>
</div>
<!-- ═══════════ BILIRUBIN NOMOGRAM ═══════════ -->
<div id="calc-bili" class="calc-panel hidden">
<div class="card">
<div class="card-header">
<h3><i class="fas fa-droplet"></i> Neonatal Bilirubin</h3>
</div>
<div style="padding:16px;">
<div style="display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px;">
<button class="calc-pill active" data-bili="aap">AAP 2022 Phototherapy</button>
<button class="calc-pill" data-bili="bhutani">Bhutani Nomogram</button>
</div>
<div id="bili-aap-panel">
<p style="font-size:12px;color:var(--g500);margin:0 0 14px;">AAP 2022 Clinical Practice Guideline. Determines phototherapy threshold based on gestational age and risk factors.</p>
<details style="margin-bottom:14px;font-size:12px;border:1px solid var(--g200);border-radius:8px;padding:0;">
<summary style="padding:10px 14px;cursor:pointer;font-weight:600;color:var(--g700);background:var(--g50);border-radius:8px;">Neurotoxicity Risk Factors for Phototherapy Threshold (AAP 2022)</summary>
<div style="padding:12px 14px;">
<p style="font-weight:600;color:#ef4444;margin:0 0 6px;">Higher Risk (use lower threshold):</p>
<ul style="margin:0 0 10px;padding-left:18px;color:var(--g700);line-height:1.7;">
<li>Gestational age 35-37 weeks (with other risk factors)</li>
<li>Albumin &lt; 3.0 g/dL</li>
<li>Isoimmune hemolytic disease (ABO, Rh incompatibility)</li>
<li>G6PD deficiency</li>
<li>Asphyxia / significant lethargy</li>
<li>Sepsis</li>
<li>Acidosis (pH &lt; 7.15)</li>
<li>Temperature instability / hypothermia</li>
</ul>
<p style="font-weight:600;color:#10b981;margin:0 0 6px;">Lower Risk (use higher threshold):</p>
<ul style="margin:0;padding-left:18px;color:var(--g700);line-height:1.7;">
<li>Gestational age &ge; 38 weeks</li>
<li>No hemolysis</li>
<li>Well-appearing infant</li>
<li>No risk factors above</li>
</ul>
<p style="margin:8px 0 0;font-size:11px;color:var(--g400);">Source: AAP 2022 Clinical Practice Guideline</p>
</div>
</details>
<details style="margin-bottom:14px;font-size:12px;border:1px solid var(--g200);border-radius:8px;padding:0;">
<summary style="padding:10px 14px;cursor:pointer;font-weight:600;color:var(--g700);background:var(--g50);border-radius:8px;">Risk Factors for Severe Neonatal Hyperbilirubinemia (Nelson Table 137.1)</summary>
<div style="padding:12px 14px;">
<p style="font-weight:600;color:var(--g800);margin:0 0 6px;">Genetic Factors</p>
<ul style="margin:0 0 12px;padding-left:18px;color:var(--g700);line-height:1.6;">
<li>Gilbert syndrome</li>
<li>Crigler-Najjar syndrome</li>
<li>Alagille syndrome</li>
<li>&beta;-thalassemia</li>
<li>Glucose-6-phosphate dehydrogenase (G6PD) deficiency</li>
<li>Bilirubin glucuronosyltransferase polymorphism</li>
<li>Pyruvate kinase deficiency</li>
<li>Erythrocyte structural defects (hereditary spherocytosis, elliptocytosis)</li>
<li>Galactosemia</li>
</ul>
<p style="font-weight:600;color:var(--g800);margin:0 0 6px;">Maternal Factors</p>
<ul style="margin:0 0 12px;padding-left:18px;color:var(--g700);line-height:1.6;">
<li>Family history of severe jaundice, splenectomy, or cholecystectomy</li>
<li>Primiparity</li>
<li>Teenage pregnancy</li>
<li>Diabetes</li>
<li>Rhesus incompatibility</li>
<li>ABO incompatibility</li>
<li>Other blood group isoimmunization</li>
<li>Use of drugs during labor (oxytocin, promethazine, bupivacaine)</li>
<li>Exclusive breastfeeding</li>
</ul>
<p style="font-weight:600;color:var(--g800);margin:0 0 6px;">Perinatal Factors</p>
<ul style="margin:0 0 12px;padding-left:18px;color:var(--g700);line-height:1.6;">
<li>Mode of delivery (breech vs vertex, instrumentation)</li>
<li>Birth trauma (cephalohematoma, substantial bruising, extravasation)</li>
<li>Birth asphyxia</li>
<li>Congenital infections (CMV, syphilis)</li>
<li>Sepsis</li>
</ul>
<p style="font-weight:600;color:var(--g800);margin:0 0 6px;">Neonatal Factors</p>
<ul style="margin:0 0 12px;padding-left:18px;color:var(--g700);line-height:1.6;">
<li>Male sex</li>
<li>Prematurity or low birthweight and small-for-gestational age</li>
<li>Hypothyroidism</li>
<li>Polycythemia</li>
<li>Hypoglycemia</li>
<li>Low intake of breast milk, dehydration, or weight loss</li>
<li>Breast milk jaundice</li>
<li>Jaundice in the first day of life</li>
<li>Trisomy 21</li>
<li>Infant of diabetic mother</li>
<li>Cephalohematoma, other bruising</li>
</ul>
<p style="font-weight:600;color:var(--g800);margin:0 0 6px;">Other Risk Factors and Markers</p>
<ul style="margin:0 0 8px;padding-left:18px;color:var(--g700);line-height:1.6;">
<li>Previous sibling received phototherapy or exchange transfusion</li>
<li>Predischarge TSB or TcB in the high zone</li>
<li>Use of hemolytic agents (naphthalene, menthol-based products) in G6PD-deficient populations</li>
<li>Folate deficiency</li>
<li>Aflatoxins</li>
<li>Hypothermia</li>
<li>Birth outside of a healthcare facility</li>
</ul>
<p style="margin:8px 0 0;font-size:11px;color:var(--g400);">Modified from Olusanya BO, Kaplan M, Hansen TWR. Neonatal hyperbilirubinaemia: a global perspective. Lancet Child Adolesc Health. 2018;2:610-618. Nelson Textbook of Pediatrics, Table 137.1.</p>
</div>
</details>
<div class="calc-grid">
<div class="calc-field">
<label>Gestational Age (weeks)</label>
<select id="bili-ga">
<option value="">Select</option>
<option value="35">35 weeks</option>
<option value="36">36 weeks</option>
<option value="37">37 weeks</option>
<option value="38">38+ weeks</option>
</select>
</div>
<div class="calc-field">
<label>Age of Infant (hours)</label>
<input type="number" id="bili-age-hours" min="0" max="168" step="1" placeholder="e.g. 48">
</div>
<div class="calc-field">
<label>Total Serum Bilirubin (mg/dL)</label>
<input type="number" id="bili-tsb" min="0" max="35" step="0.1" placeholder="e.g. 12.5">
</div>
<div class="calc-field">
<label>Risk Factors</label>
<select id="bili-risk">
<option value="none">None (lower risk)</option>
<option value="medium">Neurotoxicity risk factors present</option>
</select>
</div>
</div>
<button id="btn-calc-bili-aap" class="btn-sm btn-primary" style="margin-top:12px;"><i class="fas fa-calculator"></i> Assess</button>
<button id="btn-clear-bili-aap" class="btn-sm btn-ghost" style="margin-top:12px;">Clear</button>
</div>
<div id="bili-bhutani-panel" style="display:none;">
<p style="font-size:12px;color:var(--g500);margin:0 0 14px;">Bhutani hour-specific bilirubin nomogram. Determines risk zone for infants >= 35 weeks GA.</p>
<div class="calc-grid">
<div class="calc-field">
<label>Age of Infant (hours)</label>
<input type="number" id="bhutani-age" min="12" max="144" step="1" placeholder="12-144">
</div>
<div class="calc-field">
<label>Total Serum Bilirubin (mg/dL)</label>
<input type="number" id="bhutani-tsb" min="0" max="25" step="0.1" placeholder="e.g. 8.5">
</div>
</div>
<button id="btn-calc-bhutani" class="btn-sm btn-primary" style="margin-top:12px;"><i class="fas fa-calculator"></i> Assess</button>
<button id="btn-clear-bhutani" class="btn-sm btn-ghost" style="margin-top:12px;">Clear</button>
</div>
<div id="bili-result" class="calc-result hidden"></div>
<div id="bili-chart-container" class="chart-container hidden"><canvas id="bili-chart-canvas"></canvas></div>
</div>
</div>
</div>
<!-- ═══════════ VITAL SIGNS BY AGE ═══════════ -->
<div id="calc-vitals" class="calc-panel hidden">
<div class="card">
<div class="card-header">
<h3><i class="fas fa-heartbeat"></i> Normal Vital Signs by Age</h3>
<span style="font-size:11px;color:var(--g500);">Harriet Lane Handbook, 23rd Edition</span>
</div>
<div style="padding:16px;">
<p style="font-size:12px;color:var(--g500);margin:0 0 14px;">Select age group to view normal vital sign ranges. Source: Harriet Lane Handbook, 23rd Ed. (Johns Hopkins).</p>
<div class="calc-field" style="max-width:300px;margin-bottom:16px;">
<label>Age Group</label>
<select id="vitals-age-select">
<option value="">Select age group</option>
<option value="preterm">Preterm (&lt;37 weeks)</option>
<option value="newborn">Newborn (0-28 days)</option>
<option value="1-6mo">1-6 months</option>
<option value="6-12mo">6-12 months</option>
<option value="1-3yr">1-3 years</option>
<option value="4-5yr">4-5 years</option>
<option value="6-9yr">6-9 years</option>
<option value="10-12yr">10-12 years</option>
<option value="13-15yr">13-15 years</option>
<option value="16-18yr">16-18 years</option>
</select>
</div>
<div id="vitals-result" class="hidden"></div>
<!-- All ages reference table (collapsible) -->
<details style="margin-top:16px;border:1px solid var(--g200);border-radius:8px;">
<summary style="padding:10px 14px;cursor:pointer;font-weight:600;font-size:13px;color:var(--g700);background:var(--g50);border-radius:8px;">View All Age Groups</summary>
<div style="padding:12px;overflow-x:auto;">
<table class="admin-table" style="font-size:12px;width:100%;">
<thead>
<tr><th>Age</th><th>HR (bpm)</th><th>RR</th><th>SBP (mmHg)</th><th>DBP (mmHg)</th><th>Temp (C)</th></tr>
</thead>
<tbody>
<tr><td>Preterm</td><td>120-170</td><td>40-70</td><td>55-75</td><td>35-45</td><td>36.5-37.5</td></tr>
<tr><td>Newborn</td><td>100-165</td><td>30-60</td><td>60-80</td><td>35-55</td><td>36.5-37.5</td></tr>
<tr><td>1-6 mo</td><td>100-150</td><td>30-53</td><td>70-90</td><td>40-63</td><td>36.5-37.5</td></tr>
<tr><td>6-12 mo</td><td>80-140</td><td>25-40</td><td>72-95</td><td>40-65</td><td>36.0-37.5</td></tr>
<tr><td>1-3 yr</td><td>80-130</td><td>20-30</td><td>80-105</td><td>45-70</td><td>36.0-37.5</td></tr>
<tr><td>4-5 yr</td><td>75-120</td><td>20-25</td><td>85-108</td><td>48-70</td><td>36.0-37.5</td></tr>
<tr><td>6-9 yr</td><td>70-115</td><td>18-24</td><td>88-115</td><td>50-75</td><td>36.0-37.5</td></tr>
<tr><td>10-12 yr</td><td>65-110</td><td>16-22</td><td>95-120</td><td>55-78</td><td>36.0-37.5</td></tr>
<tr><td>13-15 yr</td><td>60-100</td><td>14-20</td><td>100-128</td><td>58-80</td><td>36.0-37.5</td></tr>
<tr><td>16-18 yr</td><td>55-95</td><td>12-18</td><td>105-135</td><td>60-85</td><td>36.0-37.5</td></tr>
</tbody>
</table>
</div>
</details>
<div style="margin-top:16px;">
<h4 style="font-size:13px;font-weight:700;color:var(--g700);margin:0 0 8px;">Quick Reference Formulas</h4>
<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:8px;">
<div style="padding:10px;background:var(--g50);border-radius:8px;font-size:12px;">
<strong>Estimated Weight:</strong><br>
1-12mo: (age in mo + 9) / 2<br>
1-5yr: 2 x (age in yr) + 8<br>
6-12yr: 3 x (age in yr) + 7
</div>
<div style="padding:10px;background:var(--g50);border-radius:8px;font-size:12px;">
<strong>Min Systolic BP:</strong><br>
1-10yr: 70 + (2 x age in yr)<br>
Hypotension: SBP &lt; 5th %ile
</div>
<div style="padding:10px;background:var(--g50);border-radius:8px;font-size:12px;">
<strong>ETT Size:</strong><br>
Uncuffed: (age/4) + 4<br>
Cuffed: (age/4) + 3.5<br>
Depth: ETT size x 3
</div>
<div style="padding:10px;background:var(--g50);border-radius:8px;font-size:12px;">
<strong>Maintenance Fluids (4-2-1):</strong><br>
First 10kg: 4 mL/kg/hr<br>
Next 10kg: +2 mL/kg/hr<br>
Each kg above 20: +1 mL/kg/hr
</div>
</div>
</div>
</div>
</div>
</div>
Reference in a new issue View git blame Copy permalink