// CDN-compatible: React and ReactDOM loaded globally from index.html
/* import React, { useState } from 'react'; */
const { useState, useEffect, useRef } = React;
// ════════════════════════════════════════════════
// COLOR PALETTE
// ════════════════════════════════════════════════
const C = {
// Layout
bg: '#f0f4f8',
panel: '#ffffff',
panelAlt: '#f8fafc',
border: '#cbd5e1',
borderStrong: '#94a3b8',
text: '#0f172a',
textMuted: '#475569',
textLight: '#94a3b8',
// Accent
blue: '#0284c7',
blueLight: '#e0f2fe',
// Status
green: '#15803d',
greenBg: '#dcfce7',
greenBorder: '#86efac',
red: '#dc2626',
redBg: '#fee2e2',
redBorder: '#fca5a5',
orange: '#ea580c',
orangeBg: '#fff7ed',
yellow: '#ca8a04',
yellowBg: '#fefce8',
// Pipe / Flow colors
rawCold: '#0ea5e9',
preheating: '#f59e0b',
heating: '#f97316',
hotTemp: '#ef4444',
pasteurized: '#16a34a',
cooling: '#0891b2',
coldStorage: '#0284c7',
diverted: '#dc2626',
deadLeg: '#94a3b8',
cip: '#9333ea',
// SVG component fills
tankFill: '#dbeafe',
pheFill: '#fef3c7',
coolerFill: '#cffafe',
valveBody: '#e2e8f0',
pumpBody: '#e0f2fe',
hotJacket: '#fed7aa',
};
// ════════════════════════════════════════════════
// PMO CONSTANTS
// ════════════════════════════════════════════════
const PMO = {
htst: {
standard: { tempF: 161, tempC: 72, holdSec: 15, label: 'Standard Milk' },
highFat: { tempF: 166, tempC: 74, holdSec: 15, label: '≥10% Fat / ≥18% Solids' },
eggnog: { tempF: 175, tempC: 80, holdSec: 25, label: 'Eggnog' },
alt1: { tempF: 191, tempC: 89, holdSec: 1.0, label: '191°F / 1.0 sec' },
alt2: { tempF: 194, tempC: 90, holdSec: 0.5, label: '194°F / 0.5 sec' },
alt3: { tempF: 201, tempC: 94, holdSec: 0.1, label: '201°F / 0.1 sec' },
alt4: { tempF: 204, tempC: 96, holdSec: 0.05, label: '204°F / 0.05 sec' },
alt5: { tempF: 212, tempC: 100, holdSec: 0.01, label: '212°F / 0.01 sec' },
},
regenMinDeltaP_psi: 1.0,
maxStorageTemp_F: 45,
};
// ════════════════════════════════════════════════
// DIVERT CONDITIONS — ALL 12
// ════════════════════════════════════════════════
const DIVERT_CONDITIONS = [
{
id: 'TEMP_LOW',
label: 'Holding Tube Temp Below Minimum',
pmoRef: 'PMO §16p(B)(3) — TLC',
check: (p, req) => p.holdTemp >= req.tempF,
display: (p, req) => `${p.holdTemp.toFixed(1)}°F vs ${req.tempF}°F min`,
explanation: 'The Thermal Limit Controller (TLC) sensor at the holding tube outlet de-energizes the FDD solenoid whenever temperature drops below the legal minimum. Forward flow is mechanically blocked. The system was sealed by the Regulatory Agency and cannot be overridden.',
},
{
id: 'HOLD_TIME_SHORT',
label: 'Holding Time Below Minimum',
pmoRef: 'PMO §16p(B)(2)(3) — Timing Pump',
check: (p, req) => p.calcHoldSec >= req.holdSec,
display: (p, req) => `${p.calcHoldSec.toFixed(3)}s vs ${req.holdSec}s min`,
explanation: 'Holding time is calculated for the FASTEST particle through the tube. If flow rate is too high or tube too short, product exits before completing the required hold. The timing pump speed is sealed at a maximum by the Regulatory Agency.',
},
{
id: 'REGEN_DP',
label: 'Regenerator ΔP Failure (< 1 PSI)',
pmoRef: 'PMO §16p(B)(4) — DPC',
check: (p) => (p.regenPastPSI - p.regenRawPSI) >= 1.0,
display: (p) => `ΔP = ${(p.regenPastPSI - p.regenRawPSI).toFixed(1)} PSI (need ≥1.0)`,
explanation: 'Pasteurized product must ALWAYS exceed raw milk pressure in the regenerator by ≥1 PSI (6.9 kPa). This ensures any pinhole leak flows pasteurized→raw, never raw→pasteurized. The Differential Pressure Controller trips the FDD to divert if this margin is lost.',
},
{
id: 'STARTUP',
label: 'Startup — System Not Yet At Temperature',
pmoRef: 'PMO §16p(B)(3) — TLC Cut-In',
check: (p) => p.systemState !== 'startup',
display: () => 'System must reach min temp before forward flow allowed',
explanation: 'At startup, all flow diverts until the holding tube outlet sensor confirms temperature at or above minimum. The water/product used for heating is diverted to drain or balance tank. Forward flow is blocked until temperature is achieved and sustained.',
},
{
id: 'FLOW_EXCEEDED',
label: 'Flow Rate Exceeds Sealed Maximum',
pmoRef: 'PMO §16p(B)(2) — Timing Pump Sealed',
check: (p) => p.flowGPH <= p.sealedMaxGPH,
display: (p) => `${Math.round(p.flowGPH)} GPH vs sealed max ${p.sealedMaxGPH} GPH`,
explanation: 'The timing pump is tested and sealed at a maximum speed corresponding to the minimum legal hold time. Exceeding this rate means the fastest milk particle exits the holding tube before completing the required hold time.',
},
{
id: 'POWER_LOSS',
label: 'Power / Signal Loss (Fail-Safe Divert)',
pmoRef: 'PMO §16p(B)(2) — FDD Fail-Safe Design',
check: (p) => p.powerState === 'normal',
display: () => 'FDD solenoid de-energized → spring return to divert',
explanation: 'The FDD is fail-safe to DIVERT. The solenoid is energized to hold the valve in forward position. Any power loss, signal loss, or controller fault causes a spring to automatically drive the valve to divert. Product cannot flow forward without an active control signal.',
},
{
id: 'RECORDER_FAIL',
label: 'Temperature Recorder Malfunction',
pmoRef: 'PMO §16p(B)(1) — Recorder-Controller Required',
check: (p) => p.recorderState === 'ok',
display: () => 'Recording thermometer must be functional and calibrated',
explanation: 'A recording thermometer that continuously charts holding tube outlet temperature is required by PMO. If it malfunctions or goes out of calibration, the pasteurization record cannot be verified, processing must stop, and the FDD must divert.',
},
{
id: 'VAT_OUTLET_EARLY',
label: 'VAT: Outlet Opened Before Hold Complete',
pmoRef: 'PMO §16p(A) — Vat Outlet Valve',
vatOnly: true,
check: (p) => !(p.vatOutletOpen && p.vatHoldElapsed < p.vatHoldRequired),
display: (p) => `${p.vatHoldElapsed}/${p.vatHoldRequired} min`,
explanation: 'The VAT outlet valve must remain CLOSED and physically disconnected for the entire hold period. Opening early means milk has not completed the required hold and is not legally pasteurized.',
},
{
id: 'VAT_TEMP_DROP',
label: 'VAT: Temperature Drop During Hold',
pmoRef: 'PMO §16p(A) — Vat Temperature',
vatOnly: true,
check: (p, req) => !(p.vatPhase === 'holding' && p.vatTemp < req.tempF),
display: (p, req) => `${p.vatTemp}°F vs ${req.tempF}°F — hold timer resets if temp drops`,
explanation: 'Vat temperature must be maintained at or above minimum for the ENTIRE hold period. Any drop resets the 30-minute timer to zero. The vat must be reheated before a new hold can begin.',
},
{
id: 'HHST_FDD_POS',
label: 'HHST: FDD Must Be Downstream of Cooler',
pmoRef: 'PMO §16p(B) — HHST FDD Placement',
hhstOnly: true,
check: (p) => p.fddPlacement === 'downstream-of-cooler',
display: () => 'HHST requires FDD after cooler, not before',
explanation: 'For HHST systems, the FDD must be located downstream of the cooling section. Unlike HTST, product at HHST temperatures is under high pressure and cannot be returned directly to the balance tank. This is a fundamental design requirement.',
},
{
id: 'BALANCE_TANK',
label: 'Balance Tank Overflow Margin < 12 Inches',
pmoRef: 'PMO §16p(B)(4) — CLT Elevation',
check: (p) => p.overflowMarginIn >= 12,
display: (p) => `${p.overflowMarginIn.toFixed(1)}" margin (need ≥12")`,
explanation: 'The constant-level tank overflow must be at least 12 inches below the lowest milk-contact level in the regenerator. This gravity barrier prevents raw milk from siphoning into the pasteurized product circuit if pressure is lost.',
},
{
id: 'CIP_ACTIVE',
label: 'CIP / Sanitation In Progress',
pmoRef: 'PMO §16p(B) — Product/CIP Separation',
check: (p) => p.systemState !== 'cip',
display: () => 'No product processing during CIP cycles',
explanation: 'During CIP and sanitation cycles, caustic and acid solutions are circulating through the product-contact surfaces. The FDD must be in divert and milk must not enter the system. Forward flow cannot resume until CIP is complete, the system is rinsed, and brought back to pasteurization temperature.',
},
];
// ════════════════════════════════════════════════
// PIPE STATE DEFINITIONS
// ════════════════════════════════════════════════
const PIPE_STATES = {
RAW_COLD: { color: C.rawCold, dasharray: '10 5', animated: true },
PREHEATING: { color: C.preheating, dasharray: '10 5', animated: true },
HEATING: { color: C.heating, dasharray: '10 5', animated: true },
HOT_TEMP: { color: C.hotTemp, dasharray: '10 5', animated: true },
PASTEURIZED: { color: C.pasteurized, dasharray: '10 5', animated: true },
COOLING: { color: C.cooling, dasharray: '10 5', animated: true },
DIVERTED: { color: C.diverted, dasharray: '10 6', animated: true },
DEAD_LEG: { color: C.deadLeg, dasharray: '3 9', animated: false },
COLD_STORAGE: { color: C.coldStorage, dasharray: '10 5', animated: true },
};
// ════════════════════════════════════════════════
// ANIMATED PIPE
// ════════════════════════════════════════════════
function AnimatedPipe({ d, state, flowRate = 3000, reverse = false }) {
const ps = PIPE_STATES[state] || PIPE_STATES.DEAD_LEG;
const duration = ps.animated ? Math.max(0.4, 3 / (flowRate / 1000)).toFixed(2) : '9999';
const animName = reverse ? 'pipFlowRev' : 'pipFlowFwd';
return (
);
}
// ════════════════════════════════════════════════
// FDD VALVE
// ════════════════════════════════════════════════
function FDDValve({ x, y, state }) {
const isForward = state === 'forward';
const ledColor = isForward ? C.green : C.red;
const discRot = isForward ? 0 : 90;
return (
{/* Solenoid body */}
SOLENOID
{/* Stem */}
{/* Status LED */}
{/* LED label */}
{isForward ? 'FWD' : 'DIV'}
{/* Valve body */}
{/* Port stubs */}
{/* Inlet (left) */}
{/* Forward outlet (right) */}
{/* Divert outlet (down) */}
{/* Leak escape stub (between outlet seats) */}
{/* Rotating plug disc */}
{/* Blocked port X markers */}
{/* Forward X when diverting */}
{!isForward && (
)}
{/* Divert X when forwarding */}
{isForward && (
)}
{/* Port labels */}
INLET{isForward ? '▶FWD' : 'FWD✕'}{!isForward ? '▼DIV' : 'DIV✕'}
{/* Center label */}
FDD
);
}
// ════════════════════════════════════════════════
// HTST REGEN DIAGRAM — MAIN SVG
// ════════════════════════════════════════════════
function HTSTRegenDiagram({ params, fddState, req, calcHoldSec }) {
const { regenRawPSI, regenPastPSI, flowGPH, holdTemp, finalCoolF, overflowMarginIn } = params;
const deltaP = regenPastPSI - regenRawPSI;
const deltaPOk = deltaP >= 1.0;
const storageOk = finalCoolF <= PMO.maxStorageTemp_F;
const holdOk = calcHoldSec >= req.holdSec;
const tempOk = holdTemp >= req.tempF;
// Pipe states for forward / divert paths
const fwdState = fddState === 'forward' ? 'PASTEURIZED' : 'DEAD_LEG';
const divState = fddState === 'divert' ? 'DIVERTED' : 'DEAD_LEG';
const coolState = fddState === 'forward' ? 'COOLING' : 'DEAD_LEG';
const stgState = fddState === 'forward' ? (storageOk ? 'COLD_STORAGE' : 'HOT_TEMP') : 'DEAD_LEG';
// Layout — ONE regen block, two rows
const RAW_Y = 130; // Row 1: raw milk pipe centerline
const PAST_Y = 200; // Row 2: pasteurized return pipe centerline (bottom half of regen)
const DIV_Y = 410; // Divert pipe horizontal run
// Regen block: x=230–390, top y=80, height=160, mid at y=160
const RG = { x: 230, y: 80, w: 160, h: 160 };
const FDD_X = 840;
return (
);
}
// ════════════════════════════════════════════════
// TOOLTIP
// ════════════════════════════════════════════════
function Tooltip({ tip }) {
if (!tip) return null;
return (
{tip.title}
{tip.body && (
{tip.body}
)}
{tip.currentValue && (
▶ {tip.currentValue}
)}
{tip.pmoRef && (
{tip.pmoRef}
)}
);
}
// ════════════════════════════════════════════════
// OPERATOR SOP DATA
// ════════════════════════════════════════════════
const SOPS = [
{
id: 'startup',
title: 'Startup — Water Phase',
steps: [
'Verify CIP is complete, system rinsed, and all valves are in correct position.',
'Confirm recorder/controller is ON and probe is calibrated.',
'Check balance tank (CLT) has adequate water for startup.',
'Start booster pump first to pressurize the raw side.',
'Start timing pump at sealed maximum speed.',
'Open steam/hot water to heater — begin heating water.',
'All flow diverts until TLC reaches minimum pasteurization temp.',
'Watch regen ΔP — pasteurized side must be ≥ raw + 1 PSI.',
'When TLC confirms minimum temp: FDD automatically shifts to forward.',
'Confirm recorder chart is running and tracing temperature.',
],
},
{
id: 'w2p',
title: 'Water → Product Transition',
steps: [
'Hold water phase at least 5–10 min after FDD goes to forward.',
'Verify temperature is stable and regen ΔP is holding ≥ 1 PSI.',
'Open product inlet — product enters the balance tank.',
'Monitor balance tank level as product displaces water.',
'Divert or hold early fill until first on-spec product is confirmed.',
'Collect first-product sample for QA/lab check.',
'Log water-to-product transition time on regulatory record.',
],
},
{
id: 'production',
title: 'Running Production — Checks',
steps: [
'Check TLC temperature every 15–30 min; compare to recorder chart.',
'Monitor balance tank level — never allow to run empty or overflow.',
'Verify regen ΔP reads ≥ 1 PSI continuously.',
'Review recorder chart at end of each hour; initial if required by state.',
'Log flow rate and temperature on shift log per regulatory requirements.',
'Report any FDD divert event immediately to QA supervisor.',
'Do not adjust timing pump speed — it is sealed by regulatory authority.',
],
},
{
id: 'dest',
title: 'Destination Change (Silo / Tank Switch)',
steps: [
'Confirm destination silo/tank is empty, clean, and ready to receive.',
'Notify receiving area before switching.',
'Estimate line volume between FDD forward outlet and new destination.',
'Close valve to current destination.',
'Open valve to new destination.',
'The pipe fill volume to the new tank contains mix — account for it in batch records.',
'Log exact time of switch, from-tank, and to-tank in batch record.',
],
},
{
id: 'p2w',
title: 'Product → Water / End of Run',
steps: [
'Stop product feed — allow balance tank level to drop near-empty (do not run dry).',
'Introduce water (or designated displacement fluid) into balance tank.',
'Continue running — product is pushed forward through heater and cooler by water.',
'When water reaches fill/packaging point, divert or shut off.',
'Reduce steam to heater — allow water to cool the system.',
'Shut down timing pump, then booster pump.',
'Drain remaining water. Begin CIP startup per sanitation SOP.',
],
},
{
id: 'divert',
title: 'Unexpected FDD Divert — Response',
steps: [
'⚠ Product past the divert point is NOT pasteurized — place it on hold immediately.',
'Do NOT attempt to force forward flow — determine the root cause first.',
'Check TLC temp: if low, wait — system auto-returns to forward when temp recovers.',
'Check recorder: is the chart running and showing correct temperature trace?',
'Check regen ΔP: if < 1 PSI, inspect booster pump, timing pump, and line pressures.',
'Check for power/signal loss at the controller or FDD solenoid wiring.',
'When all conditions pass, system will return to forward automatically.',
'Notify QA supervisor — diverted product must be evaluated before release.',
'Log divert time, cause, duration, and corrective action in regulatory record.',
],
},
];
// ════════════════════════════════════════════════
// OPERATOR SOP PANEL
// ════════════════════════════════════════════════
function OperatorSOPPanel() {
const [openId, setOpenId] = useState(null);
return (
{isVat
? '* VAT pasteurizer — batch process. Hold timer resets if temperature drops below minimum during hold period.'
: '* High fat/solids/sweetened products add 5°F (3°C) to minimum. Timing pump sealed at max speed by Regulatory Authority.'}