Merge branch 'main' into v2

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

@@ -7,6 +7,15 @@ import {
   usePlayButtonStore,
   useResetButtonStore,
 } from "../../../store/usePlayButtonStore";
+import {
+  DailyProductionIcon,
+  EndIcon,
+  ExpandIcon,
+  HourlySimulationIcon,
+  MonthlyROI,
+  SpeedIcon,
+  StartIcon,
+} from "../../icons/ExportCommonIcons";
 
 const SimulationPlayer: React.FC = () => {
   const { speed, setSpeed } = useAnimationPlaySpeed();
@@ -31,7 +40,7 @@ const SimulationPlayer: React.FC = () => {
   const handleExit = () => {
     setPlaySimulation(false);
     setIsPlaying(false);
-    setActiveTool("cursor")
+    setActiveTool("cursor");
   };
 
   // Slider functions starts
@@ -73,70 +82,277 @@ const SimulationPlayer: React.FC = () => {
   }, []);
   // Slider function ends
 
+  // UI-Part
+  const hourlySimulation = 25;
+  const dailyProduction = 75;
+  const monthlyROI = 50;
+
+  const process = [
+    { name: "process 1", completed: 0 }, // 0% completed
+    { name: "process 2", completed: 20 }, // 20% completed
+    { name: "process 3", completed: 40 }, // 40% completed
+    { name: "process 4", completed: 60 }, // 60% completed
+    { name: "process 5", completed: 80 }, // 80% completed
+    { name: "process 6", completed: 100 }, // 100% completed
+    { name: "process 7", completed: 0 }, // 0% completed
+    { name: "process 8", completed: 50 }, // 50% completed
+    { name: "process 9", completed: 90 }, // 90% completed
+    { name: "process 10", completed: 30 }, // 30% completed
+  ];
+  const [expand, setExpand] = useState(false);
+  // 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 [processColors, 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;
+  const progress = 80; // percent (example)
+
+  const processPlayerRef = useRef<HTMLDivElement>(null);
+  const processWrapperRef = useRef<HTMLDivElement>(null);
+  const [playerPosition, setPlayerPosition] = useState(0);
+
+  const handleProcessMouseDown = (e: React.MouseEvent) => {
+    if (!processWrapperRef.current) return;
+
+    const rect = processWrapperRef.current.getBoundingClientRect();
+    let x = e.clientX - rect.left;
+    x = Math.max(0, Math.min(x, rect.width));
+    setPlayerPosition(x);
+
+    const onMouseMove = (e: MouseEvent) => {
+      if (!processWrapperRef.current) return;
+      const newRect = processWrapperRef.current.getBoundingClientRect();
+      let newX = e.clientX - newRect.left;
+      newX = Math.max(0, Math.min(newX, newRect.width));
+      setPlayerPosition(newX);
+
+      const progressPercent = (newX / newRect.width) * 100;
+      console.log(`Dragging at progress: ${progressPercent.toFixed(1)}%`);
+    };
+
+    const onMouseUp = () => {
+      document.removeEventListener("mousemove", onMouseMove);
+      document.removeEventListener("mouseup", onMouseUp);
+    };
+
+    document.addEventListener("mousemove", onMouseMove);
+    document.addEventListener("mouseup", onMouseUp);
+  };
+
   return (
     <div className="simulation-player-wrapper">
-      <div className="simulation-player-container">
+      <div className={`simulation-player-container ${expand ? "open" : ""}`}>
         <div className="controls-container">
-          <div
-            className="simulation-button-container"
-            onClick={() => {
-              handleReset();
-            }}
-          >
-            <ResetIcon />
-            Reset
-          </div>
-          <div
-            className="simulation-button-container"
-            onClick={() => {
-              handlePlayStop();
-            }}
-          >
-            <PlayStopIcon />
-            {playSimulation ? "Play" : "Stop"}
-          </div>
-          <div
-            className="simulation-button-container"
-            onClick={() => {
-              handleExit();
-            }}
-          >
-            <ExitIcon />
-            Exit
-          </div>
-        </div>
-        <div className="speed-control-container">
-          <div className="min-value">0.5x</div>
-          <div className="slider-container" ref={sliderRef}>
-            <div className="marker marker-10"></div>
-            <div className="marker marker-20"></div>
-            <div className="marker marker-30"></div>
-            <div className="marker marker-40"></div>
-            <div className="marker marker-50"></div>
-            <div className="marker marker-60"></div>
-            <div className="marker marker-70"></div>
-            <div className="marker marker-80"></div>
-            <div className="marker marker-90"></div>
-            <div className="custom-slider">
-              <div
-                className={`slider-handle ${isDragging ? "dragging" : ""}`}
-                style={{ left: `${calculateHandlePosition()}%` }}
-                onMouseDown={handleMouseDown}
-              >
-                {speed.toFixed(1)}x
+          <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>
-              <input
-                type="range"
-                min="0.5"
-                max="8"
-                step="0.1"
-                value={speed}
-                onChange={handleSpeedChange}
-                className="slider-input"
-              />
+              <div className="progress-wrapper">
+                <div
+                  className="progress"
+                  style={{ width: hourlySimulation }}
+                ></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>
+            </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="max-value">8x</div>
+          <div className="controls-wrapper">
+            <div
+              className="simulation-button-container"
+              onClick={() => {
+                handleReset();
+              }}
+            >
+              <ResetIcon />
+              Reset
+            </div>
+            <div
+              className="simulation-button-container"
+              onClick={() => {
+                handlePlayStop();
+              }}
+            >
+              <PlayStopIcon />
+              {playSimulation ? "Play" : "Stop"}
+            </div>
+            <div
+              className="simulation-button-container"
+              onClick={() => {
+                handleExit();
+              }}
+            >
+              <ExitIcon />
+              Exit
+            </div>
+            <div
+              className="simulation-button-container"
+              onClick={() => setExpand(!expand)}
+            >
+              <ExpandIcon />
+            </div>
+          </div>
+        </div>
+        <div className="progresser-wrapper">
+          <div className="time-displayer">
+            <div className="start-time-wrappper">
+              <div className="icon">
+                <StartIcon />
+              </div>
+              <div className="time-wrapper">
+                <div className="date">23 April ,25</div>
+                <div className="time">04:41 PM</div>
+              </div>
+            </div>
+            <div className="time-progresser">
+              <div className="timeline">
+                {intervals.map((label, index) => {
+                  const segmentProgress = (index / totalSegments) * 100;
+                  const isFilled = progress >= segmentProgress;
+                  return (
+                    <React.Fragment key={index}>
+                      <div className="label-dot-wrapper">
+                        <div className="label">{label} mins</div>
+                        <div
+                          className={`dot ${isFilled ? "filled" : ""}`}
+                        ></div>
+                      </div>
+                      {index < intervals.length - 1 && (
+                        <div
+                          className={`line ${
+                            progress >= ((index + 1) / totalSegments) * 100
+                              ? "filled"
+                              : ""
+                          }`}
+                        ></div>
+                      )}
+                    </React.Fragment>
+                  );
+                })}
+              </div>
+            </div>
+
+            <div className="end-time-wrappper">
+              <div className="time-wrapper">
+                <div className="time">00:10:20</div>
+              </div>
+              <div className="icon">
+                <EndIcon />
+              </div>
+            </div>
+          </div>
+          <div className="speed-control-container">
+            <div className="min-value">
+              <div className="icon">
+                <SpeedIcon />
+              </div>
+              Speed
+            </div>
+            <div className="slider-container" ref={sliderRef}>
+              <div className="speed-label mix-value">0X</div>
+              <div className="marker marker-10"></div>
+              <div className="marker marker-20"></div>
+              <div className="marker marker-30"></div>
+              <div className="marker marker-40"></div>
+              <div className="marker marker-50"></div>
+              <div className="marker marker-60"></div>
+              <div className="marker marker-70"></div>
+              <div className="marker marker-80"></div>
+              <div className="marker marker-90"></div>
+              <div className="custom-slider">
+                <div
+                  className={`slider-handle ${isDragging ? "dragging" : ""}`}
+                  style={{ left: `${calculateHandlePosition()}%` }}
+                  onMouseDown={handleMouseDown}
+                >
+                  {speed.toFixed(1)}x
+                </div>
+                <input
+                  type="range"
+                  min="0.5"
+                  max="8"
+                  step="0.1"
+                  value={speed}
+                  onChange={handleSpeedChange}
+                  className="slider-input"
+                />
+              </div>
+              <div className="speed-label max-value">8x</div>
+            </div>
+          </div>
+        </div>
+        <div className="processDisplayer">
+          <div
+            className="process-player"
+            style={{ left: playerPosition, position: "absolute" }}
+          ></div>
+          <div
+            className="process-wrapper"
+            ref={processWrapperRef}
+            onMouseDown={handleProcessMouseDown}
+          >
+            {process.map((item, index) => (
+              <div
+                key={index}
+                className="process"
+                style={{
+                  width: `${item.completed}%`,
+                  backgroundColor: processColors[index],
+                }}
+              ></div>
+            ))}
+          </div>
+          <div
+            className="process-player"
+            ref={processPlayerRef}
+            style={{ left: playerPosition, position: "absolute" }}
+          ></div>
         </div>
       </div>
     </div>