Hydro ERP — Fire Sprinkler Business Management

The user is asking me to "Build a fire sprinkler ERP". This is a substantial software engineering request. An ERP (Enterprise Resource Planning) system for a fire sprinkler company would need to handle things like: 1. Customer management 2. Job/project management (installations, inspections, maintenance) 3. Scheduling and dispatch 4. Inspection tracking (NFPA 25 compliance - weekly, monthly, quarterly, semi-annual, annual inspections) 5. Inventory management (pipes, fittings, sprinkler heads, valves, etc.) 6. Quoting/estimating 7. Invoicing and billing 8. Technician management 9. Compliance documentation 10. Reporting Since this is a request to "build" something, I should create a functional application. The best approach for a single response would be a single-file HTML application with a full working demo - that's something the user can actually run and interact with immediately. Alternatively, I could provide a full-stack architecture, but a working demo is more valuable and demonstrable. Let me think about what makes sense: - A single-file HTML app with vanilla JS (or a lightweight approach) that implements a functional fire sprinkler ERP demo - It should have realistic data model: Customers, Jobs, Inspections, Inventory, Technicians, Quotes/Invoices - Tabs/navigation for different modules - LocalStorage persistence so data survives refreshes - A dashboard with KPIs - NFPA 25 inspection scheduling logic would be a nice domain-specific touch that shows real expertise This should be a substantial, polished single-file application. Let me design it: **Modules:** 1. **Dashboard** - KPIs: open jobs, overdue inspections, revenue this month, low stock alerts, upcoming inspections 2. **Customers** - CRUD for customers (name, contact, address, type: commercial/residential/industrial, phone, email) 3. **Jobs** - Work orders: new install, repair, inspection, retrofit. Status pipeline: Quoted → Scheduled → In Progress → Completed → Invoiced 4. **Inspections** - NFPA 25 compliant inspection scheduling with frequencies, compliance tracking, next due dates 5. **Inventory** - Sprinkler heads, pipe, fittings, valves with reorder points 6. **Team/Technicians** - maybe fold into a simpler view or include certifications (NICET levels are the real-world certification for sprinkler fitters/inspectors) 7. **Quotes/Invoices** - simple billing Let me keep it focused but complete. A really good scope: - Dashboard - Customers (CRUD) - Jobs (CRUD with status pipeline, link to customer, assign technician) - Inspections (NFPA 25 types: Weekly/Monthly/Quarterly/Semi-Annual/Annual/5-Year, link to customer & building system, track last/next due, mark compliant/deficient) - Inventory (parts with quantities, reorder points, usage from jobs decrements stock — maybe keep simple: manual adjust) - Invoices (generate from completed jobs, mark paid) - Settings/Data (export JSON, reset demo data) Domain-specific touches that show expertise: - NFPA 25 inspection frequencies - NICET certification levels for technicians - Sprinkler system types: Wet pipe, Dry pipe, Pre-action, Deluge, Standpipe - Hazardless classification: Light Hazard, Ordinary Hazard, Extra Hazard - Head types: pendant, upright, sidewall, concealed; K-factors (K5.6, K8.0) - Pipe: 1"–6" black steel Schedule 40, CPVC - Deficiency tracking (NFPA 25 impairments) Tech: Single HTML file, vanilla JS, CSS. Use localStorage for persistence. Clean modern UI with CSS variables. No external dependencies so it runs anywhere offline. Let me write this carefully. It's going to be long but that's expected for "build an ERP". Design plan: - Left sidebar nav with modules - Top bar with search? Maybe keep simpler — just content area per module - Modal dialogs for create/edit forms - Table views with actions - Dashboard cards + upcoming inspections list + recent activity Data model: ```js state = { customers: [{id, name, contact, phone, email, address, type}], jobs: [{id, customerId, title, type: 'install'|'repair'|'retrofit'|'inspection', status, priority, assignedTo, scheduledDate, dueDate, price, notes, createdAt, completedAt}], inspections: [{id, customerId, systemType, frequency, lastDone, nextDue, techId, status: 'scheduled'|'passed'|'deficient', deficiencies: []}], inventory: [{id, sku, name, category, unit, qty, reorderPoint, unitCost}], techs: [{id, name, cert: 'NICET I'... 'NICET IV', phone, active}], invoices: [{id, number, customerId, jobId, amount, issued, due, status: 'draft'|'sent'|'paid'|'overdue'}], } ``` Functions: - seed data with realistic entries - render functions per module - CRUD via modals - computed KPIs - inspection next-due calculation from frequency - invoice generation from job with markup on parts? Keep simple: job price → invoice. - inventory low stock warnings ID generation: simple counter or random. Let me also add a "Deficiency" tracking on inspections: when marking an inspection as deficient, note the issue; maybe a button "Create repair job from deficiency" — that's a nice workflow touch showing real ERP thinking. Also add dark-ish professional theme? Fire sprinkler industry — maybe a red accent (fire). Clean light theme with fire-red accents (#c62828 or similar). Sidebar dark navy/charcoal with red accent. I'll write the whole thing. Let me be careful with code quality: escape HTML in user inputs to avoid breaking the UI (basic escaping function). Let me structure the code: ``` Hydro ERP — Fire Sprinkler Business Management

``` JS architecture: - `state` object, `save()` / `load()` with localStorage - `router`: nav click → `render(view)` - Views: renderDashboard, renderCustomers, renderJobs, renderInspections, renderInventory, renderInvoices, renderTeam - Modal helper: `openModal(title, bodyHTML, onSave)` - Form builder helpers - Seed data Let me think about the seed data to make it feel real: Customers: 1. Meridian Office Park LLC — commercial 2. Riverside Logistics Warehouse — industrial/warehouse 3. St. Anne's Hospital — commercial/healthcare 4. Cedar Ridge Apartments — residential 5. Ironclad Manufacturing — industrial 6. Lakeside Mall Holdings — commercial Technicians: 1. Mike Delgado — NICET IV — Inspection lead 2. Sarah Chen — NICET III 3. Tom Reyes — NICET II 4. Josh Wheeler — Sprinkler Fitter (installer) 5. Dana Okafor — Apprentice Inventory: - Pendant heads K5.6 155°F (qty 420, reorder 150) - Upright heads K5.6 155°F (qty 96, reorder 150) → low stock - Concealed pendant K8.0 200°F (qty 210, reorder 100) - Dry pendent K5.6 (qty 34, reorder 40) → low - 1" black steel Sch 40 pipe (sticks) (qty 240, reorder 100) - 2" black steel Sch 40 (qty 180, reorder 80) - 4" black steel Sch 40 (qty 55, reorder 60) → low - Grooved couplings 2" (qty 300, reorder 120) - Elbows 1" threaded (qty 500, reorder 200) - Butterfly valve 2" w/ tamper (qty 25, reorder 10) - Alarm check valve 4" (qty 3, reorder 2) - Fire department connection 4" (qty 8, reorder 4) - CPVC 1" (qty 400, reorder 150) Jobs: - J-1041: Retrofit wet system — Ironclad Manufacturing — In Progress — Josh - J-1042: Quarterly inspections batch — St. Anne's — Scheduled — Sarah - J-1043: Repair — broken head, Cedar Ridge — Completed (needs invoice) - J-1044: New install — Riverside Logistics warehouse expansion — Quoted — $84,500 - J-1045: 5-year internal pipe assessment — Meridian — Scheduled Inspections: - St. Anne's Hospital — Annual — next due soon/overdue - Meridian Office Park — Quarterly - Cedar Ridge — Semi-annual - Ironclad — Monthly (dry system weekly? dry systems need weekly/monthly checks) - Riverside — Annual Invoices: a few paid, one sent, one overdue. Dashboard KPIs: - Open jobs count - Overdue inspections count (red if >0) - Low stock items count - Outstanding revenue (sum of unpaid invoices) - Upcoming inspections list (next 30 days sorted) - Jobs by status mini-bar - Recent activity? Could skip or derive. Nice extra: search box in topbar filtering current module? Could be nice but adds complexity. Maybe a global search across customers/jobs. Hmm — keep it: a simple search input on jobs and customers tables might be enough. Actually let me add a simple per-module search for customers/jobs/inventory — it's a few lines each. Or a generic `filterTable`. I'll implement per-view search minimally. Status pipeline for jobs: Quoted → Approved → Scheduled → In Progress → Completed → Invoiced. Keep statuses: 'Quoted', 'Approved', 'Scheduled', 'In Progress', 'Completed', 'Invoiced'. Invoiced ones can also be paid... invoice handles payment; job status Invoiced is fine. Inspection statuses: 'Scheduled', 'Passed', 'Deficient'. When Passed → set lastDone = today, nextDue = today + frequency months/weeks. Compute next due. Frequency to months: Weekly (0.25 mo ~ 7 days), Monthly (1), Quarterly (3), Semi-Annual (6), Annual (12), 5-Year (60). I'll work in days: 7, 30, 91, 182, 365, 1825. Deficiency → create repair job button. Invoice: from completed job → amount = job.price. Status: Sent / Paid / Overdue (auto if due < today and not paid). Number auto: INV-2xxx. CSV export maybe? JSON export/import is easy and useful. Add "Export JSON" button in a Data view or in topbar. I'll add a small "Data" section under Settings maybe. To limit scope, put Export/Reset in the sidebar bottom. Now write CSS: professional, clean. Sidebar dark (#10151c / #0f172a slate-900), red accent (#dc2626). Cards white, subtle shadows, rounded 10px. Tables clean with hover. Badges colored per status. Buttons: primary red, ghost. Form: grid 2 col. Modal overlay. Fonts: system stack. Icons: I could use emoji (🚿 not great) — better simple inline SVG icons or just text labels with small unicode. I'll use minimal inline SVGs for nav to look professional. Or simpler: use a small set of unicode symbols: ▦ ⌂ etc. Hmm, emoji look inconsistent. Inline SVGs (16px, stroke currentColor) for: dashboard(grid), customers(users), jobs(clipboard), inspections(check-shield), inventory(box), invoices(file-dollar), team(hard-hat). I can write simple SVG paths. Let me craft simple ones: - Dashboard: 4 squares: `` stroke. - Customers: circle head + shoulders: `` - Jobs: clipboard: `` hmm clipboard: rect + small top rect + lines `` - Inspections: shield-check: `` - Inventory: box: `` - Invoices: file: `` - Team: person with check? Use users icon: two circles + shoulders. `` maybe fine. stroke="currentColor" fill="none" stroke-width="1.8" viewBox="0 0 24 24". Logo: droplet/flame: flame path in a red rounded square. Simple flame: `` something like that — I'll fiddle a simple flame-ish shape. Or a sprinkler head icon. Keep flame simple. Now the code. I need to be careful about length but "build an ERP" warrants a comprehensive artifact. This will be long — that's fine and expected. Let me draft key logic: ```js const $ = sel => document.querySelector(sel); const uid = p => p + '-' + Math.random().toString(36).slice(2,8).toUpperCase(); const esc = s => String(s??'').replace(/[&<>"']/g, c => ({'&':'&','<':'<','>':'>','"':'"',"'":'''}[c])); const money = n => '$' + (Number(n)||0).toLocaleString(undefined,{minimumFractionDigits:2, maximumFractionDigits:2}); const fmtDate = iso => iso ? new Date(iso+'T00:00:00').toLocaleDateString(undefined,{month:'short',day:'numeric',year:'numeric'}) : '—'; const today = () => new Date().toISOString().slice(0,10); const addDays = (iso,d) => { const t = new Date(iso+'T00:00:00'); t.setDate(t.getDate()+d); return t.toISOString().slice(0,10); }; const daysUntil = iso => Math.round((new Date(iso+'T00:00:00') - new Date(today()+'T00:00:00'))/86400000); ``` Persistence: ```js const KEY='fireflow.v1'; let state = load() || seed(); function save(){ localStorage.setItem(KEY, JSON.stringify(state)); } ``` Seed dates relative to today so demo always looks alive: use addDays(today(), ±n). Views render into #view. Sidebar buttons with data-view. active class. Modal: ```js function openModal(title, bodyHTML, onSubmit){ const root = $('#modal-root'); root.innerHTML = `

`; $('#m-cancel').onclick = closeModal; root.querySelector('.overlay').addEventListener('click', e=>{ if(e.target.classList.contains('overlay')) closeModal(); }); $('#modal-form').onsubmit = e => { e.preventDefault(); const data = Object.fromEntries(new FormData(e.target)); onSubmit(data); }; } function closeModal(){ $('#modal-root').innerHTML=''; } ``` Form fields helper: ```js const f = { text:(name,label,val='',req=true)=>`${label}`, ... } ``` Maybe simpler to write HTML directly per form. I'll write a small helper to keep code shorter. Select options helper: build from array. Now views. **Dashboard:** ```js function renderDashboard(){ const open = state.jobs.filter(j=>!['Invoiced'].includes(j.status)).length; const overdue = state.inspections.filter(i=> i.status!=='Passed' && i.nextDue < today()).length; // careful: Passed inspections have nextDue in future; deficient ones need action const low = state.inventory.filter(p=>p.qty<=p.reorder).length; const outstanding = state.invoices.filter(i=>i.status!=='Paid').reduce((s,i)=>s+i.amount,0); const upcoming = state.inspections.filter(i=>i.status!=='Deficient').map(i=>({...i,d:i.nextDue})).filter(i=>daysUntil(i.nextDue)<=30).sort((a,b)=>a.nextDue{ const q = inp.value.toLowerCase(); document.querySelectorAll('#'+tableId+' tbody tr').forEach(tr=>{ tr.style.display = tr.textContent.toLowerCase().includes(q) ? '' : 'none'; }); }); } ``` Now the job "advance" logic: order = ['Quoted','Approved','Scheduled','In Progress','Completed','Invoiced']; advance moves one step; when reaching 'Completed', prompt to create invoice? Provide separate "Invoice" button on Completed jobs. Advance button on Quoted..Completed. Creating invoice from job: amount = job.price, due = today+30, number = next INV number. Deficiency → repair job: title = `Repair — ${inspection.system} (${deficiency snippet})`, type 'Repair', priority High, customer = inspection.customerId, status 'Quoted'. Also on completing a repair/install job maybe consume inventory — skip; too much. Keep adjust manual. Dashboard "Activity"? skip to control size. Actually a small "Recent Jobs" list is easy: last 5 by createdAt. Fine. Also topbar could show company name "HydroFlow Fire Protection" and date. Title per view inside main. Toast notifications for actions — nice touch, small: ```js function toast(msg){ const t=document.createElement('div'); t.className='toast'; t.textContent=msg; document.body.appendChild(t); setTimeout(()=>t.classList.add('show'),10); setTimeout(()=>{t.classList.remove('show'); setTimeout(()=>t.remove(),300)},2500); } ``` Delete confirmations: use confirm() — acceptable in demo. Or custom. confirm() is fine. Edit flows: open modal prefilled, on submit update. Let me now also think about the KPI: outstanding revenue; also "Revenue this month" from paid invoices. Use both? Keep 4 KPIs: Open Jobs, Overdue Inspections, Low Stock Items, Outstanding Invoices ($). Now, badges colors: - Job statuses: Quoted gray, Approved blue, Scheduled violet, In Progress amber, Completed green, Invoiced teal - Priority: Low gray, Medium blue, High amber, Urgent red - Invoice: Draft gray, Sent blue, Paid green, Overdue red - Stock: OK green, Low amber, Out red - Inspection due chip: Overdue red, ≤7d amber, else green; status: Passed green, Deficient red, Scheduled blue. Alright, also include a print-friendly? Skip. One more consideration: the user might actually want architecture/plan rather than a demo. But "Build X" → produce working software. I'll deliver the single-file app and briefly note the real-world path to production (data model, auth, integrations) at the end, briefly. Keep preamble minimal, then code, then short notes. Format: The code will be in an artifact-style code block. Since this is chat without explicit artifacts support mention... I'll just give one big code block. That's standard. Length: the HTML will be ~700-900 lines. That's acceptable given the ask. Let me write it efficiently, avoid repetition via helpers. Let me write helpers to reduce repetition: ```js function field(label, inner){ return `${label}${inner}`; } function inp(name, val='', type='text', req=true, extra=''){ return ``; } function sel(name, options, val){ return ``; } function selFrom(name, arr, val, labelKey, idKey='id'){ ... ` Here's a complete, runnable fire sprinkler ERP as a single HTML file — no dependencies, works offline, persists data in your browser. It's modeled on how sprinkler contractors actually operate: work orders, NFPA 25 inspection cycles, deficiency workflows, NICET-certified techs, and parts inventory. ```html FireLine ERP — Fire Sprinkler Business Management

``` **What's included** - **Dashboard** — open work orders, NFPA 25 inspections needing action, low-stock alerts, outstanding A/R, a job pipeline bar, a 30-day inspection calendar, and one-click invoicing for completed work. - **Work orders** — full pipeline (Quoted → Approved → Scheduled → In Progress → Completed → Invoiced) with priority, tech assignment, and auto-generated invoice flow. - **Inspections** — NFPA 25 frequencies (Weekly through 5-Year), auto-rescheduling when you mark a pass, deficiency logging, and a **one-click repair job from a deficiency**. Each inspection generates a printable report with a system-specific checklist (wet, dry, pre-action, deluge, standpipe). - **Inventory** — sprinkler heads (K-factors, temp ratings), Sch 40 pipe, valves, FDCs; reorder points and stock adjustments. - **Invoices** — auto-overdue aging, mark paid, drafts. - **Team** — NICET certification levels, workload per tech. - **Data** — persists in browser localStorage (with JSON export/reset in the sidebar). Zero dependencies; open the file in any browser. **Taking it to production:** swap localStorage for Postgres with the same entities, add auth/roles (office admin vs. field tech), a mobile tech app for inspection checklists with photos, QuickBooks/Stripe integration for the invoice module, and AHJ/compliance report PDFs. If you want, I can extend this with any of those next — e.g., technician mobile inspection checklists or estimating takeoff from a head count.

${esc(title)}

Build a fire sprinkler erp