Update UI components: rename header in Simulations, adjust time range in ThroughputSummary, modify ROI data defaults, and enhance sidebar styles.

app/src/components/layout/sidebarRight/simulation/Simulations.tsx

@@ -191,7 +191,7 @@ const Simulations: React.FC = () => {
             className="collapse-header-container"
             onClick={() => setOpenObjects(!openObjects)}
           >
-            <div className="header">Events</div>
+            <div className="header">Process Flow</div>
             <div className="arrow-container">
               <ArrowIcon />
             </div>

app/src/components/ui/analysis/ProductionCapacity.tsx

@@ -12,11 +12,11 @@ import SkeletonUI from "../../templates/SkeletonUI";
 
 ChartJS.register(LineElement, CategoryScale, LinearScale, PointElement);
 
-const ThroughputSummary = () => {
+const ThroughputSummary:React.FC = () => {
   // Define all data internally within the component
   const timeRange = {
     startTime: "08:00 AM",
-    endTime: "09:00 AM",
+    endTime: "06:00 PM",
   };
 
   const throughputData = {

app/src/components/ui/analysis/ROISummary.tsx

@@ -12,9 +12,9 @@ import SkeletonUI from "../../templates/SkeletonUI";
 
 const ROISummary = ({
   roiSummaryData = {
-    productName: "Product name",
+    productName: "Product 1",
     roiPercentage: 133,
-    paybackPeriod: 50.3,
+    paybackPeriod: 53,
     totalCost: "1,20,000",
     revenueGenerated: "2,80,000",
     netProfit: "1,60,000",
@@ -72,6 +72,14 @@ const ROISummary = ({
     setIsTableOpen(!isTableOpen);
   };
 
+  function getCurrentDate() {
+    const now = new Date();
+    const day = now.getDate().toString().padStart(2, "0");
+    const month = now.toLocaleString("en-GB", { month: "long" });
+    const year = now.getFullYear();
+    return `${day} ${month}, ${year}`;
+  }
+
   const isLoading = false;
   return (
     <div className="roiSummary-container analysis-card">
@@ -79,7 +87,7 @@ const ROISummary = ({
         <div className="card-header">
           <div className="header">
             <div className="main-header">ROI Summary</div>
-            <div className="sub-header">From 24 November, 2025</div>
+            <div className="sub-header">From {getCurrentDate()}</div>
           </div>
           <div className="icon-wrapper">
             <ROISummaryIcon />
@@ -130,14 +138,16 @@ const ROISummary = ({
                   className={`metric-item net-profit ${
                     roiSummaryData.netProfit ?? "loss"
                   }`}
-                  >
+                >
                   <div className="metric-label">
                     <span>↑</span>
                     Net Profit
                   </div>
                   <div className="metric-value">
                     <span>₹</span>
-                    {roiSummaryData.netProfit ? roiSummaryData.netProfit : roiSummaryData.netLoss}
+                    {roiSummaryData.netProfit
+                      ? roiSummaryData.netProfit
+                      : roiSummaryData.netLoss}
                   </div>
                 </div>
               </div>

app/src/components/ui/analysis/ThroughputSummary.tsx

@@ -1,5 +1,4 @@
 import {
-  ProductionCapacityIcon,
   ThroughputSummaryIcon,
 } from "../../icons/analysis";
 import SkeletonUI from "../../templates/SkeletonUI";

app/src/styles/layout/sidebar.scss

@@ -989,6 +989,27 @@
       .process-container {
         padding: 0 12px;
         margin: 6px 0;
+        padding-left: 16px;
+        position: relative;
+        &::after {
+          content: "↶";
+          rotate: -90deg;
+          transform: translate(-16px, 4px) scaleX(1);
+          height: 100%;
+          width: 1px;
+          position: absolute;
+          color: var(--text-color);
+          opacity: 0.4;
+          font-size: var(--font-size-regular);
+          outline-offset: -1px;
+          top: 0;
+          left: 4px;
+        }
+        &:last-child {
+          &::after {
+            display: none;
+          }
+        }
 
         .value {
           @include flex-space-between;
@@ -1034,7 +1055,7 @@
     }
 
     .compare-simulations-container {
-      background: var(--background-color-gray);
+      background: var(--background-color);
       padding: 12px;
       border-radius: #{$border-radius-large};
 
@@ -1207,7 +1228,7 @@
 
     .create-custom-analysis-container {
       margin: 6px;
-      background: var(--background-color-gray);
+      background: var(--background-color);
       padding: 12px;
       border-radius: #{$border-radius-large};
 
@@ -1510,20 +1531,20 @@
   }
 }
 
-@keyframes closeSidebar{
-  from{
+@keyframes closeSidebar {
+  from {
     height: 60%;
   }
-  to{
+  to {
     height: 52px;
   }
 }
 
-@keyframes openSidebar{
-  from{
+@keyframes openSidebar {
+  from {
     height: 52px;
   }
-  to{
+  to {
     height: 60%;
   }
 }