Use a unique ID and prevent ID clashes when re-importing JSON data

.next/static/chunks/webpack.js

@@ -181,7 +181,7 @@
 /******/ 	
 /******/ 	/* webpack/runtime/getFullHash */
 /******/ 	(() => {
-/******/ 		__webpack_require__.h = () => ("6300dd3bf6541327")
+/******/ 		__webpack_require__.h = () => ("800018b22e2314bc")
 /******/ 	})();
 /******/ 	
 /******/ 	/* webpack/runtime/global */

components/Blueprint.js

@@ -3,88 +3,92 @@ import Stage from "./stage/Stage";
 import InfoColumn from "./help/InfoColumn";
 import { useBlueprint } from "../context/BlueprintContext";
 
-const Blueprint = forwardRef(({ onDelete, recalculateHeightsFlag }, ref) => {
-  const { blueprint, setBlueprint } = useBlueprint();
-  const sectionRefs = useRef({});
-  const newStageRef = useRef(null);
-  const [maxHeights, setMaxHeights] = useState({
-    customerEmotions: 120,
-    customerActions: 120,
-    frontstageInteractions: 120,
-    backstageInteractions: 120,
-    supportProcesses: 120,
-    physicalEvidence: 120,
-  });
-
-  const resetHeights = () => {
-    setMaxHeights({
+const Blueprint = forwardRef(
+  ({ onEdit, onDelete, recalculateHeightsFlag }, ref) => {
+    const { blueprint, setBlueprint } = useBlueprint();
+    const sectionRefs = useRef({});
+    const newStageRef = useRef(null);
+    const [maxHeights, setMaxHeights] = useState({
       customerEmotions: 120,
       customerActions: 120,
       frontstageInteractions: 120,
       backstageInteractions: 120,
       supportProcesses: 120,
       physicalEvidence: 120,
     });
-  };
 
-  const calculateMaxHeights = () => {
-    const heights = {
-      customerEmotions: 120,
-      customerActions: 120,
-      frontstageInteractions: 120,
-      backstageInteractions: 120,
-      supportProcesses: 120,
-      physicalEvidence: 120,
+    const resetHeights = () => {
+      setMaxHeights({
+        customerEmotions: 120,
+        customerActions: 120,
+        frontstageInteractions: 120,
+        backstageInteractions: 120,
+        supportProcesses: 120,
+        physicalEvidence: 120,
+      });
     };
 
-    blueprint.forEach((_, index) => {
-      Object.keys(heights).forEach((category) => {
-        const categoryHeight =
-          sectionRefs.current[index]?.[category]?.offsetHeight || 120;
-        heights[category] = Math.max(heights[category], categoryHeight);
+    const calculateMaxHeights = () => {
+      const heights = {
+        customerEmotions: 120,
+        customerActions: 120,
+        frontstageInteractions: 120,
+        backstageInteractions: 120,
+        supportProcesses: 120,
+        physicalEvidence: 120,
+      };
+
+      blueprint.forEach((_, index) => {
+        Object.keys(heights).forEach((category) => {
+          const categoryHeight =
+            sectionRefs.current[index]?.[category]?.offsetHeight || 120;
+          heights[category] = Math.max(heights[category], categoryHeight);
+        });
       });
-    });
 
-    setMaxHeights(heights);
-  };
+      setMaxHeights(heights);
+    };
 
-  // Trigger reset and recalculation after the blueprint and DOM updates
-  useLayoutEffect(() => {
-    resetHeights();
-    calculateMaxHeights();
-  }, [recalculateHeightsFlag, blueprint]);
+    // Trigger reset and recalculation after the blueprint and DOM updates
+    useLayoutEffect(() => {
+      resetHeights();
+      calculateMaxHeights();
+    }, [recalculateHeightsFlag, blueprint]);
 
-  const addStage = () => {
-    const newStage = {
-      stage: `Stage ${blueprint.length + 1}`,
-      customerEmotions: "",
-      customerActions: "",
-      frontstageInteractions: "",
-      backstageInteractions: "",
-      supportProcesses: "",
-      physicalEvidence: "",
-    };
+    const addStage = () => {
+      const newStage = {
+        id: Date.now(), // Generate a unique ID based on timestamp
+        stage: `Stage ${blueprint.length + 1}`,
+        customerEmotions: "",
+        customerActions: "",
+        frontstageInteractions: "",
+        backstageInteractions: "",
+        supportProcesses: "",
+        physicalEvidence: "",
+      };
 
-    setBlueprint([...blueprint, newStage]);
-  };
+      setBlueprint([...blueprint, newStage]);
+    };
 
-  return (
-    <div className="flex overflow-x-auto p-4 sm:p-4 pl-0 sm:pl-4 gap-8 blueprint-container">
-      <InfoColumn maxHeights={maxHeights} />
+    return (
+      <div className="flex overflow-x-auto p-4 sm:p-4 pl-0 sm:pl-4 gap-8 blueprint-container">
+        <InfoColumn maxHeights={maxHeights} />
 
-      {blueprint.map((stage, index) => (
-        <Stage
-          key={index}
-          index={index}
-          stageData={stage}
-          maxHeights={maxHeights}
-          sectionRefs={sectionRefs}
-          onDelete={onDelete}
-          ref={index === blueprint.length - 1 ? newStageRef : null}
-        />
-      ))}
-    </div>
-  );
-});
+        {blueprint.map((stage, index) => (
+          <Stage
+            key={stage.id} // Use id as the key
+            index={index}
+            stageData={stage}
+            maxHeights={maxHeights}
+            sectionRefs={sectionRefs}
+            onEdit={onEdit} // Pass the onEdit function to each Stage component
+            onDelete={() => onDelete(stage.id)} // Pass id to the delete handler
+            ref={index === blueprint.length - 1 ? newStageRef : null}
+          />
+        ))}
+      </div>
+    );
+  }
+);
 
 export default Blueprint;

components/dialogs/DeleteStageConfirmationDialog.js

@@ -1,30 +1,34 @@
 // components/DeleteStageConfirmationDialog.js
-import React, { useEffect } from 'react';
+import React, { useEffect, useRef } from "react";
 
 const ConfirmationDialog = ({ isOpen, onClose, onConfirm, stageName }) => {
+  const dialogRef = useRef(null); // Create a ref for the dialog
+
   useEffect(() => {
-    // Define the Escape key handler
     const handleEscape = (event) => {
-      if (event.key === 'Escape') {
-        onClose(); // Call the onClose function if Escape is pressed
+      if (event.key === "Escape") {
+        onClose(); // Close the dialog if Escape key is pressed
       }
     };
 
-    // Add event listener when the dialog is open
     if (isOpen) {
-      document.addEventListener('keydown', handleEscape);
+      document.addEventListener("keydown", handleEscape);
+      dialogRef.current && dialogRef.current.focus(); // Focus the dialog when open
     }
 
-    // Clean up the event listener when the dialog is closed
     return () => {
-      document.removeEventListener('keydown', handleEscape);
+      document.removeEventListener("keydown", handleEscape);
     };
-  }, [isOpen, onClose]); // Dependency array ensures this runs when isOpen changes
+  }, [isOpen, onClose]);
 
-  if (!isOpen) return null; // Don’t render if the dialog is closed
+  if (!isOpen) return null;
 
   return (
-    <div className="fixed inset-0 bg-gray-800 bg-opacity-50 flex items-center justify-center z-50">
+    <div
+      className="fixed inset-0 bg-gray-800 bg-opacity-50 flex items-center justify-center z-50"
+      tabIndex={-1}
+      ref={dialogRef} // Set the ref here
+    >
       <div className="bg-white p-6 rounded-lg shadow-lg">
         <p className="text-center text-gray-800 mb-4">
           Are you sure you want to delete '{stageName}'?

components/dialogs/EditStageDialog.js

@@ -0,0 +1,100 @@
+// components/dialogs/EditStageDialog.js
+import React, { useState, useEffect, useRef } from "react";
+
+const EditStageDialog = ({ isOpen, onClose, onSave, onDelete, stageData }) => {
+  const [editedStage, setEditedStage] = useState(stageData || {});
+  const dialogRef = useRef(null); // Create a ref for the dialog
+
+  // Update local state when stageData changes
+  useEffect(() => {
+    if (stageData) {
+      setEditedStage(stageData);
+    }
+  }, [stageData]);
+
+  useEffect(() => {
+    // Focus on the dialog when it opens
+    if (isOpen && dialogRef.current) {
+      dialogRef.current.focus();
+    }
+  }, [isOpen]);
+
+  const handleChange = (field, value) => {
+    setEditedStage((prev) => ({
+      ...prev,
+      [field]: value,
+    }));
+  };
+
+  const handleKeyDown = (e) => {
+    if (e.key === "Escape") {
+      onClose(); // Close the dialog on Escape key press
+    } else if (e.key === "Enter") {
+      handleSave(); // Save the form on Enter key press
+    }
+  };
+
+  const handleSave = () => {
+    onSave(editedStage);
+  };
+
+  return (
+    isOpen && (
+      <div
+        className="fixed inset-0 bg-black bg-opacity-50 flex justify-center items-center z-50"
+        onKeyDown={handleKeyDown}
+        tabIndex={-1}
+        ref={dialogRef} // Set the ref here
+      >
+        <div className="bg-white p-6 rounded-lg shadow-md w-full max-w-lg">
+          <h2 className="text-xl font-bold mb-4">Edit Stage</h2>
+
+          {/* Check if editedStage exists before rendering fields */}
+          {editedStage &&
+            Object.keys(editedStage).map(
+              (field) =>
+                field !== "id" && ( // Do not show the id field in the form
+                  <div className="mb-4" key={field}>
+                    <label className="block text-sm font-semibold mb-2 capitalize">
+                      {field.replace(/([A-Z])/g, " $1")}
+                    </label>
+                    <input
+                      type="text"
+                      className="w-full p-2 border rounded"
+                      value={editedStage[field]}
+                      placeholder={`Enter ${field}`}
+                      onChange={(e) => handleChange(field, e.target.value)}
+                      onKeyDown={handleKeyDown} // Add keydown listener to input fields
+                    />
+                  </div>
+                )
+            )}
+
+          {/* Buttons */}
+          <div className="flex justify-end space-x-2 mt-6">
+            <button
+              onClick={() => onDelete(editedStage)}
+              className="px-4 py-2 bg-red-600 text-white rounded hover:bg-red-500"
+            >
+              Delete
+            </button>
+            <button
+              onClick={onClose}
+              className="px-4 py-2 bg-gray-300 rounded hover:bg-gray-400"
+            >
+              Cancel
+            </button>
+            <button
+              onClick={handleSave}
+              className="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-500"
+            >
+              Save
+            </button>
+          </div>
+        </div>
+      </div>
+    )
+  );
+};
+
+export default EditStageDialog;

components/dialogs/NewBlueprintConfirmationDialog.js

@@ -1,41 +1,48 @@
-// components/NewBlueprintConfirmationDialog.js
-import React, { useEffect } from 'react';
+// components/dialogs/NewBlueprintConfirmationDialog.js
+import React, { useEffect, useRef } from "react";
 
 const NewBlueprintConfirmationDialog = ({ isOpen, onClose, onConfirm }) => {
+  const dialogRef = useRef(null); // Create a ref for the dialog
+
   useEffect(() => {
     const handleEscape = (event) => {
-      if (event.key === 'Escape') {
+      if (event.key === "Escape") {
         onClose(); // Close the dialog if Escape key is pressed
       }
     };
 
     if (isOpen) {
-      document.addEventListener('keydown', handleEscape);
+      document.addEventListener("keydown", handleEscape);
+      dialogRef.current && dialogRef.current.focus(); // Focus the dialog when open
     }
 
     return () => {
-      document.removeEventListener('keydown', handleEscape);
+      document.removeEventListener("keydown", handleEscape);
     };
   }, [isOpen, onClose]);
 
   if (!isOpen) return null;
 
   return (
-    <div className="fixed inset-0 bg-gray-800 bg-opacity-50 flex items-center justify-center z-50">
-      <div className="bg-white p-6 rounded-lg shadow-lg">
+    <div
+      className="fixed inset-0 bg-gray-800 bg-opacity-50 flex items-center justify-center z-50"
+      tabIndex={-1}
+      ref={dialogRef} // Set the ref here
+    >
+      <div className="bg-white p-6 rounded-lg shadow-lg w-full max-w-sm mx-4">
         <p className="text-center text-gray-800 mb-4">
           Are you sure you want to reset the blueprint to its default state?
         </p>
         <div className="flex justify-around">
           <button
             onClick={onConfirm}
-            className="bg-red-600 text-white px-4 py-2 rounded hover:bg-red-700"
+            className="bg-red-600 text-white px-4 py-2 rounded hover:bg-red-700 transition-all duration-200"
           >
             Confirm
           </button>
           <button
             onClick={onClose}
-            className="bg-gray-300 text-gray-800 px-4 py-2 rounded hover:bg-gray-400"
+            className="bg-gray-300 text-gray-800 px-4 py-2 rounded hover:bg-gray-400 transition-all duration-200"
           >
             Cancel
           </button>

components/help/InfoColumn.js

@@ -51,7 +51,7 @@ const InfoColumn = ({ maxHeights }) => {
         </p>
       </div>
       <div
-        className="mb-8 pt-4 pb-4"
+        className="mb-0 pt-4 pb-0"
         style={{ minHeight: maxHeights.physicalEvidence }}
       >
         <h3 className="font-bold text-purple-500">Physical Evidence</h3>