Update package versions and refactor components for improved functionality and readability

app/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "aalai-beta",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "aalai-beta",
-      "version": "0.1.0",
+      "version": "0.1.1",
       "dependencies": {
         "@dnd-kit/core": "^6.3.1",
         "@dnd-kit/sortable": "^10.0.0",

app/package.json

@@ -1,6 +1,6 @@
 {
   "name": "aalai-beta",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "private": true,
   "dependencies": {
     "@dnd-kit/core": "^6.3.1",
@@ -56,7 +56,7 @@
     "prepare": "husky",
     "prestart": "tsc scripts/git-prompt.ts && node scripts/git-prompt.js",
     "start": "react-scripts start",
-    "build": "GENERATE_SOURCEMAP=false react-scripts build",
+    "build": "cross-env GENERATE_SOURCEMAP=false react-scripts build",
     "test": "jest"
   },
   "eslintConfig": {

app/src/components/Dashboard/TutorialCard.tsx

@@ -1,21 +1,39 @@
 import { getUserData } from "../../functions/getUserData";
 import { ALPHA_ORG } from "../../pages/Dashboard";
 import { DeleteIcon } from "../icons/ContextMenuIcons";
+import RenameInput from "../ui/inputs/RenameInput";
 
-export const TutorialCard: React.FC<{ tutorial: Tutorial; onClick: (tutorial: Tutorial) => void }> = ({ tutorial, onClick }) => {
+export const TutorialCard: React.FC<{
+    tutorial: Tutorial;
+    onClick: (tutorial: Tutorial) => void;
+}> = ({ tutorial, onClick }) => {
     const { organization } = getUserData();
     return (
         <div className="tutorial-card-container" onClick={() => onClick(tutorial)}>
             <div
                 className="preview-container"
                 style={{
-                    backgroundImage: tutorial.thumbnail ? `url(${tutorial.thumbnail})` : "linear-gradient(135deg, #ddd, #bbb)",
+                    backgroundImage: tutorial.thumbnail
+                        ? `url(${tutorial.thumbnail})`
+                        : "linear-gradient(135deg, #ddd, #bbb)",
                 }}
             ></div>
-            <div className="tutorial-details">
+            <div
+                className="tutorial-details"
+                onClick={(e) => {
+                    e.stopPropagation();
+                }}
+            >
                 <div className="context">
-                    <div className="tutorial-name">{tutorial.projectName}</div>
+                    <div className="tutorial-name">
-                    <div className="updated-date">{new Date(tutorial.createdAt).toLocaleDateString()}</div>
+                        <RenameInput
+                            value={tutorial.projectName}
+                            canEdit={organization === ALPHA_ORG}
+                        />
+                    </div>
+                    <div className="updated-date">
+                        {new Date(tutorial.createdAt).toLocaleDateString()}
+                    </div>
                 </div>
                 {organization === ALPHA_ORG && (
                     <div className="delete-option">

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

@@ -3,7 +3,7 @@ import { Line } from "react-chartjs-2";
 import { Chart as ChartJS, LineElement, CategoryScale, LinearScale, PointElement } from "chart.js";
 import { PowerIcon, ProductionCapacityIcon } from "../../icons/analysis";
 import SkeletonUI from "../../templates/SkeletonUI";
-import { useInputValues, useMachineUptime, useProductionCapacityData, useThroughPutData } from "../../../store/builder/store";
+import { useInputValues, useMachineUptime, useProductionCapacityData } from "../../../store/builder/store";
 
 ChartJS.register(LineElement, CategoryScale, LinearScale, PointElement);
 
@@ -28,7 +28,6 @@ const ThroughputSummary: React.FC = () => {
     ];
 
     const { productionCapacityData } = useProductionCapacityData();
-    const { throughputData: data } = useThroughPutData();
 
     const chartOptions = {
         responsive: true,

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

@@ -1,7 +1,6 @@
 import React, { useEffect, useState } from "react";
 import {
   CostBreakDownIcon,
-  LightBulpIcon,
   ROISummaryIcon,
   ROISummaryProductName,
   SonarCrownIcon,

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

@@ -1,8 +1,11 @@
 import { useEffect, useState } from "react";
-import { useInputValues, useMachineCount, useMachineUptime, useMaterialCycle, useProductionCapacityData, useThroughPutData } from "../../../store/builder/store";
 import {
-  ThroughputSummaryIcon,
+    useInputValues,
-} from "../../icons/analysis";
+    useMachineUptime,
+    useMaterialCycle,
+    useThroughPutData,
+} from "../../../store/builder/store";
+import { ThroughputSummaryIcon } from "../../icons/analysis";
 import SkeletonUI from "../../templates/SkeletonUI";
 
 const ProductionCapacity = ({
@@ -13,7 +16,7 @@ const ProductionCapacity = ({
 }) => {
     const { machineActiveTime } = useMachineUptime();
     const { materialCycleTime } = useMaterialCycle();
-  const { throughputData } = useThroughPutData()
+    const { throughputData } = useThroughPutData();
     const { inputValues } = useInputValues();
 
     const progressPercent = machineActiveTime;
@@ -32,13 +35,14 @@ const ProductionCapacity = ({
         } else {
             setIsLoading(false);
         }
-  }, [throughputData])
+    }, [throughputData]);
 
-  const Units_per_hour = ((shiftLength * 60) / (materialCycleTime / 60) / shiftLength)
+    const Units_per_hour = (shiftLength * 60) / (materialCycleTime / 60) / shiftLength;
 
     return (
         <>
-      {!isLoading && <div className="throughtputSummary-container analysis-card">
+            {!isLoading && (
+                <div className="throughtputSummary-container analysis-card">
                     <div className="throughtputSummary-wrapper analysis-card-wrapper">
                         <div className="card-header">
                             <div className="header">
@@ -55,7 +59,12 @@ const ProductionCapacity = ({
                             <>
                                 <div className="process-container">
                                     <div className="throughput-value">
-                  <span className="value">{(Units_per_hour).toFixed(2) === "Infinity"? 0 : (Units_per_hour).toFixed(2) }</span> Units/hour
+                                        <span className="value">
+                                            {Units_per_hour.toFixed(2) === "Infinity"
+                                                ? 0
+                                                : Units_per_hour.toFixed(2)}
+                                        </span>{" "}
+                                        Units/hour
                                     </div>
 
                                     {/* Dynamic Progress Bar */}
@@ -78,7 +87,9 @@ const ProductionCapacity = ({
                                 <div className="metrics-section">
                                     <div className="metric">
                                         <span className="label">Avg. Process Time</span>
-                  <span className="value">{materialCycleTime} secs/unit </span>
+                                        <span className="value">
+                                            {materialCycleTime} secs/unit{" "}
+                                        </span>
                                     </div>
                                     <div className="metric">
                                         <span className="label">Machine Utilization</span>
@@ -91,7 +102,8 @@ const ProductionCapacity = ({
                             <SkeletonUI type={"default"} />
                         )}
                     </div>
-      </div>}
+                </div>
+            )}
         </>
     );
 };

app/src/components/ui/inputs/RenameInput.tsx

@@ -1,10 +1,5 @@
 import React, { useState, useRef, useEffect } from "react";
 
-// interface RenameInputProps {
-//   value: string;
-//   onRename?: (newText: string) => void;
-// }
-
 interface RenameInputProps {
   value: string;
   onRename?: (newText: string) => void;

package-lock.json

@@ -1,6 +0,0 @@
-{
-  "name": "Dwinzo_Demo",
-  "lockfileVersion": 3,
-  "requires": true,
-  "packages": {}
-}