refactor: Update icon imports and improve UI components; enhance styles for better layout and responsiveness; modify event properties and simulation player functionality

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

@@ -12,25 +12,28 @@ import {
   EndIcon,
   ExpandIcon,
   HourlySimulationIcon,
+  InfoIcon,
   MonthlyROI,
   SpeedIcon,
   StartIcon,
 } from "../../icons/ExportCommonIcons";
 import { getAvatarColor } from "../../../modules/collaboration/functions/getAvatarColor";
+import { useSubModuleStore } from "../../../store/useModuleStore";
 
 const SimulationPlayer: React.FC = () => {
   const MAX_SPEED = 8; // Maximum speed
 
+  const isDragging = useRef(false);
+  const sliderRef = useRef<HTMLDivElement>(null);
   const [expand, setExpand] = useState(true);
+  const [playSimulation, setPlaySimulation] = useState(false);
 
   const { speed, setSpeed } = useAnimationPlaySpeed();
-  const [playSimulation, setPlaySimulation] = useState(false);
   const { setIsPlaying } = usePlayButtonStore();
-  const sliderRef = useRef<HTMLDivElement>(null);
-  const isDragging = useRef(false);
   const { setActiveTool } = useActiveTool();
   const { isPaused, setIsPaused } = usePauseButtonStore();
   const { isReset, setReset } = useResetButtonStore();
+  const { subModule } = useSubModuleStore();
 
   // Button functions
   const handleReset = () => {
@@ -114,7 +117,7 @@ const SimulationPlayer: React.FC = () => {
   };
 
   // Store colors for each process item
-  const [processColors, setProcessColors] = useState<string[]>([]);
+  const [_, setProcessColors] = useState<string[]>([]);
 
   // Generate colors on mount or when process changes
   useEffect(() => {
@@ -162,50 +165,60 @@ const SimulationPlayer: React.FC = () => {
     <div className="simulation-player-wrapper">
       <div className={`simulation-player-container ${expand ? "open" : ""}`}>
         <div className="controls-container">
-          <div className="production-details">
-            {/* hourlySimulation */}
-            <div className="hourly-wrapper production-wrapper">
-              <div className="header">
-                <div className="icon">
-                  <HourlySimulationIcon />
+          {subModule === "analysis" && (
+            <div className="production-details">
+              {/* hourlySimulation */}
+              <div className="hourly-wrapper production-wrapper">
+                <div className="header">
+                  <div className="icon">
+                    <HourlySimulationIcon />
+                  </div>
+                  <div className="label">Hourly Simulation</div>
+                </div>
+                <div className="progress-wrapper">
+                  <div
+                    className="progress"
+                    style={{ width: hourlySimulation }}
+                  ></div>
                 </div>
-                <div className="label">Hourly Simulation</div>
               </div>
-              <div className="progress-wrapper">
-                <div
-                  className="progress"
-                  style={{ width: hourlySimulation }}
-                ></div>
+              {/* dailyProduction */}
+              <div className="dailyProduction-wrapper production-wrapper">
+                <div className="header">
+                  <div className="icon">
+                    <DailyProductionIcon />
+                  </div>
+                  <div className="label">Daily Production</div>
+                </div>
+                <div className="progress-wrapper">
+                  <div
+                    className="progress"
+                    style={{ width: dailyProduction }}
+                  ></div>
+                </div>
+              </div>
+              {/* monthlyROI */}
+              <div className="monthlyROI-wrapper production-wrapper">
+                <div className="header">
+                  <div className="icon">
+                    <MonthlyROI />
+                  </div>
+                  <div className="label">Monthly ROI</div>
+                </div>
+                <div className="progress-wrapper">
+                  <div className="progress" style={{ width: monthlyROI }}></div>
+                </div>{" "}
               </div>
             </div>
-            {/* dailyProduction */}
-            <div className="dailyProduction-wrapper production-wrapper">
-              <div className="header">
-                <div className="icon">
-                  <DailyProductionIcon />
-                </div>
-                <div className="label">Daily Production</div>
-              </div>
-              <div className="progress-wrapper">
-                <div
-                  className="progress"
-                  style={{ width: dailyProduction }}
-                ></div>
-              </div>
+          )}
+          {subModule === "simulations" && (
+            <div className="header">
+              <InfoIcon />
+              {playSimulation
+                ? "Paused - system idle."
+                : "Running simulation..."}
             </div>
-            {/* monthlyROI */}
-            <div className="monthlyROI-wrapper production-wrapper">
-              <div className="header">
-                <div className="icon">
-                  <MonthlyROI />
-                </div>
-                <div className="label">Monthly ROI</div>
-              </div>
-              <div className="progress-wrapper">
-                <div className="progress" style={{ width: monthlyROI }}></div>
-              </div>{" "}
-            </div>
-          </div>
+          )}
           <div className="controls-wrapper">
             <button
               className="simulation-button-container"
@@ -234,12 +247,14 @@ const SimulationPlayer: React.FC = () => {
               <ExitIcon />
               Exit
             </button>
-            <button
-              className="expand-icon-container"
-              onClick={() => setExpand(!expand)}
-            >
-              <ExpandIcon isActive={!expand} />
-            </button>
+            {subModule === "analysis" && (
+              <button
+                className="expand-icon-container"
+                onClick={() => setExpand(!expand)}
+              >
+                <ExpandIcon isActive={!expand} />
+              </button>
+            )}
           </div>
         </div>
         <div className="progresser-wrapper">
@@ -330,37 +345,39 @@ const SimulationPlayer: React.FC = () => {
             </div>
           </div>
         </div>
-        <div className="processDisplayer">
-          <div className="start-displayer timmer">00:00</div>
-          <div className="end-displayer timmer">24:00</div>
-          <div
-            className="process-wrapper"
-            style={{ padding: expand ? "0px" : "5px 35px" }}
-          >
+        {subModule === "analysis" && (
+          <div className="processDisplayer">
+            <div className="start-displayer timmer">00:00</div>
+            <div className="end-displayer timmer">24:00</div>
             <div
-              className="process-container"
-              ref={processWrapperRef}
-              onMouseDown={handleProcessMouseDown}
+              className="process-wrapper"
+              style={{ padding: expand ? "0px" : "5px 35px" }}
             >
-              {process.map((item, index) => (
-                <div
-                  key={index}
-                  className="process"
-                  style={{
-                    width: `${item.completed}%`,
-                    backgroundColor: getAvatarColor(index),
-                  }}
-                >
+              <div
+                className="process-container"
+                ref={processWrapperRef}
+                onMouseDown={handleProcessMouseDown}
+              >
+                {process.map((item, index) => (
                   <div
-                    className="process-player"
-                    ref={processPlayerRef}
-                    style={{ left: playerPosition, position: "absolute" }}
-                  ></div>
-                </div>
-              ))}
+                    key={index}
+                    className="process"
+                    style={{
+                      width: `${item.completed}%`,
+                      backgroundColor: getAvatarColor(index),
+                    }}
+                  >
+                    <div
+                      className="process-player"
+                      ref={processPlayerRef}
+                      style={{ left: playerPosition, position: "absolute" }}
+                    ></div>
+                  </div>
+                ))}
+              </div>
             </div>
           </div>
-        </div>
+        )}
       </div>
     </div>
   );