109 lines
5.3 KiB
Markdown
109 lines
5.3 KiB
Markdown
# 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-summary` through `sec06-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
|
||
- `::after` bracket — 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.js` math → run tests after any change
|
||
- Print CSS → sensitive to component class changes
|
||
- `update()` call chain → side effects cascade
|
||
- localStorage key: `svs-msp-quote-v1`
|