CaseFlow is an enterprise-grade, gamified Case & Incident Management Dashboard built on the Salesforce Platform using Lightning Web Components (LWC) and Apex. It reimagines standard Salesforce case queues into an immersive Mission Control Console—complete with real-time SLA countdown timers, agent level/XP gamification, streak tracking, interactive terminal controls, and a zero-dependency HTML5 Canvas particle confetti system for celebrating resolved cases.
- Dynamic Experience Points (XP): Earn XP automatically upon case resolution (+100 XP standard, +150 XP for High Priority cases).
- Tiered Rank Titles: Progression system with custom titles ranging from
Queue Trainee→SLA Sentinel→Queue Crusader→Ticket Overlord→Incident Master→Omnichannel Legend. - Level-Up Overlay & XP Popups: Animated modal overlays celebrate rank promotions, while floating XP popups provide immediate positive feedback.
- SLA Resolution Streaks: Tracks consecutive case resolutions achieved prior to SLA breach (
sessionStoragepersistence with flame indicator).
- Priority-Based SLA Targets:
- 🔴 High Priority: 15-minute resolution target.
- 🟡 Medium Priority: 30-minute resolution target.
- 🟢 Low Priority: 60-minute resolution target.
- Live Per-Second Ticker: Dynamic JavaScript interval updates countdown timers live without requiring page refreshes.
- Visual SLA State Indicators: Color-coded states (
normal,warningunder 5 minutes with pulsing animation, andoverdue 00:00).
- Interactive Inspection Deck: Select any queue mission to view client account details, contact names, case priority, and creation dates.
- Mission Report Logging: Append operational audit notes to cases with automated user & timestamp signatures (
--- MISSION REPORT BY [User] ([Timestamp]) ---). - Quick Actions: 1-click Resolve Mission (closes case & triggers celebration) or Request Backup (escalates ticket to standard tier).
- Empty State Scanner: Dynamic radar sweep animation when all queue cases are cleared.
- Built-in 2D particle simulation using HTML5 Canvas embedded directly inside the LWC.
- Zero third-party library dependencies for high performance and strict Salesforce Locker Service / LWS compliance.
- Premium, high-contrast dark theme with CSS custom properties, glassmorphism card panels, glowing badges, neon accents, and custom cyber scrollbars.
| Layer | Technology | Key Component / Description |
|---|---|---|
| Frontend UI | Lightning Web Components (LWC) | Custom LWC (caseFlowConsole) with reactive track properties & canvas rendering |
| Styling | Vanilla CSS3 | Custom design system using glassmorphism, flexbox grid, and CSS keyframe animations |
| Backend | Apex (CaseFlowController) |
Strongly typed Apex controller handling SOQL aggregate queries & transactional updates |
| Data Security | Salesforce Sharing Model | with sharing keyword enforcement to maintain record-level security and FLS |
| Deployment | Salesforce DX (SFDX) | Standard metadata packaging (Flexipage, Custom Tab, Permission Set) |
| Quality | ESLint & Prettier | Code linting, formatting, and sfdx-lwc-jest test configuration |
case-flow/
├── assets/
│ └── case_flow_console_preview.png # Dashboard interface preview image
├── config/
│ └── project-scratch-def.json # Scratch org configuration definition
├── default/ # Salesforce DX source package directory
│ ├── classes/
│ │ ├── CaseFlowController.cls # Apex controller with SOQL & DML methods
│ │ └── CaseFlowController.cls-meta.xml # Apex class metadata
│ ├── flexipages/
│ │ └── CaseFlow_Dashboard.flexipage-meta.xml # Lightning App Page layout
│ ├── lwc/
│ │ └── caseFlowConsole/
│ │ ├── caseFlowConsole.html # LWC template (HUD, Queue, Terminal, Modals)
│ │ ├── caseFlowConsole.js # LWC logic, timers, SLA engine, canvas confetti
│ │ ├── caseFlowConsole.css # Modern Cyberpunk/Glassmorphic design system
│ │ └── caseFlowConsole.js-meta.xml # LWC target configuration & exposure settings
│ ├── permissionsets/
│ │ └── CaseFlow_Console.permissionset-meta.xml # App permission set definition
│ └── tabs/
│ └── CaseFlow_Dashboard.tab-meta.xml # Custom Lightning tab declaration
├── scripts/
│ └── apex/
│ └── hello.apex # Anonymous Apex execution script
├── package.json # Node dependencies, Jest test scripts, Prettier & ESLint configs
├── sfdx-project.json # Salesforce DX project manifest
└── README.md # Project documentation
- Salesforce CLI (
sf/sfdx) installed. - Visual Studio Code with the Salesforce Extension Pack.
- An active Salesforce Developer Org, Trailhead Playground, or Scratch Org environment.
git clone https://github.com/your-username/case-flow.git
cd case-flow# Authorize your Dev Hub org
sf org login web --set-default-dev-hub --alias DevHub
# Create a scratch org
sf org create scratch --definition-file config/project-scratch-def.json --alias CaseFlowOrg --set-default --duration-days 7# Deploy all metadata to your default org
sf project deploy start --target-org CaseFlowOrg# Assign the CaseFlow Console permission set to your user
sf org assign permset --name CaseFlow_Console --target-org CaseFlowOrg# Open the org in your browser
sf org open --target-org CaseFlowOrgNavigate to the App Launcher (grid icon) in Salesforce and search for CaseFlow Dashboard.
Run local LWC unit tests using Jest:
npm run test:unitRun code formatting and verification:
# Format code with Prettier
npm run prettier
# Verify code syntax and LWC standards
npm run lintgetDashboardData(): Retrieves up to 50 active cases owned by the context user ordered by priority, along with aggregate stats for cases resolved today and high-priority cases closed today.resolveCase(Id caseId): Sets the case status toClosedand returns refreshed dashboard wrapper data.escalateCase(Id caseId): Sets the case status toEscalatedand returns refreshed dashboard wrapper data.saveCaseReport(Id caseId, String reportText): Appends a timestamped audit log to the case description (--- MISSION REPORT BY [User] ([Timestamp]) ---).
Distributed under the MIT License. See LICENSE for details.
Developed as a portfolio project showcasing modern Salesforce Development, LWC, Apex, and UI/UX design.