Instance View Property Panel

[iaktern]

Create a nice Property Panel that can be shown and hidden on top of Instance BPMN diagram. The BPMN diagram show the current process instance status with tokens and the Property Panel should show additional information in text form. The Property Panel has a max-width of 70vw, a min-width of 300px, it should be user-friendly with white background, it should have multiple tabs and it should have a toggle to show and hide advanced information. We have the following data available:

Process Instance information:

• Current state (Running, Paused, Stopped, Aborted, Terminated, Failed, etc.) -> Display Name: ; Tabs: everywhere (on top of tabs)
• Process Name -> Display Name: ; Tabs: everywhere (on top of tabs) + Overview + Details (as "Name")
• Process Documentation -> Display Name: ; Tabs: Overview + Details (as "Description")
• Process Short Name -> Display Name: ; Tabs: Overview + Details (as "Short name")
• Process Overview Picture (optional, not always set) -> Display Name: ; Tabs: Overview
• Responsible Person for the Process -> Display Name: "Process Manager" ; Tabs: Details;
• Process ID -> Display Name: ; Tabs: Details; Technical Detail toggle: true

---

• Version Name -> Display Name: "Version" ; Tabs: Details
• Version Description -> Display Name: "What changed" ; Tabs: Details
• Process ID of the Process Version the current version is based on -> Display Name: "Based on ID"; Tabs: Details; Technical Detail toggle: true
• Process Name of the Process Version the current version is based on -> Display Name: "Based on"; Tabs: Details
• Version Created on -> Display Name: "Created on"; Tabs: Details

---

• Instance ID -> Display Name: ; Tabs: Details; Technical Detail toggle: true
• Start Time -> Display Name: "Started" ; Tabs: Overview + Details
• End Time -> Display Name: "Ended" ; Tabs: Overview + Details
• Planned Duration (at design time) -> Display Name: "Planned" ; Tabs: Overview + Details
• Calculated duration (shows the current duration even if the process has not yet ended) -> Display Name: "Running for" ; Tabs: Overview + Details

---

• Process Initiator Name -> Display Name: "Started By" ; Tabs: Overview + Details
• Process Initiator ID -> Display Name: "User ID" ; Tabs: Details; Technical Detail toggle: true
• Process Initiator Username -> Display Name: "User Name" ; Tabs: Details; Technical Detail toggle: true
• Process Initiator Space Name -> Display Name: "Space" ; Tabs: Details; Technical Detail toggle: true
• Process Initiator Space ID -> Display Name: "Space ID" ; Tabs: Details; Technical Detail toggle: true

---

• Multiple Milestones with ID (not a technical id but a human-readable one), Name and Description -> Display Name: ; Tabs: Milesstones

---

• Process Engine Name (where the instance is executed) -> Display Name: "Engine" ; Tabs: Details; Technical Detail toggle: true
• Process Engine ID (where the instance is executed) -> Display Name: "Engine ID" ; Tabs: Details; Technical Detail toggle: true

---

• Planned Budget (at design time) -> Display Name: "Planned" (Under "Budget" heading) ; Tabs: Overview
• Real Budget: This is either calculated from the "Real Budget" of each BPMN element and/or it should be possible to manually override and set this value with an input field -> Display Name: "Calculated"/"Actual" (Under "Budget" heading) ; Tabs: Overview

---

• Defined Process Variables and their current state (Name, Type, Value, Format (optional), Description (optional), Required at Startup (optional), Unchangeable Value (optional), Default Value (optional), Allowed Values (optional)), the value field should be editable to override the current value -> Display Name: ; Tabs: Data

---

• Process Execution log messages -> Display Name: ; Tabs: Activity

---

Additional BPMN element information if selected in the BPMN diagram:

• Current state (Running, Paused, Stopped, Aborted, Terminated, Failed, etc.)
• BPMN element ID (we would )
• BPMN element Name
• BPMN element Documentation
• BPMN element Type (Event, Activity, Gateways play the type, e.g. User Task)
• BPMN element overview picture
• BPMN element ID of the previous BPMN element
• Multiple Milestones with ID, Name and Description
• User-Task and Script-Task only: Current progress (optional, often just 0% or 100% because not all tasks set a progress status during their execution)
• User-Task only: Assigned Performer (multiple specified users or roles)
• User-Task only: Actual Performer Name
• User-Task only: Actual Performer Username
• User-Task only: Actual Performer ID
• User-Task only: Priority
• Planned Duration (at design time)
• Start Time
• End Time
• Calculated duration (shows the current duration even if the process has not yet ended)
• Boolean if the BPMN element is executed externally
• Planned Budget (at design time)
• Real Budget: it should be possible to manually set this value with an input field
• Element Execution log messages
• Changed Process Variables per BPMN element and their old and new value
• Execution instructions (for gateways and events this are often condition checks, for script tasks this are scripts, for user tasks this is a html page)

please don't use too BPMN or process specific terminology. easier words are better so that every employee understands the content. e.g. "step" instead of "BPMN element"