feat: Add dragging and rotating state management to simulation store

- Introduced `useIsDragging` and `useIsRotating` stores to manage dragging and rotating states.
- Each store maintains its own state and provides setter functions.

refactor: Enhance storage unit and vehicle stores

- Added `clearStorageUnits` and `clearvehicles` methods to clear respective stores.
- Prevent duplicate entries in `addStorageUnit` and `addVehicle` methods by checking for existing model UUIDs.

style: Update SCSS variables and improve styling consistency

- Refactored background gradient variables for better readability.
- Introduced log indication colors for better visual feedback.
- Cleaned up and organized styles in various components for improved maintainability.

chore: Remove unused ROISummary styles

- Deleted `ROISummary.scss` as it was no longer needed.

feat: Implement new analysis component styles

- Created `analysis.scss` for the new analysis component layout and styles.
- Added styles for various sections including metrics, throughput values, and progress bars.

fix: Update main styles import

- Adjusted imports in `main.scss` to reflect the new structure and removed obsolete imports.

app/src/components/ui/simulation/simulationPlayer.tsx

@@ -64,8 +64,6 @@ const SimulationPlayer: React.FC = () => {
 
   const handleMouseDown = () => {
     isDragging.current = true;
-    document.addEventListener("mousemove", handleMouseMove);
-    document.addEventListener("mouseup", handleMouseUp);
   };
 
   const handleMouseMove = (e: MouseEvent) => {
@@ -80,11 +78,11 @@ const SimulationPlayer: React.FC = () => {
 
   const handleMouseUp = () => {
     isDragging.current = false;
-    document.removeEventListener("mousemove", handleMouseMove);
-    document.removeEventListener("mouseup", handleMouseUp);
   };
 
   useEffect(() => {
+    document.addEventListener("mousemove", handleMouseMove);
+    document.addEventListener("mouseup", handleMouseUp);
     return () => {
       document.removeEventListener("mousemove", handleMouseMove);
       document.removeEventListener("mouseup", handleMouseUp);
@@ -109,24 +107,6 @@ const SimulationPlayer: React.FC = () => {
     { name: "process 9", completed: 90 }, // 90% completed
     { name: "process 10", completed: 30 }, // 30% completed
   ];
-  // Move getRandomColor out of render
-  const getRandomColor = () => {
-    const letters = "0123456789ABCDEF";
-    let color = "#";
-    for (let i = 0; i < 6; i++) {
-      color += letters[Math.floor(Math.random() * 16)];
-    }
-    return color;
-  };
-
-  // Store colors for each process item
-  const [_, setProcessColors] = useState<string[]>([]);
-
-  // Generate colors on mount or when process changes
-  useEffect(() => {
-    const generatedColors = process.map(() => getRandomColor());
-    setProcessColors(generatedColors);
-  }, []);
 
   const intervals = [10, 20, 30, 40, 50, 60]; // in minutes
   const totalSegments = intervals.length;
@@ -218,7 +198,7 @@ const SimulationPlayer: React.FC = () => {
                 </div>
               </div>
             )}
-            {subModule === "simulations" && (
+            {subModule !== "analysis" && (
               <div className="header">
                 <InfoIcon />
                 {playSimulation
@@ -281,7 +261,7 @@ const SimulationPlayer: React.FC = () => {
                     const segmentProgress = (index / totalSegments) * 100;
                     const isFilled = progress >= segmentProgress;
                     return (
-                      <React.Fragment key={index}>
+                      <React.Fragment key={`${index}-${label}`}>
                         <div className="label-dot-wrapper">
                           <div className="label">{label} mins</div>
                           <div
@@ -360,6 +340,7 @@ const SimulationPlayer: React.FC = () => {
                 className="process-wrapper"
                 style={{ padding: expand ? "0px" : "5px 35px" }}
               >
+                {/* eslint-disable-next-line */}
                 <div
                   className="process-container"
                   ref={processWrapperRef}
@@ -367,7 +348,7 @@ const SimulationPlayer: React.FC = () => {
                 >
                   {process.map((item, index) => (
                     <div
-                      key={index}
+                      key={`${index}-${item.name}`}
                       className="process"
                       style={{
                         width: `${item.completed}%`,