Event

SketchSystems.spec

Event
  Planning

  In progress 
  Completed
  
Shipment
  DFID responsible
    Preparing  
      Pending agreement
        Agree to shipment -> Agreed
  Supplier responsible
    Agreed
      Needs to be manufactured -> Manufacturing
      Does not need manufacturing -> In storage
    Manufacturing
      Complete manufacturing -> In storage
    In storage
      Start shipment -> In transit
      
   Logistics service provider responsible   
     In transit
      Handover->In transit
      Last handover -> Delivered

  Implementing partner responsible
    Delivered
        

SketchSystems_prototype.js

function render(model){
  let current_state_name = model.active_states[0].name;
  return $("h1",
           {style: {color: "darkBlue"}},
           `The current state is: ${current_state_name}`);
}