john/svsmspcalc
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Pre-Alpha to Alpha Ready

Browse Source
This commit is contained in:
John OReilly
2026-03-16 01:42:17 -04:00
parent 42b7b06dda
commit e6c0baef3b
60 changed files with 12287 additions and 230 deletions
Download Patch File Download Diff File Expand all files Collapse all files

154
docs/QUICK-REF.md
View File

@@ -3,32 +3,40 @@
## Stack
Vanilla HTML5/CSS3/JS (ES5-compatible). No frameworks, no npm, no build tools. Open HTML in browser to run.
## Project Status
**Design & Sales Optimization: COMPLETE** (2026-03-16)
- 22 tasks executed across 5 chunks
- 3 themes: Dark (flagship), Light, Glass — Retro removed
- 254 engine tests passing
- All responsive breakpoints verified
## 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 |
| File | Purpose | Key Functions |
|------|---------|---------------|
| `SVS-MSP-Calculator.js` | Orchestration, event binding | `update()`, `calcQuote()`, `stepInput()`, `initQuote()`, `toggleSection()` |
| `quote-engine.js` | Pure math (DO NOT TOUCH without tests) | `calculateQuote(state, pricing)`, `readFormState()`, `getPricingConfig()` |
| `quote-pricing.js` | Pricing defaults (34 keys), JSON loader | `getSnapshot()`, globals |
| `quote-render.js` | DOM rendering + animated counters | `renderSidebar()`, `animateValue()`, `setSummary()`, `renderNudge()`, `buildNudges()` |
| `quote-persistence.js` | localStorage save/restore | `saveState()`, `restoreState()`, `resetState()` |
| `quote-export.js` | Print/PDF + JSON export | Respects HST toggle, schema v1.0 |
| `quote-import.js` | JSON import + schema migration | Additive migrations only |
| `theme-manager.js` | 3-theme cycle + persistence | `toggleTheme()`, `applyTheme()`, `initTheme()` — cycle: Dark → Light → Glass |
| `mobile-sync.js` | Mobile panel dual-render | Clones sidebar, wraps `update()` for `_m` ID sync |
| `package-prices-data.js` | Pricing source (DO NOT MOVE) | Single source of truth for all rates |
### 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 |
### CSS (load order via manifest SVS-MSP-Calculator.css)
| File | Purpose | Key Tokens/Classes |
|------|---------|-------------------|
| `*-tokens.css` | Design tokens — colors, spacing, radii, typography, shadows | `--shadow-card/hover/open`, `--sidebar-zone-*`, `--text-money-hero` |
| `*-base.css` | Resets, top bar chrome | Global typography |
| `*-layout.css` | Grid: `.outer`, `.main-col`, `.side-col` | Section gap: `clamp(12px, 1.2vw, 20px)` |
| `*-components.css` | Sections, steppers, badges, sidebar, VS table, pitch bar | `.sec-active`, `.suffix-mo`, stepper-pulse keyframe, tabular-nums |
| `*-responsive.css` | Breakpoints: 1920+, ≤1350, ≤1100, ≤900, ≤600, 780L | Mobile: sidebar hidden, floating MRR badge |
| `*-print.css` | Print overrides | Strips shadows, animations, forces expand |
| `*-light.css` | Light theme token overrides | Softer shadows, inverted zone tints |
| `*-glass.css` | Glass theme (frosted blur) | Stronger shadows, translucent backgrounds |
### HTML Structure (section display order)
| Order | ID | Numeral | Title | Has Stepper |
@@ -38,29 +46,58 @@ Vanilla HTML5/CSS3/JS (ES5-compatible). No frameworks, no npm, no build tools. O
| 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]
```
| 6 | sec-06 | VI | VoIP / Unified Communications (UCaaS) | voipSeats |
### 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.
- Sidebar values: `sl-users-val`, `sl-endpoints-val`, `sl-servers-val`, `sl-zt-val`, `sl-voip-val`
- Hero: `mrrDisplay`, `annualDisplay`, `sl-monthly-total-val`
- Progress: `floorBar`, `floorNote`
### Pricing Defaults (from quote-pricing.js)
## Design System (post-optimization)
### Animations
| Animation | Duration | Trigger | Implementation |
|-----------|----------|---------|----------------|
| Number counter (sidebar + badges) | 350ms ease-out | Value change | `animateValue()` in quote-render.js |
| Stepper pulse | 150ms ease-out | +/- click | CSS `@keyframes stepper-pulse` + `.pulse` class in JS |
| Section expand/collapse | ~250ms | Click header | JS `animateSection()` + CSS height/opacity |
| Chevron rotate | `--transition-medium` | Section toggle | CSS `transform: rotate(180deg)` on `.sec-open` |
| Sidebar line hover | `--transition-fast` | Mouse hover | CSS border-left accent + padding shift |
| Progress bar | 300ms ease-out | Value change | CSS `transition: width` on `.progress-fill` |
| Term tile selection | 200ms ease | Click tile | CSS transitions on `.tier-seg` |
### Typography Hierarchy
- **Bold (700-800):** Section titles, hero MRI number, monthly total value
- **Semi-bold (600):** Sidebar `.val` amounts, line item labels
- **Medium (500):** `.sidebar-group-title`, uppercase labels
- **Regular (400):** Descriptions, subtitles, meta text
### Shadow Tokens (per theme)
- `--shadow-card` — base elevation on `.section`
- `--shadow-card-hover` — combined with `--section-hover-shadow` (left accent glow)
- `--shadow-card-open` — combined with `--section-open-shadow` (stronger glow)
### Active Section System
- `.sec-active` class toggled in `update()` based on section count > 0
- CSS: 3px left accent border via `color-mix(in srgb, var(--accent) 50%, transparent)`
- `.sec-active .section-num` — numeral turns accent-blue
### Sidebar Zones
- `.sidebar-group--monthly` — rounded container, `--sidebar-zone-services` tint
- `.sidebar-group--invoice` — `--sidebar-zone-invoice` tint
- `.sidebar-group--value` — green-tinted `--sidebar-zone-value`
- `.sidebar-line:hover` — accent border slides in left, background tints blue
## Pricing Defaults (from quote-pricing.js)
```
Users: M365 $140 (m2m) / $130 (12mo/24mo) | BYOL $110 | ExtHrs +$25 | 1PWM +$9 | INKY +$8 | ZT +$55
Users: M365 $140 (m2m) / $130 (annual) | 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%
Admin: Floor $150 | Threshold $650 | ZT +$250 | 1PWM 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)
@@ -70,16 +107,51 @@ HST: 13% (Ontario)
```
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.
254 tests, zero dependencies. Run after any pricing/engine/render changes.
## 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
- `update()` call chain → side effects cascade (calcQuote → render → sidebar → nudges → summaries → sec-active toggle → save)
- localStorage key: `svs-msp-quote-v1`
- `animateValue()` targets both desktop element AND `_m` mobile clone
- `.suffix-mo` span inside monthly total value — set via `innerHTML` not `textContent`
## Directory Layout
```
svsmspcalc/
├── SVS-MSP-Calculator.html # Main HTML shell
├── SVS-MSP-Calculator.css # CSS import manifest
├── SVS-MSP-Calculator.js # Orchestration + event binding
├── SVS-MSP-Calculator-tokens.css # Design tokens (shadows, zones, colors)
├── SVS-MSP-Calculator-base.css # Resets, typography
├── SVS-MSP-Calculator-layout.css # Grid system, section gap
├── SVS-MSP-Calculator-components.css # All UI components (~2100 lines)
├── SVS-MSP-Calculator-responsive.css # Breakpoints
├── SVS-MSP-Calculator-print.css # Print overrides
├── SVS-MSP-Calculator-light.css # Light theme overrides
├── SVS-MSP-Calculator-glass.css # Glass theme overrides
├── quote-engine.js # Pure math (254 tests)
├── quote-render.js # Rendering + animateValue()
├── quote-pricing.js # Pricing config
├── quote-persistence.js # localStorage
├── quote-export.js # Print/PDF + JSON export
├── quote-import.js # JSON import + migration
├── theme-manager.js # 3-theme cycle
├── mobile-sync.js # Mobile dual-render
├── package-prices-data.js # PRICING SOURCE
├── M365icons/ # Microsoft 365 icons
├── fontawesomekit/ # Font Awesome icons
├── pre-alpha/ # READ-ONLY archived reference
├── tests/
│ └── test-quote-engine.js # 254 engine tests
└── docs/
├── QUICK-REF.md # THIS FILE — architecture + file map
├── SESSION-HANDOFF.md # Current status + next steps
├── CHECKPOINT.md # Historical checkpoint
├── MASTER-SESSION-PROMPT.md # Master rebuild prompt
├── STAGE3-11 prompts # Historical stage prompts
├── quote-rules.md # Business logic rules
└── regression-checklist.md # QA checklist
```

56
docs/SESSION-HANDOFF.md Normal file
View File

@@ -0,0 +1,56 @@
# Session Handoff — SVS MSP CALC
**Last updated:** 2026-03-16
**Session:** Section I & II Visual Polish (Pass 2)
**Status:** COMPLETE — all 3 issues from Pass 1 resolved
## What Was Done This Session
### Section Polish Pass 2 — Premium Feel
Addressed all 3 issues flagged after Pass 1, verified across Dark/Light/Glass at 1920px + 600px.
1. **Vertical spacing rhythm** — bumped `.section-content > * + *` base gap from `--space-stack` (14px) to `--space-stack-roomy` (16px) for more breathing room between elements
2. **M365 app strip cleanup** — removed all per-item borders and backgrounds; items now float cleanly within the container. Removed icon drop-shadows. Removed accent-tinted container background/border (now uses neutral `--surface-feature` + `--border`). Removed border-top separator from note area.
3. **Collapsible header refinement** — switched from accent-tinted background (`--surface-accent-soft`) to neutral `--surface-feature`. Border changed from accent-tinted `color-mix()` to plain `--border`. Hover uses very subtle accent (6% mix) instead of heavy 10%. Result feels native across all 3 themes.
### Visual QA
- Playwright screenshots taken at 1920px desktop and 600px mobile
- Dark, Light, Glass themes all verified — collapsibles and M365 strip look native in each
- Section II (Endpoint Package) confirmed consistent with Section I styling
## Files Modified (this session)
| File | Changes |
|------|---------|
| `SVS-MSP-Calculator-components.css` | Section content gap 14→16px; M365 strip: removed per-item borders/bg/shadow, neutral container; collapsible headers: neutral bg/border, softer hover; strip note: removed border-top |
## Test Status
```
254/254 tests passing
node svsmspcalc/tests/test-quote-engine.js
```
## What's Next
Potential next steps (user to prioritize):
1. **Deeper spacing audit** — check vertical rhythm within expanded collapsible bodies (feature list items, addon rows) if user wants finer tuning
2. **Section III (Site Management)** polish pass — same treatment if needed
3. **Print/PDF verification** — confirm CSS changes don't affect print layout
4. **Mobile panel** — verify mobile panel rendering matches desktop sidebar
## Continuation Prompt
```
Read svsmspcalc/docs/SESSION-HANDOFF.md then svsmspcalc/docs/QUICK-REF.md.
3 themes: Dark, Light, Glass. Pre-alpha in svsmspcalc/pre-alpha/ (read-only).
254 tests must pass: node svsmspcalc/tests/test-quote-engine.js
## Plugins Available — USE THEM
- **frontend-design** — invoke for design decisions, spacing, color, layout
- **playwright** — open calculator in real browser, expand sections, toggle
themes, screenshot before/after every CSS change
- **code-simplifier** — clean up CSS after edits
- **superpowers** — brainstorming, planning workflows
Budget: stay under 60% context. Checkpoint before ending.
```

100
docs/STAGE11-SESSION-PROMPT.md Normal file
View File

@@ -0,0 +1,100 @@
# SVS MSP CALC — STAGE 11: BETA PREP
# Generated: 2026-03-15
---
## WHERE WE ARE
**Stages 1–10: COMPLETE.** Production-quality for Sections I–III across all 4 themes.
**Tests:** 254/254 passing.
### Stage 10 Completed Work
**Color Audit & Consolidation:**
- Full audit of all 4 theme CSS files — every unique color extracted, grouped by role
- Near-duplicates consolidated via aliases (e.g., 4 positive surfaces → 2 semantic tiers)
- On-accent text ladder collapsed from 5 → 3 levels
- Light theme: ~6 near-identical surfaces → 3 tiers, ~10 borders → 3 tiers
- Glass theme: 6 ice-white text values → 1 reference, 4 border opacities → 1 reference
- Retro theme: ~20 hardcoded hex in selectors → 7 `--retro-*` helper tokens
- 17 raw hex/rgba in components.css → new overlay/shadow tokens
- Retro `--sky` given distinct value (`#6366f1` indigo, was identical to `--green`)
- Unused `--text-on-accent-muted` removed
**Sidebar / Live Quote Polish:**
- Zone backgrounds strengthened + semantically tinted (value zone gets green tint)
- Line borders: last-child removed, totals get solid top border, dashed elsewhere
- Hover tint on sidebar lines for read-tracking
- `.export-wrap` background → transparent, border removed (all themes)
- Sidebar changed from sticky to static (scrolls with page)
**Section Grouping:**
- "MANAGED IT SERVICES (Sections I, II, III)" eyebrow label above section I
- Vertical accent bracket with top/bottom caps alongside sections I–III
- HR divider between Site Management (III) and Server Management (IV)
- Mobile: bracket hidden, sections I–III get accent left border instead
- Per-theme `--group-strip` token (blue/grey-teal/cyan/rose)
**Mobile:**
- Quote pill repositioned: `top: 12vh` at ≤600px (percentage-based, viewport-responsive)
---
## WHAT'S READY FOR BETA
- Sections I–III fully functional with live pricing, addons, admin fee logic
- All 4 themes visually polished and color-consistent
- Sidebar live quote with clear zone separation and clean borders
- Mobile panel sync working (100+ ID pairs)
- Print/PDF export functional
- JSON import/export functional
- 254 automated tests passing
## WHAT REMAINS (Sections IV–VI)
Sections IV (Server Management), V (Zero Trust Networking), VI (VoIP) are **placeholders only** — basic stepper + collapsed body, no active pricing or addons wired up. Do not activate unless explicitly requested.
---
## HARD CONSTRAINTS
1. DOM IDs are a contract — renaming breaks mobile sync (100+ pairs)
2. 254 tests must pass: `node svsmspcalc/tests/test-quote-engine.js`
3. All 4 themes must work after every change
4. No frameworks, no npm — vanilla only
5. Surgical changes only — read before editing
6. Sections IV–VI are placeholders — do not activate
---
## KEY FILES MODIFIED IN STAGE 10
| File | What Changed |
|------|-------------|
| `SVS-MSP-Calculator-tokens.css` | Semantic positive/overlay/sidebar/group tokens added; near-dupes aliased |
| `SVS-MSP-Calculator-light.css` | Surface/border consolidated; sidebar zone + group-strip tokens |
| `SVS-MSP-Calculator-glass.css` | Ice-whites + borders deduped; sidebar/group tokens; export-wrap cleaned |
| `SVS-MSP-Calculator-70retro.css` | 7 retro helper tokens; hardcoded hex → var(); distinct --sky; group-strip |
| `SVS-MSP-Calculator-components.css` | 17 raw colors tokenized; sidebar line/zone polish; group label + bracket |
| `SVS-MSP-Calculator-layout.css` | 1 raw #fff tokenized; sidebar position: static |
| `SVS-MSP-Calculator-responsive.css` | Mobile bracket → left border; group-divider; pill top: 12vh |
| `SVS-MSP-Calculator-print.css` | Group label/bracket/divider hidden in print |
| `SVS-MSP-Calculator.html` | Group label div + group divider HR added (decorative, no IDs) |
---
## VERIFICATION
```
node svsmspcalc/tests/test-quote-engine.js
```
254 tests, zero dependencies. Run after any pricing/engine/render changes.
---
## CONTEXT MANAGEMENT
After completing work:
- Update `docs/CHECKPOINT.md` with results
- If context is heavy, create `docs/STAGE12-SESSION-PROMPT.md` for the next chat