Waldons IT & Security Operations

Real-time Store Monitoring Dashboard 🌸

Sunday 6 September 2026

19:02:40

Scenario System Export

Copy this simulation framework into your other apps

About This System

This scenario system allows you to simulate critical incidents across your infrastructure. It's perfect for demos, training, and testing incident response procedures without affecting real data.

3 Pre-built Scenarios

URL Parameter Control

Real-time Simulation

Easy Reset

ScenarioContext

import React, { createContext, useContext, useState, useRef } from 'react';

const ScenarioContext = createContext(null);

export function ScenarioProvider({ children }) {
  const [activeScenario, setActiveScenario] = useState(null);
  const activeScenarioRef = useRef(null);
  const [originalData, setOriginalData] = useState({ stores: [], incidents: [], services: [] });
  const [forceUpdate, setForceUpdate] = useState(0);

  const value = {
    activeScenario,
    setActiveScenario,
    activeScenarioRef,
    originalData,
    setOriginalData,
    forceUpdate,
    setForceUpdate
  };

  return (
    <ScenarioContext.Provider value={value}>
      {children}
    </ScenarioContext.Provider>
  );
}

export function useScenario() {
  const context = useContext(ScenarioContext);
  if (!context) {
    throw new Error('useScenario must be used within a ScenarioProvider');
  }
  return context;
}

Implementation Checklist

Create components/dashboard/ScenarioContext.jsx with the context code

Wrap your app with ScenarioProvider in Layout.js

Add the scenario functions to your Dashboard component

Add URL parameter handler for triggering scenarios

Add the simulation banner UI to show active scenarios

Customize scenarios for your specific entities and services