feat: Implement simulation dashboard with Zustand store, types, and UI components for block and element management.

app/src/components/SimulationDashboard/DashboardEditor.tsx

@@ -55,6 +55,7 @@ const DashboardEditor: React.FC = () => {
         peekUpdateGraphData,
         peekUpdateGraphTitle,
         peekUpdateGraphType,
+        peekUpdateTextValue,
         peekUpdateDataType,
         peekUpdateCommonValue,
         peekUpdateDataValue,
@@ -611,6 +612,13 @@ const DashboardEditor: React.FC = () => {
                                 await updateBackend(updatedBlock);
                             }
                         }}
+                        updateTextValue={async (blockId, elementId, textValue) => {
+                            const updatedBlocks = peekUpdateTextValue(blockId, elementId, textValue);
+                            const updatedBlock = getBlockFromPeekedBlocks(updatedBlocks, blockId);
+                            if (updatedBlock) {
+                                await updateBackend(updatedBlock);
+                            }
+                        }}
                         updateDataType={async (blockId, elementId, dataType) => {
                             const updatedBlocks = peekUpdateDataType(blockId, elementId, dataType);
                             const updatedBlock = getBlockFromPeekedBlocks(updatedBlocks, blockId);

app/src/components/SimulationDashboard/components/element/ElementDesign.tsx

@@ -25,6 +25,7 @@ interface ElementDesignProps {
     updateGraphData: (blockId: string, elementId: string, newData: GraphDataPoint[]) => void;
     updateGraphTitle: (blockId: string, elementId: string, title: string) => void;
     updateGraphType: (blockId: string, elementId: string, type: GraphTypes) => void;
+    updateTextValue: (blockId: string, elementId: string, textValue: string) => void;
     updateDataType: (blockId: string, elementId: string, dataType: "single-machine" | "multiple-machine") => void;
     updateCommonValue: (blockId: string, elementId: string, commonValue: string) => void;
     updateDataValue: (blockId: string, elementId: string, dataValue: string | string[]) => void;
@@ -45,6 +46,7 @@ const ElementDesign: React.FC<ElementDesignProps> = ({
     updateElementZIndex,
     updateGraphTitle,
     updateGraphType,
+    updateTextValue,
 }) => {
     const [color, setColor] = useState("#000000");
 
@@ -76,6 +78,19 @@ const ElementDesign: React.FC<ElementDesignProps> = ({
                 </div>
             )}
 
+            {element?.type === "text" && (
+                <div className="design-section">
+                    <InputWithDropDown
+                        label="Text Value"
+                        value={currentElement.textValue || ""}
+                        placeholder={"Enter text..."}
+                        onChange={(newValue: string) => {
+                            updateTextValue(selectedBlock, selectedElement, newValue);
+                        }}
+                    />
+                </div>
+            )}
+
             <div className="design-section">
                 <div className="section-header">Position</div>
                 <div className="select-type">

app/src/components/SimulationDashboard/components/element/ElementEditor.tsx

@@ -25,6 +25,7 @@ interface ElementEditorProps {
     updateGraphData: (blockId: string, elementId: string, newData: GraphDataPoint[]) => void;
     updateGraphTitle: (blockId: string, elementId: string, title: string) => void;
     updateGraphType: (blockId: string, elementId: string, type: GraphTypes) => void;
+    updateTextValue: (blockId: string, elementId: string, textValue: string) => void;
     updateDataType: (blockId: string, elementId: string, dataType: "single-machine" | "multiple-machine") => void;
     updateCommonValue: (blockId: string, elementId: string, commonValue: string) => void;
     updateDataValue: (blockId: string, elementId: string, dataValue: string | string[]) => void;
@@ -46,6 +47,7 @@ const ElementEditor: React.FC<ElementEditorProps> = ({
     updateGraphData,
     updateGraphTitle,
     updateGraphType,
+    updateTextValue,
     updateDataType,
     updateCommonValue,
     updateDataValue,
@@ -562,6 +564,7 @@ const ElementEditor: React.FC<ElementEditorProps> = ({
                     updateGraphData={updateGraphData}
                     updateGraphTitle={updateGraphTitle}
                     updateGraphType={updateGraphType}
+                    updateTextValue={updateTextValue}
                     updateDataType={updateDataType}
                     updateCommonValue={updateCommonValue}
                     updateDataValue={updateDataValue}

app/src/components/SimulationDashboard/functions/helpers/resolveElementValue.ts

@@ -1,6 +1,11 @@
 import type { UIElement } from "../../../../types/exportedTypes";
 
 export const resolveElementValue = (element: UIElement) => {
+    // For text elements, return the textValue
+    if (element.type === "text") {
+        return { value: element.textValue || "Text" };
+    }
+
     if (!element.dataBinding) {
         return { value: "No data" };
     }

app/src/store/simulation/useSimulationDashBoardStore.ts

@@ -48,6 +48,7 @@ interface SimulationDashboardStore {
     updateGraphData: (blockId: string, elementId: string, newData: GraphDataPoint[]) => void;
     updateGraphTitle: (blockId: string, elementId: string, title: string) => void;
     updateGraphType: (blockId: string, elementId: string, graphType: GraphTypes) => void;
+    updateTextValue: (blockId: string, elementId: string, textValue: string) => void;
 
     // Element swapping
     swapElements: (blockId: string, elementId1: string, elementId2: string) => void;
@@ -73,6 +74,7 @@ interface SimulationDashboardStore {
     peekUpdateGraphData: (blockId: string, elementId: string, newData: GraphDataPoint[]) => Block[];
     peekUpdateGraphTitle: (blockId: string, elementId: string, title: string) => Block[];
     peekUpdateGraphType: (blockId: string, elementId: string, graphType: GraphTypes) => Block[];
+    peekUpdateTextValue: (blockId: string, elementId: string, textValue: string) => Block[];
     peekUpdateDataType: (blockId: string, elementId: string, dataType: "single-machine" | "multiple-machine") => Block[];
     peekUpdateCommonValue: (blockId: string, elementId: string, commonValue: string) => Block[];
     peekUpdateDataValue: (blockId: string, elementId: string, dataValue: string | string[]) => Block[];
@@ -321,6 +323,7 @@ export const createSimulationDashboardStore = () => {
                             newElement = {
                                 ...commonProps,
                                 type: "text",
+                                textValue: "Text",
                                 style: {
                                     color: "#ffffff",
                                     fontSize: 14,
@@ -487,6 +490,18 @@ export const createSimulationDashboardStore = () => {
                 });
             },
 
+            updateTextValue: (blockId, elementId, textValue) => {
+                set((state) => {
+                    const block = state.blocks.find((b) => b.blockUuid === blockId);
+                    if (block) {
+                        const element = block.elements.find((el) => el.elementUuid === elementId);
+                        if (element && element.type === "text") {
+                            element.textValue = textValue;
+                        }
+                    }
+                });
+            },
+
             // Element swapping
             swapElements: (blockId, elementId1, elementId2) => {
                 set((state) => {
@@ -685,6 +700,7 @@ export const createSimulationDashboardStore = () => {
                         newElement = {
                             ...commonProps,
                             type: "text",
+                            textValue: "Text",
                             style: {
                                 color: "#ffffff",
                                 fontSize: 14,
@@ -846,6 +862,18 @@ export const createSimulationDashboardStore = () => {
                 return blocks;
             },
 
+            peekUpdateTextValue: (blockId, elementId, textValue) => {
+                const blocks = cloneBlocks(get().blocks);
+                const block = blocks.find((b) => b.blockUuid === blockId);
+                if (block) {
+                    const element = block.elements.find((el) => el.elementUuid === elementId);
+                    if (element && element.type === "text") {
+                        element.textValue = textValue;
+                    }
+                }
+                return blocks;
+            },
+
             peekUpdateDataType: (blockId: string, elementId: string, dataType: DataType) => {
                 const blocks = cloneBlocks(get().blocks);
 

app/src/types/exportedTypes.ts

@@ -20,6 +20,7 @@ export type UIElement = {
     type: UIType;
     graphType?: GraphTypes;
     graphTitle?: string;
+    textValue?: string;
     style: ExtendedCSSProperties;
     dataBinding?: ElementDataBinding;
     position?: Position;