5.3 KiB
5.3 KiB
Quick Reference — SVS MSP CALC
Stack
Vanilla HTML5/CSS3/JS (ES5-compatible). No frameworks, no npm, no build tools. Open HTML in browser to run.
File Map
JS Runtime
| File | Purpose |
|---|---|
SVS-MSP-Calculator.js |
Orchestration: update(), calcQuote(), section toggles, initQuote() |
quote-engine.js |
Pure math: calculateQuote(state, pricing), readFormState(), getPricingConfig() |
quote-pricing.js |
Defaults (34 keys), JSON loader, getSnapshot(), globals |
quote-render.js |
DOM rendering: sidebar, summaries, nudges, setSummary(), renderNudge() |
quote-persistence.js |
saveState() / restoreState() / resetState() via localStorage |
quote-export.js |
Print/PDF (respects HST toggle) + JSON export (schema v1.0) |
theme-manager.js |
Dark/Light/Glass/70s Retro toggle + persistence |
mobile-sync.js |
Clones sidebar to mobile panel, wraps update() for _m ID sync |
CSS (load order via manifest)
| File | Purpose |
|---|---|
*-tokens.css |
Design tokens — single source for spacing, colors, radii, typography |
*-base.css |
Global chrome, top bar, resets |
*-layout.css |
Grid: .outer, .main-col, .sidebar, .client-bar |
*-components.css |
Sections, headers, sec-controls-row, badges, steppers, sidebar, VS comparison, export |
*-responsive.css |
Media queries: ≤1350, ≤1100, ≤900, ≤600 + landscape |
*-print.css |
Print overrides — hides controls, forces expand |
*-light.css |
Light theme color overrides |
*-glass.css |
Glass theme (glassmorphism) overrides |
*-70retro.css |
70s Retro theme overrides |
HTML Structure (section display order)
| Order | ID | Numeral | Title | Has Stepper |
|---|---|---|---|---|
| 1 | sec-02 | I | User Package | userCount |
| 2 | sec-03 | II | Endpoint Package | endpointCount |
| 3 | sec-01 | III | Site Management | — (badges only) |
| 4 | sec-04 | IV | Server Management | serverCount |
| 5 | sec-05 | V | Zero Trust Networking (HaaS) | ztNetSeats |
| 6 | sec-06 | VI | VoIP / Unified Comms (UCaaS) | voipSeats |
Section Header Layout (all 6 sections)
Grid Row 1: [numeral] [title-block] [chevron]
Grid Row 2: [sec-controls-row: stepper + badge + price]
Grid Row 3: [section-subtitle — expanded only]
Key DOM IDs (do not rename — mobile sync depends on these)
- Inputs:
userCount,endpointCount,serverCount,ztNetSeats,ztNetRouters,voipSeats - Summaries:
sec01-summarythroughsec06-summary - Admin:
adminFeeDisplay,adminWaived,feeBreakdown - Sidebar:
sidebarMRR,sidebarAnnual,sidebarDiscount, etc. - Progress:
floorBar,floorNote
Pricing Defaults (from quote-pricing.js)
Users: M365 $140 (m2m) / $130 (12mo/24mo) | BYOL $110 | ExtHrs +$25 | 1PWM +$9 | INKY +$8 | ZT +$55
Endpoints: $35/ea | USB +$4 | BMB +$25
Servers: $120/ea
ZT Net: $25/seat | $100/router
Admin: Floor $150 | Min $650 | ZT premium +$250 | 1PWM markup 10%
VoIP: Basic $28 | Standard $35 | Premium $45 | Phone +$15 | Fax +$10
Discounts: m2m 0% | 12mo 3% + 50% off onboarding | 24mo 5% + complimentary onboarding
HST: 13% (Ontario)
Tests
node svsmspcalc/tests/test-quote-engine.js
254 tests, zero dependencies. Run after any pricing/engine changes.
Remind User
After reading docs, always say:
You have an automated test suite (254 tests). I can run it anytime, or modify it for new scenarios.
Token Architecture (Stage 10)
Color Token Layers
- Core palette:
--ink,--paper,--accent,--muted,--border,--card,--green,--amber,--sky - Semantic aliases:
--surface-positive-soft/strong,--border-positive-soft/strong,--text-on-accent/soft/subtle - Sidebar quote tokens:
--sidebar-zone-services/invoice/value/summary/tax,--sidebar-line-rule,--sidebar-total-rule,--sidebar-row-stripe - Overlay tokens:
--surface-overlay-btn,--border-overlay-btn,--focus-ring-overlay,--shadow-sidebar-focus - Section grouping:
--group-strip(bracket color per theme) - Retro helpers:
--retro-cream,--retro-dark,--retro-cta-gradient,--retro-dark-gradient
Section Grouping (Stage 10)
.group-label— "MANAGED IT SERVICES (Sections I, II, III)" eyebrow above section I::afterbracket — vertical accent strip with top/bottom caps on#sec-02,#sec-03,#sec-01.group-divider— HR between Site Management (III) and Server Management (IV),order: 3- Mobile (≤600px): bracket hidden, sections I–III get
border-left: 3px solid var(--group-strip)instead
Sidebar (Live Quote)
.sidebar-group--monthly/tax/invoice/value/summary— zone backgrounds via tokens.sidebar-line— dashed rule via--sidebar-line-rule, no border on last-child.sidebar-line-total— solid top border via--sidebar-total-rule, no bottom border.export-wrap— transparent background, no border (buttons float naturally).side-col—position: static(scrolls with page, not sticky)
Danger Zones
- DOM IDs → mobile sync breaks silently if renamed
quote-engine.jsmath → run tests after any change- Print CSS → sensitive to component class changes
update()call chain → side effects cascade- localStorage key:
svs-msp-quote-v1