SLA Calculator

A web-based SLA (Service Level Agreement) calculator for the eCom Content Factory. Replaces the Excel-based workflow with a 4-step wizard that PMs use to estimate project timelines and determine if deadlines can be met.

How It Works

Select Brief Type - Choose from 9 brief types (Country Pull, Global Push, Local Push, Urgent, etc.). Each brief type displays a scope description and auto-populates which of the 8 project stages apply.
Configure Stages - Toggle stages on/off, set complexity levels, asset volumes (up to 300-400), revision rounds (supports decimals), and market approval days.
Enter Dates - Set the project kick-off date and required go-live date.
View Results - See the full timeline breakdown (List + Gantt views), key dates per stage, and a clear Y/N verdict on whether the deadline can be met.

Project Structure

index.html    - UI (Tailwind CSS, Flatpickr date pickers, 4-step wizard)
script.js     - Calculation engine, form dynamics, PDF + iCal export
config.json   - All business rules (zero hard-coded logic in JS)

Editing Business Rules

All assumptions, stage definitions, complexity levels, cross-reference tables, tooltips, and default values live in config.json. Non-developers can edit this file to update:

Brief types and stage matrix - Which stages apply to which brief type
Production cross-reference table - Days by complexity x asset volume
Syndication cross-reference table - Days by complexity x EAN volume
Translation word count ranges - Days by word count bucket
Opera Upload days - Days by asset volume
Default values - Revision rounds, market approval days, revision days per round
Tooltips and descriptions - Help text shown to PMs in the UI
Syndication buffer - Currently 10 business days (configurable)

Key Calculation Logic

Uses business days (Monday-Friday), not calendar days
Each active stage adds: Handover (1 day) + WIP days + Market Approval days + (Revision Days x Rounds)
Syndication buffer: When syndication is active, a 10 business-day buffer is added to the suggested go-live date
Stages 4 & 5 (Translation PDP + Asset) run in parallel and share one set of inputs
Opera Upload is mandatory for all brief types — the toggle is locked on and cannot be deactivated by users (controlled via alwaysActive: true in config.json)

Features

Dark mode toggle (persists to localStorage)
Mobile responsive layout
Export to PDF (landscape A4)
Export to iCal (.ics) with key milestone dates for Outlook/Google Calendar
Real-time calculation on every input change
Tooltips matching the original Excel comments
Non-contractual dates disclaimer banner
Brief type scope descriptions displayed as bullet lists
Gantt chart view alongside list view in results

Running Locally

Open index.html in a browser, or serve with any static file server:

npx serve -l 8080

Then visit http://localhost:8080.

Dependencies (via CDN)

Tailwind CSS - Styling
Flatpickr - Date pickers
html2pdf.js - PDF export

No build step required. No npm install needed.

Deployment

This is a fully static site (HTML + JS + JSON). Deploy to any static hosting:

Netlify - Drag & drop or connect this repo
Vercel - Connect this repo for auto-deploy
SharePoint - Upload files directly
Azure Static Web Apps - Free tier

Verified Against Excel

The calculator has been verified against the original Excel workbook example:

Input	Value
Brief Type	Country Pull - Simple
Active Stages	Production + Opera Upload
Production	Simple / 50-100 Assets / 0 revisions / 50% speedup
Kick-off	6 Mar 2026
Go-Live	9 Mar 2026

Output	Value
Production Complete	16 Mar
Opera Upload Complete	19 Mar
Verdict	N (cannot meet deadline)

Changelog

2026-03-12

Added non-contractual dates disclaimer banner at top of page
Revision and approval fields now accept decimal values (e.g. 0.2, 0.5)
Opera Upload stage is now mandatory for all brief types
Removed "Speed Up by %" slider from Production stage
Extended asset volume brackets: added 100-200, 200-300, 300-400 (WIP day values are provisional placeholders — see SLA_Asset_Brackets_Review.pdf)
Updated all 9 brief type descriptions with client-approved scope definitions
Brief descriptions now render as bullet lists for easier scanning

2026-03-13

Opera Upload stage is now fully locked: toggle disabled, badge non-clickable, "Required" label shown in both Step 1 badges and Step 2 stage card
Uses config-driven alwaysActive flag — no hard-coded stage index in JS
Cache-busting version bumped to v=2026031302

4.8 KiB Executable file Raw Blame History