Dwinzo-Beta/Dwinzo_Demo
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update package versions and refactor components for improved functionality and readability

Browse Source
This commit is contained in:
Vishnu
2025-12-09 10:41:30 +05:30
parent 5dd9a8a86d
commit 3f594482e9
8 changed files with 120 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
app/package-lock.json generated
View File

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

4
app/package.json
View File

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

28
app/src/components/Dashboard/TutorialCard.tsx
View File

@@ -1,21 +1,39 @@
import { getUserData } from "../../functions/getUserData"; import { getUserData } from "../../functions/getUserData";
import { ALPHA_ORG } from "../../pages/Dashboard"; import { ALPHA_ORG } from "../../pages/Dashboard";
import { DeleteIcon } from "../icons/ContextMenuIcons"; 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(); const { organization } = getUserData();
return ( return (
<div className="tutorial-card-container" onClick={() => onClick(tutorial)}> <div className="tutorial-card-container" onClick={() => onClick(tutorial)}>
<div <div
className="preview-container" className="preview-container"
style={{ 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>
<div className="tutorial-details"> <div
className="tutorial-details"
onClick={(e) => {
e.stopPropagation();
}}
>
<div className="context"> <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> </div>
{organization === ALPHA_ORG && ( {organization === ALPHA_ORG && (
<div className="delete-option"> <div className="delete-option">

3
app/src/components/ui/analysis/ProductionCapacity.tsx
View File

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

1
app/src/components/ui/analysis/ROISummary.tsx
View File

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

172
app/src/components/ui/analysis/ThroughputSummary.tsx
View File

@@ -1,99 +1,111 @@
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { useInputValues, useMachineCount, useMachineUptime, useMaterialCycle, useProductionCapacityData, useThroughPutData } from "../../../store/builder/store";
import { import {
ThroughputSummaryIcon, useInputValues,
} from "../../icons/analysis"; useMachineUptime,
useMaterialCycle,
useThroughPutData,
} from "../../../store/builder/store";
import { ThroughputSummaryIcon } from "../../icons/analysis";
import SkeletonUI from "../../templates/SkeletonUI"; import SkeletonUI from "../../templates/SkeletonUI";
const ProductionCapacity = ({ const ProductionCapacity = ({
avgProcessTime = "28.4 Secs/unit", avgProcessTime = "28.4 Secs/unit",
machineUtilization = "78%", machineUtilization = "78%",
throughputValue = 128, throughputValue = 128,
timeRange = { startTime: "08:00 AM", endTime: "09:00 AM" }, timeRange = { startTime: "08:00 AM", endTime: "09:00 AM" },
}) => { }) => {
const { machineActiveTime } = useMachineUptime(); const { machineActiveTime } = useMachineUptime();
const { materialCycleTime } = useMaterialCycle(); const { materialCycleTime } = useMaterialCycle();
const { throughputData } = useThroughPutData() const { throughputData } = useThroughPutData();
const { inputValues } = useInputValues(); const { inputValues } = useInputValues();
const progressPercent = machineActiveTime; const progressPercent = machineActiveTime;
const shiftLength = parseFloat(inputValues["Shift length"]); const shiftLength = parseFloat(inputValues["Shift length"]);
const totalBars = 6; const totalBars = 6;
const barsToFill = Math.floor((progressPercent / 100) * totalBars); const barsToFill = Math.floor((progressPercent / 100) * totalBars);
const partialFillPercent = ((progressPercent / 1000) * totalBars - barsToFill) * 100; const partialFillPercent = ((progressPercent / 1000) * totalBars - barsToFill) * 100;
const [isLoading, setIsLoading] = useState(true); const [isLoading, setIsLoading] = useState(true);
useEffect(() => { useEffect(() => {
if (throughputData > 0) { if (throughputData > 0) {
setIsLoading(false); setIsLoading(false);
} else { } else {
setIsLoading(false); setIsLoading(false);
} }
}, [throughputData]) }, [throughputData]);
const Units_per_hour = ((shiftLength * 60) / (materialCycleTime / 60) / shiftLength) const Units_per_hour = (shiftLength * 60) / (materialCycleTime / 60) / shiftLength;
return ( return (
<> <>
{!isLoading && <div className="throughtputSummary-container analysis-card"> {!isLoading && (
<div className="throughtputSummary-wrapper analysis-card-wrapper"> <div className="throughtputSummary-container analysis-card">
<div className="card-header"> <div className="throughtputSummary-wrapper analysis-card-wrapper">
<div className="header"> <div className="card-header">
<div className="main-header">Throughput Summary</div> <div className="header">
<div className="sub-header"> <div className="main-header">Throughput Summary</div>
{timeRange.startTime} - {timeRange.endTime} <div className="sub-header">
</div> {timeRange.startTime} - {timeRange.endTime}
</div> </div>
<div className="icon-wrapper"> </div>
<ThroughputSummaryIcon /> <div className="icon-wrapper">
</div> <ThroughputSummaryIcon />
</div> </div>
{!isLoading ? ( </div>
<> {!isLoading ? (
<div className="process-container"> <>
<div className="throughput-value"> <div className="process-container">
<span className="value">{(Units_per_hour).toFixed(2) === "Infinity"? 0 : (Units_per_hour).toFixed(2) }</span> Units/hour <div className="throughput-value">
</div> <span className="value">
{Units_per_hour.toFixed(2) === "Infinity"
? 0
: Units_per_hour.toFixed(2)}
</span>{" "}
Units/hour
</div>
{/* Dynamic Progress Bar */} {/* Dynamic Progress Bar */}
<div className="progress-bar-wrapper"> <div className="progress-bar-wrapper">
{[...Array(totalBars)].map((_, i) => ( {[...Array(totalBars)].map((_, i) => (
<div className="progress-bar" key={i}> <div className="progress-bar" key={i}>
{i < barsToFill ? ( {i < barsToFill ? (
<div className="bar-fill full" /> <div className="bar-fill full" />
) : i === barsToFill ? ( ) : i === barsToFill ? (
<div <div
className="bar-fill partial" className="bar-fill partial"
style={{ width: `${partialFillPercent}%` }} style={{ width: `${partialFillPercent}%` }}
/> />
) : null} ) : null}
</div>
))}
</div>
</div>
<div className="metrics-section">
<div className="metric">
<span className="label">Avg. Process Time</span>
<span className="value">
{materialCycleTime} secs/unit{" "}
</span>
</div>
<div className="metric">
<span className="label">Machine Utilization</span>
<span className="value">{machineActiveTime}</span>
{/* <span className="value">{machineActiveTime}</span> */}
</div>
</div>
</>
) : (
<SkeletonUI type={"default"} />
)}
</div> </div>
))}
</div> </div>
</div> )}
</>
<div className="metrics-section"> );
<div className="metric">
<span className="label">Avg. Process Time</span>
<span className="value">{materialCycleTime} secs/unit </span>
</div>
<div className="metric">
<span className="label">Machine Utilization</span>
<span className="value">{machineActiveTime}</span>
{/* <span className="value">{machineActiveTime}</span> */}
</div>
</div>
</>
) : (
<SkeletonUI type={"default"} />
)}
</div>
</div>}
</>
);
}; };
export default ProductionCapacity; export default ProductionCapacity;

5
app/src/components/ui/inputs/RenameInput.tsx
View File

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

6
package-lock.json generated
View File

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