updating UI

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

@@ -1,21 +1,101 @@
-import React, { useState } from "react";
-import { ProductionCapacityIcon } from "../../icons/analysis";
+import React from "react";
+import { Line } from "react-chartjs-2";
+import {
+  Chart as ChartJS,
+  LineElement,
+  CategoryScale,
+  LinearScale,
+  PointElement,
+} from "chart.js";
+import { PowerIcon, ProductionCapacityIcon } from "../../icons/analysis";
 
-const ProductionCapacity = ({
-  progressPercent = 50,
-  avgProcessTime = "28.4 Secs/unit",
-  machineUtilization = "78%",
-  throughputValue = 128,
-  timeRange = { startTime: "08:00 AM", endTime: "09:00 AM" },
-}) => {
-  const totalBars = 6;
-  const barsToFill = Math.floor((progressPercent / 100) * totalBars);
-  const partialFillPercent =
-    ((progressPercent / 100) * totalBars - barsToFill) * 100;
+ChartJS.register(LineElement, CategoryScale, LinearScale, PointElement);
+
+// Helper function to generate random colors
+const getRandomColor = () => {
+  const letters = "0123456789ABCDEF";
+  let color = "#";
+  for (let i = 0; i < 6; i++) {
+    color += letters[Math.floor(Math.random() * 16)];
+  }
+  return color;
+};
+
+const ThroughputSummary = () => {
+  // Define all data internally within the component
+  const timeRange = {
+    startTime: "08:00 AM",
+    endTime: "09:00 AM",
+  };
+
+  const throughputData = {
+    labels: ["08:00", "08:10", "08:20", "08:30", "08:40", "08:50", "09:00"],
+    data: [100, 120, 110, 130, 125, 128, 132],
+    totalThroughput: 1240,
+    assetUsage: 85,
+  };
+
+  const energyConsumption = {
+    energyConsumed: 456,
+    unit: "KWH",
+  };
+
+  // Dynamic shift data
+  const shiftUtilization = [
+    { shift: 1, percentage: 30, color: "#F3C64D" },
+    { shift: 2, percentage: 40, color: "#67B3F4" },
+    { shift: 3, percentage: 30, color: "#7981F5" },
+  ];
+
+  // Chart data configuration
+  const chartData = {
+    labels: throughputData.labels,
+    datasets: [
+      {
+        label: "Units/hour",
+        data: throughputData.data,
+        borderColor: "#B392F0",
+        tension: 0.4,
+        pointRadius: 0, // Hide points
+      },
+    ],
+  };
+
+  const chartOptions = {
+    responsive: true,
+    scales: {
+      x: {
+        grid: {
+          display: false,
+        },
+        ticks: {
+          display: false,
+          color: "#fff",
+        },
+      },
+      y: {
+        grid: {
+          display: false,
+        },
+        ticks: {
+          display: false,
+          color: "#fff",
+        },
+      },
+    },
+    plugins: {
+      legend: {
+        display: false,
+      },
+      tooltip: {
+        enabled: true,
+      },
+    },
+  };
 
   return (
-    <div className="productionCapacity-container analysis-card">
-      <div className="productionCapacity-wrapper analysis-card-wrapper">
+    <div className="throughoutSummary analysis-card">
+      <div className="throughoutSummary-wrapper analysis-card-wrapper">
         <div className="card-header">
           <div className="header">
             <div className="main-header">Production Capacity</div>
@@ -30,34 +110,63 @@ const ProductionCapacity = ({
 
         <div className="process-container">
           <div className="throughput-value">
-            <span className="value">{throughputValue}</span> Units/hour
+            <span className="value">{throughputData.totalThroughput}</span>{" "}
+            Units/hour
           </div>
-
-          {/* Dynamic Progress Bar */}
-          <div className="progress-bar-wrapper">
-            {[...Array(totalBars)].map((_, i) => (
-              <div className="progress-bar" key={i}>
-                {i < barsToFill ? (
-                  <div className="bar-fill full" />
-                ) : i === barsToFill ? (
-                  <div
-                    className="bar-fill partial"
-                    style={{ width: `${partialFillPercent}%` }}
-                  />
-                ) : null}
-              </div>
-            ))}
+          <div className="lineChart">
+            <div className="assetUsage">
+              <div className="key">Asset usage</div>
+              <div className="value">{throughputData.assetUsage}%</div>
+            </div>
+            <Line data={chartData} options={chartOptions} />
           </div>
         </div>
 
-        <div className="metrics-section">
-          <div className="metric">
-            <span className="label">Avg. Process Time</span>
-            <span className="value">{avgProcessTime}</span>
+        <div className="footer">
+          <div className="energyConsumption footer-card">
+            <div className="header">Energy Consumption</div>
+            <div className="value-container">
+              <div className="energy-icon">
+                <PowerIcon />
+              </div>
+              <div className="value-wrapper">
+                <div className="value">{energyConsumption.energyConsumed}</div>
+                <div className="unit">{energyConsumption.unit}</div>
+              </div>
+            </div>
           </div>
-          <div className="metric">
-            <span className="label">Machine Utilization</span>
-            <span className="value">{machineUtilization}</span>
+          <div className="shiftUtilization footer-card">
+            <div className="header">Shift Utilization</div>
+            <div className="value-container">
+              <div className="value">{throughputData.assetUsage}%</div>
+
+              <div className="progress-wrapper">
+                {/* Dynamically create progress bars based on shiftUtilization array */}
+                {shiftUtilization.map((shift, index) => (
+                  <div
+                    key={shift.shift}
+                    className={`progress shift-${shift.shift}`}
+                    style={{
+                      width: `${shift.percentage}%`,
+                      backgroundColor: shift.color,
+                    }}
+                  ></div>
+                ))}
+              </div>
+
+              <div className="progress-indicator">
+                {/* Dynamically create shift indicators with random colors */}
+                {shiftUtilization.map((shift, index) => (
+                  <div className="shift-wrapper" key={shift.shift}>
+                    <span
+                      className={`indicator shift-${shift.shift}`}
+                      style={{ backgroundColor: shift.color }} // Random color for indicator
+                    ></span>
+                    <label>Shift {shift.shift}</label>
+                  </div>
+                ))}
+              </div>
+            </div>
           </div>
         </div>
       </div>
@@ -65,4 +174,4 @@ const ProductionCapacity = ({
   );
 };
 
-export default ProductionCapacity;
+export default ThroughputSummary;